Omien sivujen (wordpress-pohjaiset) CSS-muokkaus, osaako ubuntu "auttaa"?

[uhappo]

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!

[kamara]

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...

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;
}


[uhappo]

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.

[kamara]

<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.

[Ville Pöntinen]

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]

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!

[uhappo]

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...