Kirjoittaja Aihe: Omien sivujen (wordpress-pohjaiset) CSS-muokkaus, osaako ubuntu "auttaa"?  (Luettu 2550 kertaa)

uhappo

  • Käyttäjä
  • Viestejä: 1029
  • Sissos
    • Profiili
    • Urkin sivut
Hop!

Omissa sivuissa http://www.ukkohapponen.fi/ rupeis olemaan muuten kaikki puitteet päällisin puolin kohdallaan mutta pitäis saada uutisten/blogausten ja ton koko sivuston raamit hiukka uusiks. En ymmärrä CSS-touhuista paljoakaan, jotain ymmärrän enklanninkielestä ja numeroista mutta isompi taitamus on aika hakusessa. Toi nykyinen leveys on jotain 700px ja sen oikealla puolella oleva tila plugareille yms himpsuttimille on sit loput. Pitäis saada leveys jonnekin 960-1000px tienoille ja tota oikean puolen kaistaa pienemmäks, sit ois perfekto bueno.

Siis: onko ubuntussa jotain ohjelmaa tms editoria mihin vois heittää niitä CSS-filejä ja nähdä "isomman kuvan" jotennii herkemmin? Sivueditoria tms jotain varmaannii tarkoitan, semmosia joskus tullu vastaan mutta edelleen oon aika noviisi näissä hommissa.

Tai jos joku nokkelapokkela tyyppi osais ja haluais vinkata/auttaa asiassa niin kiitosta tulis virtuaalisesti ja paljon!
HP i7-pohjainen desktop ja itsekasattu i7-pohjainen desktop, uusin ubuntu 64bit
Ubuntu since 2008 Feb

kamara

  • Käyttäjä
  • Viestejä: 2355
    • Profiili
Suosittelisin lainaamaan kirjastosta CSS/XHTML-oppaan tai useammankin.

Kattava kirja on muistaakseni Jukka Korpelan käsialaa, mutta se käsittelee asiaa varsin syvällisesti eikä taiteellisesti.

Kotisivut kuntoon saattaisi olla aloittelijalle parempi, vaikken ole lukenut siitä itse kuin otsikon ja senkin googlaamalla.

Suosittelen myös asentamaan FireBug-lisäosan FireFoxiin, johon tutustumalla pystyy aloittelevampikin CSS-Guru löytämään oikean tiedoston ja kohdan, mitä muuttaa tyylissä.

Edit - Älä muokkaa php-tiedostoihin tyylejä, vaan tee ihan omat tyylitiedostot, ja tee muutokset niihin.


Siis ei näin...
Lainaus
Koodia: [Valitse]
        <div class="post-entry-content"><p style="text-align: justify;">Jawohl, uudet &#8221;kuoret&#8221; ovat asettuneet suht fantsusti paikoilleen ja ei oo kuin &#8221;pientä säätöä&#8221; vailla että ois just passeli. CSS, tuo juntin ja osaamattoman taivas.. Nooh, kokeilemalla oppii. Gut. Tästä kaikesta rohkaistuneena otamma tänään Zannalla vimoset reenit ennen keikkaa, tämä onnii eka kerta kun uudella kokoonpanolla päästään reenaamaan <strong>yhdessä</strong>! Joskus se ottaa aikansa ennenkuin asettuu uomaansa.. Tai löytyy aikarako, paikka, motiivi ja aikataulu! Yhteinen nääs. Jeps, lisää kikkailua sivujen kanssa lähipäivinä ja huomista keikkaa, eiköhän se näillä eväillä keuhkoköhäflunssakuumakylmäkipeys taitu.. Rok!</p>
<p><a href="http://i2.wp.com/www.ukkohapponen.fi/wp-content/uploads/2016/01/Zannahenkkamainosflyer.jpg" rel="attachment wp-att-3694"><img class="alignleft wp-image-3694" src="http://i2.wp.com/www.ukkohapponen.fi/wp-content/uploads/2016/01/Zannahenkkamainosflyer.jpg?resize=321%2C400" alt="Zannahenkkamainosflyer" srcset="http://i2.wp.com/www.ukkohapponen.fi/wp-content/uploads/2016/01/Zannahenkkamainosflyer.jpg?resize=241%2C300 241w, http://i2.wp.com/www.ukkohapponen.fi/wp-content/uploads/2016/01/Zannahenkkamainosflyer.jpg?resize=768%2C956 768w, http://i2.wp.com/www.ukkohapponen.fi/wp-content/uploads/2016/01/Zannahenkkamainosflyer.jpg?w=771 771w" sizes="(max-width: 321px) 100vw, 321px" data-recalc-dims="1" /></a></p>

<script>
function zbpShare(url) {
  var sharer = 'https://www.facebook.com/sharer/sharer.php?u='+url;
  window.open(sharer, 'sharer', 'width=626,height=436');
  return false;
}
var zbPregResult = '0';
</script>
</div>

Vaan lähinnä näin... (Pahoittelen, etten voi käyttää Code-tageja, vahvennusten takia):

        <div class="post-entry-content"><p class="perusteksti">Jawohl, uudet &#8221;kuoret&#8221; ovat asettuneet suht fantsusti paikoilleen ja ei oo kuin &#8221;pientä säätöä&#8221; vailla että ois just passeli. CSS, tuo juntin ja osaamattoman taivas.. Nooh, kokeilemalla oppii. Gut. Tästä kaikesta rohkaistuneena otamma tänään Zannalla vimoset reenit ennen keikkaa, tämä onnii eka kerta kun uudella kokoonpanolla päästään reenaamaan <strong>yhdessä</strong>! Joskus se ottaa aikansa ennenkuin asettuu uomaansa.. Tai löytyy aikarako, paikka, motiivi ja aikataulu! Yhteinen nääs. Jeps, lisää kikkailua sivujen kanssa lähipäivinä ja huomista keikkaa, eiköhän se näillä eväillä keuhkoköhäflunssakuumakylmäkipeys taitu.. Rok!</p>
<p><a href="http://i2.wp.com/www.ukkohapponen.fi/wp-content/uploads/2016/01/Zannahenkkamainosflyer.jpg" rel="attachment wp-att-3694"><img class="alignleft wp-image-3694" src="http://i2.wp.com/www.ukkohapponen.fi/wp-content/uploads/2016/01/Zannahenkkamainosflyer.jpg?resize=321%2C400" alt="Zannahenkkamainosflyer" srcset="http://i2.wp.com/www.ukkohapponen.fi/wp-content/uploads/2016/01/Zannahenkkamainosflyer.jpg?resize=241%2C300 241w, http://i2.wp.com/www.ukkohapponen.fi/wp-content/uploads/2016/01/Zannahenkkamainosflyer.jpg?resize=768%2C956 768w, http://i2.wp.com/www.ukkohapponen.fi/wp-content/uploads/2016/01/Zannahenkkamainosflyer.jpg?w=771 771w" sizes="(max-width: 321px) 100vw, 321px" data-recalc-dims="1" /></a></p>

<script>
function zbpShare(url) {
  var sharer = 'https://www.facebook.com/sharer/sharer.php?u='+url;
  window.open(sharer, 'sharer', 'width=626,height=436');
  return false;
}
var zbPregResult = '0';
</script>
</div>


Ja omaan CSS-tiedostoon...
Koodia: [Valitse]
.perusteksti {
                              :text-align: justify;
}
« Viimeksi muokattu: 08.01.16 - klo:18.15 kirjoittanut kamara »

uhappo

  • Käyttäjä
  • Viestejä: 1029
  • Sissos
    • Profiili
    • Urkin sivut
Kiitti vinkistä/vinkeistä! Mutta tota joo, ymmärränköhän mä nyt oikein tai tarkotinkohan mä nyt oikein.. Toi editori on wysiwysig, kuva liitteenä. Itse postauksissa tms ei oo mitään hämelinkiä vaan sivustojen peruspohja pitäis vaan saada leveämmäks. Oon tehny child themen tuolle teemalle ja hieman lueskellutkin ettei pidä originellia mennä sorkkimaan tms, vaan löytää style.css-hommelit jne. Pitänee ton FireBugin kautta kattoo tota style.css-tiedostoa mitä sanoo. Kattelin jo ton teeman tekijän kotisivuja niin supportia ei tule sieltä kautta, joten ite pitää sorvata mieleiseks.
HP i7-pohjainen desktop ja itsekasattu i7-pohjainen desktop, uusin ubuntu 64bit
Ubuntu since 2008 Feb

kamara

  • Käyttäjä
  • Viestejä: 2355
    • Profiili
Lainaus
<p><a href="http://i2.wp.com/www.ukkohapponen.fi/wp-content/uploads/2016/01/Zannahenkkamainosflyer.jpg" rel="attachment wp-att-3694"><img class="alignleft wp-image-3694" src="http://i2.wp.com/www.ukkohapponen.fi/wp-content/uploads/2016/01/Zannahenkkamainosflyer.jpg?resize=321%2C400" alt="Zannahenkkamainosflyer" srcset="http://i2.wp.com/www.ukkohapponen.fi/wp-content/uploads/2016/01/Zannahenkkamainosflyer.jpg?resize=241%2C300 241w, http://i2.wp.com/www.ukkohapponen.fi/wp-content/uploads/2016/01/Zannahenkkamainosflyer.jpg?resize=768%2C956 768w, http://i2.wp.com/www.ukkohapponen.fi/wp-content/uploads/2016/01/Zannahenkkamainosflyer.jpg?w=771 771w" sizes="(max-width: 321px) 100vw, 321px" data-recalc-dims="1" /></a></p>

Tollainen löytyi koodista (Firefoxissa CTRL+U)

Vahvennettuna oleellinen...
(
Koodia: [Valitse]
sizes="(max-width: 321px) 100vw, 321px"
)
Tuota et voi (ainakaan tietojeni mukaan) jyrätä CSS:llä, koska se on merkitty image-tagin sisällä, niin selain lukee priorisoidusti tärkeimpänä.

JavaScriptillä kyseisen varmaankin pystyisi ohittamaan, mutta silloin JavaScript pitää olla päällä, ja jälki olisi kyllä rumaa muutenkin ...

Ehkä joku WEB-guru osaa neuvoa. Mulle toi WordPress on kokeilematon.

Ongelmaan saattaisi löytyä ratkaisu, mikäli avaisit teksti-välilehden näkyville, mutta huonossa tapauksessa se sotkisi sun sivun, joten omalla vastuullasi.

Hyvällä onnella teksti-välilehden avulla pääsee puukottamaan html:llää, jolloin kannattaa etsiä kohta img tai Zannahenkkamainosflyer.jpg, ja suurentaa sen jälkeen olevaa sizes="(max-width: 321px) 100vw, 321px"
321:stä arvoon 767:ksi.
« Viimeksi muokattu: 08.01.16 - klo:19.51 kirjoittanut kamara »

Ville Pöntinen

  • Käyttäjä
  • Viestejä: 2078
    • Profiili
Kun oot luonu lapsiteeman, voinee senkin css-tiedostoja muokata: Ulkoasu -> Muokkain. Sitten oikealla alimpana lienee sun lapsiteemasi css.

Mutta tosiaan se firebug tai chromessa hiiren oikea+tarkista niin pääset etsimään mikä asetus vaikuttaa haluamaasi ominaisuuksiin.

uhappo

  • Käyttäjä
  • Viestejä: 1029
  • Sissos
    • Profiili
    • Urkin sivut
Jos kuvan "thumbnailin" vetää liian isoks niin se menee "yli reunojen", do you know what mean..? Nyt jo yö, kännissä ja ipadilla nin ei osaa tarkemmin selostaa.. Rok!
HP i7-pohjainen desktop ja itsekasattu i7-pohjainen desktop, uusin ubuntu 64bit
Ubuntu since 2008 Feb

uhappo

  • Käyttäjä
  • Viestejä: 1029
  • Sissos
    • Profiili
    • Urkin sivut
Doddih, etenemistä! Sain ton alueen isommaks, lisäämällä child themen style.css-tiedostoon tämmösen:
Koodia: [Valitse]
body #main-content {
    width: 750px;
}
Hmmm, nyt toi oikealla oleva widget tipahtaa alas, vielä kun sen saisin kohdalleen niin AVOT...
HP i7-pohjainen desktop ja itsekasattu i7-pohjainen desktop, uusin ubuntu 64bit
Ubuntu since 2008 Feb