[Wordpress] Style.css veranderen

[RickXX]

Beste Tweakers,

Ik ben pas begonnen met een (poging) wagen tot webdesign met behulp van Wordpress. Echter loop ik zo nu en dan tegen wat muren op. Google helpt me elke keer om eroverheen te klimmen. Echter deze vraag lukt me via Google niet omdat hij specifiek is voor mijn theme/site/code. Ik hoop dan ook op een slimme tweaker als vangnet.

Op mijn site is er in de header area ruimte voor een logo (welke geschaald wordt naar 128px) en daarnaast een soort "advertentieruimte" oid. Ik wil graag de hele ruimte in de header benutten voor mijn logo en niet een lege ruimte aan de rechterkant hebben.

Ik dacht dit zelf op te lossen door in style.css de pixels te wijzigen:

/* -- 4.0 Header -- */
.header { position: relative; padding-bottom: 0; }
#banner-top { float: right; line-height: 0; margin: 20px 20px 20px 0px; }
.logo { width: 184px; float: left; margin: 20px; } Hier een width van 900px
.logo.image { line-height: 0; }
.logo img { width: 184px; } Hier een width van 900px
.logo .plain-text { font-size: 20px; line-height: 30px; font-weight: bold; }
.logo #tagline { font-size: 11px; font-style: italic; }

Echter, geen resultaat. Dit is waarschijnlijk voor de gemiddelde web designer een peace of cake. Zelf denk ik dat ik mogelijk ergens ook nog een function file moet veranderen oid? Ik zou het erg waarderen als iemand mij een schop in de goede richting kan geven. Bij voorbaat dank!

[RobIII]

Zonder relevante HTML kunnen we hier geen vredestaart van maken
Dit is hetzelfde als posten: x = 3, y = blauw, z = dinsdag; hoe kom ik in Amsterdam met de trein?

[ Voor 42% gewijzigd door RobIII op 05-10-2013 17:11 ]

[RickXX]

Excuus! Wat moet ik aanleveren om er wel een vredestaart van te maken? Ik heb een Wordpress installatie en een (custom) theme.

[posttoast]

Het liefst even de html-code van het relevante stuk (de header dus) of anders een link naar de site op een server

[RickXX]

Mijn projectje staat hier, let vooral niet op de content: http://oneclickchoice.nl

Als je met de muis eroverheen gaat en selecteert zie je ook dat dit "twee areas" zijn. Daar wil ik er graag één van maken en dan over de gehele breedte een afbeelding voor een logo. Iemand een idee?

[Devil]

Even openen in Chrome, rechtermuisknop op de area -> inspect element. En de console opent. Hier kun je precies zien welke css er op dat gebied van toepassing is.

We kunnen je wel precies vertellen wat je moet aanpassen, maar dan moet je verder voor elke aanpassing een topic maken

[ Voor 28% gewijzigd door Devil op 05-10-2013 17:35 ]

[RickXX]

Eens, het grotere geheel begrijpen is een stuk nuttiger. In dit geval klik ik inspect element. Dan krijg ik eerste de HTML output onder "elements". Daar zie ik een aantal verwijzingen maar geen naar margins/pixels of css files. Nu had jij over de Console openen. Als ik dat doe krijg ik het volgende: Get en dan een verwijzing naar .png image op de themebouwer maar geen verwijzing naar een .css file. Waar gaat het mis?

[F.West98]

Even duidelijk maken:
Je zet neer dat je een with van 900px wil ofzo (in je TS). Het is width

[RickXX]

Begrijp ik, type (en copy en paste foutje). Dank voor het melden.

[Devil]

RickXX schreef op zaterdag 05 oktober 2013 @ 18:12:
Eens, het grotere geheel begrijpen is een stuk nuttiger. In dit geval klik ik inspect element. Dan krijg ik eerste de HTML output onder "elements". Daar zie ik een aantal verwijzingen maar geen naar margins/pixels of css files. Nu had jij over de Console openen. Als ik dat doe krijg ik het volgende: Get en dan een verwijzing naar .png image op de themebouwer maar geen verwijzing naar een .css file. Waar gaat het mis?

Onder 'elements' zie je links de DOM tree, met als het goed is het element waar je rechtermuisknop op gedaan hebt al geselecteerd. In de rechtkolom zie je alle stijl informatie. 'computed style' is wat de browser uiteindelijk gebruikt en bij gewoon 'styles' zie je alle css rules die matchen (op het geselecteerde element) en waar deze rules vandaan komen (bestandsnaam + regelnummer).

Je kunt dan links in de DOM andere elementen selecteren en dan veranderd de rechterkolom ook. Verder kun je in de rechterkolom ook de waardes aanpassen, of regels aan en uitzetten. Op die manier kun je direct zien wat het effect is van een bepaalde verandering. Je moet het dan wel alsnog 'hard' aanpassen in het juiste bestand om het permanent te maken.

Jij wilt blijkbaar twee divs 'samenvoegen' dat kun je op twee manieren doen:
1 (netjes): pas de HTML source aan waardoor er nog maar 1 div is en pas de css aan om deze op de juiste manier te stylen
2 (makkelijk maar minder netjes): Pas alleen de css aan om 1 van de divs te verbergen (display: none;) en maak de andere breder.