Padding header text wordpress theme twenty twelve: hoe?

[almightyarjen]

Ik ben vrij nieuw in het Wordpress gebeuren en ik ben bezig om een website te maken. Daarvoor gebruik ik de WP theme twenty twelve als basis. Het lukt me aardig om alles te tweaken zoals ik het wil hebben, op één ding na: de padding van header teksten. H1 of H2, ik weet niet eens welke het is. Dit is het probleem:



Zoals je kan zien heb ik alles mooi links kunnen uitlijnen, maar de pagina titel "About me" krijg ik voor geen mogelijkheid naar links. Ik kan ook nergens een padding groter dan 0 vinden waar ik dit kan aanpassen in de style.css. Heeft iemand een idee waar ik dit kan aanpassen:

Mijn CSS ziet er nu zo uit:

code:

*snip* 3184 regels CSS verwijderd...

crap, kan ik dat code-window niet wat kleiner maken??

[ Voor 99% gewijzigd door RobIII op 20-11-2014 18:02 ]

[phex]

Ik kan je aanraden om de inspector van chrome of firebug te gebruiken.

Je selecteert dan het element en ziet de toegepaste css elementen. Zo kun je makkelijker vinden waar je precies iets moet wijzigen.

Waarschijnlijk heeft niemand zin om je hele css file door te spitten.

[almightyarjen]

Ik snap dat niemand daar zin in heeft, ik hoop dat iemand precies weet waar ik moet zijn

Ik had idd al met de inspector van Chrome gekeken. Daar kan ik de desbetreffende DIV ook vinden:

code:

<h1 class="entry-title">
                <a href="http://localhost/AlmightySite/?p=1" rel="bookmark">Hello world!</a>
            </h1>

In de rechter kolom bij "styles" kan ik echter helemaal geen padding vinden. Alle paddings daar staan al op 0, terwijl ik zou verwachten dat-ie hoger dan 0 zou zijn aangezien hij wat ingesprongen is.

Ook als ik in de CSS file op "entry-title" zoek kan ik niets over de padding vinden

[_Arthur]

Doe even een screenshot van de Inspector ajb (dus inc de gehele rechter kant)

[RobIII]

almightyarjen schreef op donderdag 20 november 2014 @ 17:26:
crap, kan ik dat code-window niet wat kleiner maken??

Door alleen relevante CSS te posten?
Maak gewoon, zoals het hoort, een testcase waarin je je probleem (en enkel je probleem) reproduceert en post daar relevante HTML/CSS van als je tijdens het maken van je testcase niet zélf al op 't probleem stuit en het oplost (zoals zo vaak het geval is). Je kunt een jsfiddle maken naar je testcase om 't voor anderen snel inzichtelijk te hebben wat er gebeurt / te stoeien met de effecten van wijzigingen.

[ Voor 49% gewijzigd door RobIII op 20-11-2014 18:00 ]

[almightyarjen]

_Arthur schreef op donderdag 20 november 2014 @ 17:55:
Doe even een screenshot van de Inspector ajb (dus inc de gehele rechter kant)

Screenshot:


En hier gaan we weer, de rechter kant is namelijk ook erg lang. Vandaar dat ik ook niet wist welk deel gerelateerd was

code:

*snip* Hallo... we zijn gekke jetje niet...

[ Voor 97% gewijzigd door RobIII op 20-11-2014 18:25 ]

[RobIII]

Ik heb wéér even 300+ regels CSS verwijderd. We zijn gekke jetje niet. Doe eens even zélf wat moeite en snij op z'n minst even alle meuk die niet met padding/margin te maken heeft weg. En een nog gekker idee: verdiep je gewoon eens even in deze (basiskennis!) materie. De "inspector" is echt geen rocket-science en daarmee moet je in een paar minuten puzzelen makkelijk je probleem kunnen pinpointen. Leer hoe je de inspector moet gebruiken / CSS moet lezen en mocht je er dan nog niet uit komen dan kun je in ieder geval een gerichte(!) vraag stellen i.p.v. elke keer een shitload aan code in onze schoot te dumpen en dan achterover te gaan leunen in de hoop dat iemand gek genoeg is 't voor je op te lossen en 't antwoord voor te kauwen. We zijn hier geen afhaalchinees.

Inhoudelijk: even op 't oog zijn de <header>, <h1> én <a> elementen allemaal kandidaat voor een margin en/of padding die de tekst teveel naar rechts duwt. Als je over die elementen hovered in je inspector zie je in je browser de gebruikte "vlakken" oplichten: dat zou het al een heel eind weg moeten geven. In het rechtervlak van de inspector zie je helemaal onderaan voor het geselecteerde element de margins/paddings.



Et voila -> een stoomcursus: hoe gebruik ik Chrome's Devtools?

[ Voor 30% gewijzigd door RobIII op 20-11-2014 18:39 ]

[johnkeates]

Kijk even naar de box model properties/metrics, daar staat wat je browser er van maakt.

[almightyarjen]

Ik had van een mod toch wel een andere taal verwacht. Ik kom hier gewoon met een probleem en nee, ik ben niet achterover gaan zitten. Als die h1-tag overal voorkomt dan kan ik niet ruiken waar die wel hoort en waar niet. Beetje jammer zo'n reactie, niet echt GoT-waardig...

Bedankt voor je tip, ik zal er naar kijken

[dimako_]

Wees verstandig en blijf van de bestaande css af.
Maak een nieuwe mystyle.css en plaats deze onder de bestaande .css file in <head>.

Vervolgens geef je entry-header een padding-top van bijv. 20px.
dus:

code:

.entry-header{
padding-top: 20px;
}

[RobIII]

almightyarjen schreef op donderdag 20 november 2014 @ 18:32:
Ik had van een mod toch wel een andere taal verwacht.

En ik (en iedereen ) had van een user wel wat meer eigen inzet verwacht (je bent bekend met onze Quickstart? en met Kan iemand even...??).

almightyarjen schreef op donderdag 20 november 2014 @ 18:32:
Ik kom hier gewoon met een probleem en nee, ik ben niet achterover gaan zitten. Als die h1-tag overal voorkomt dan kan ik niet ruiken waar die wel hoort en waar niet.

Met je neus kom je dan ook niet erg ver Je moet meten. Want meten = weten. En dus gebruik je de daarvoor bedoelde tools: Firefox Firebug of Dev.tools / IE F12 Dev.tools / Chrome Dev.tools / Safari Dev.tools / Opera Dragonfly.

almightyarjen schreef op donderdag 20 november 2014 @ 18:32:
Beetje jammer zo'n reactie, niet echt GoT-waardig...

Beetje jammer dat je na een eerste waarschuwing niet luistert en ik een tweede keer een lap code van heb-ik-jou-daar moet wegknippen

[_Arthur]

almightyarjen schreef op donderdag 20 november 2014 @ 18:32:
Als die h1-tag overal voorkomt dan kan ik niet ruiken waar die wel hoort en waar niet.

Maar wij helaas ook niet Tenzij we zelf even naar de site kunnen gluren met de inspector zelf in de hand.

Maar zoals de mod al zei; de H1 'ergens' is je eerste doel om naar te zoeken.

[almightyarjen]

johnkeates schreef op donderdag 20 november 2014 @ 18:32:
Kijk even naar de box model properties/metrics, daar staat wat je browser er van maakt.

Ik lijk geen properties/metrics te hebben... deze site geeft uitleg, maar de links naar de how-to's doen het niet

dimako_ schreef op donderdag 20 november 2014 @ 18:32:
Wees verstandig en blijf van de bestaande css af.
Maak een nieuwe mystyle.css en plaats deze onder de bestaande .css file in <head>.

Vervolgens geef je entry-header een padding-top van bijv. 20px.
dus:

code:

.entry-header{
padding-top: 20px;
}

Ik heb een child-theme aangemaakt waar ik al aardig wat heb lopen wijzigen, ik wijzig liever mijn huidige style sheet...

Als ik zoek op <h1>, <a>, of <header> kom ik dus helemaal niets tegen in de css file.. Kunnen er nog meer css bestanden zijn waarin het staaat?

[RobIII]

almightyarjen schreef op donderdag 20 november 2014 @ 18:48:
Als ik zoek op <h1>, <a>, of <header> kom ik dus helemaal niets tegen in de css file.. Kunnen er nog meer css bestanden zijn waarin het staaat?

Je bent bekend met de werking van CSS?
Het euvel kan 'm ook zitten in een .entry-header of .entry-header a of .entry-header h1 a of .entry-header .entry-title a of ... 1001 andere varianten. Het is maar net hoe de maker(s) de selector hebben opgebouwd om dat ene element te targeten en dat kan op ontelbare manieren. Vandaar dat je niet zonder een Devtools (a.k.a. "inspector") kunt. Het is heel goed mogelijk dat er geen "h1", "header" of "a" aan te pas komt.

[ Voor 17% gewijzigd door RobIII op 20-11-2014 18:53 ]

[almightyarjen]

As I said, ik ben een n00b... Ik heb de hele CSS file op padding doorzocht en alle padding-left staan op 0...

In de tab computed van de inspector staat dit:



Kan iets anders de verspringing veroorzaken?

[RobIII]

Begin nou eens bij 't begin:

RobIII schreef op donderdag 20 november 2014 @ 18:28:
Als je over die elementen hovered in je inspector zie je in je browser de gebruikte "vlakken" oplichten: dat zou het al een heel eind weg moeten geven.

Verder zien we aan die screenshot natuurlijk niets; zéker niet als we niet weten welk element er geselecteerd is aan de linkerkant (en of dat wel 't problematische element is!).

Misschien dat dit ook een goed idee is...

[ Voor 14% gewijzigd door RobIII op 20-11-2014 19:07 ]

[almightyarjen]

RobIII schreef op donderdag 20 november 2014 @ 19:04:
Begin nou eens bij 't begin:

[...]


Verder zien we aan die screenshot natuurlijk niets; zéker niet als we niet weten welk element er geselecteerd is aan de linkerkant (en of dat wel 't problematische element is!).

Misschien dat dit ook een goed idee is...

Als ik eroverheen hover zie ik dat dat ding h1.entry-title heet. Die naam komt echter nergens voor in de CSS stylesheet: ik zou verwachten dat er ergens iets met h1.etry-title en padding zou staan, maar dat is dus niet het geval. Of denk ik nu de verkeerde kant op?

[RobIII]

Je hebt nou zóveel links en hints en tips gehad en nóg zie ik je niet zélf moeite doen. Je vraagt en vraagt maar; je zou je ook even in de materie kunnen verdiepen... Ik probeer je niet dwars te zitten; ik probeer je bij te brengen hoe je 't voortaan zélf oplost

Give a man a fish and feed him for a day. Teach a man how to fish and feed him for a lifetime.

[ Voor 37% gewijzigd door RobIII op 20-11-2014 19:26 ]

[almightyarjen]

Ik heb me er ook tot een zeker niveau in verdiept. Dat wil zeggen: alle andere paddings kon ik allemaal op dezelfde manier aanpassen en daarom snap ik ook niet waarom ik die h1-header niet op dezelfde manier kan aanpassen. Ik zal er wat dieper in duiken.

Edit:
Ik heb het gevonden. Ik was gefocused op de padding, terwijl de margin het probleem gaf. Ik had beter naar de kleuren in de developer tool moeten kijken. Bedankt voor de aanwijzingen

[ Voor 27% gewijzigd door almightyarjen op 20-11-2014 21:30 ]