headerformaat aanpassen in Pinboard

Ah, ik zie in een andere post van je dat het gaat om http://www.bikbrigade.nl/
En ik heb toch maar ’t Pinboard theme bekeken

Header
In Pinboard kun je met featured berichten een prachtige slide show op home maken. Dit doe je door sticky berichten aan te maken ( vink in desbetreffend bericht rechts bij in het blokje Publiceren Zichtbaarheid Sticky aan). De uitgelichte afbeelding (let op juiste maatvoering) wordt dan de afbeelding op home.
Je site-description heeft nu een wonderbaarlijke line-height van 150px. Line-height is zoiets als regelafstand in Word. Dit is niet origineel Pinboard, deze wijziging moet je terugbrengen.

Menu
Je titels zijn nogal aan de lange kant. Met name ‘Welkom op de website van de Bik Brigade’ Home of Welkom volstaat toch wel? Ik denk dat je als artikel-titel deze volledige term wel wilt aanhouden. Wijzig dan in Weergave > Menu’s > klik in het desbetreffend menu op Welkom ….. rechts op het pijltje en geef bij het Navigatie-label ‘Home’ in of ‘Welkom’
Je krijgt alles op orde als je in je style.css vanaf regel 816 ter vervanging van de drie selector die je daar aantreft het wel op orde met de volgende vervangende code

#access li {
	position:relative;
	float:left;
	padding:0;
	margin:0;
	border-left: 1px solid white;
}

#access ul li:first-child {
	padding-left:0;
	border-left:none;
}

#access a {
	display:block;
	padding:15px 24px;
	color:#f0f0f0;
	text-decoration:none;
	-moz-transition: background-color .25s ease, margin .25s ease;
	-webkit-transition: background-color .25s ease, margin .25s ease;
	-o-transition: background-color .25s ease, margin .25s ease;
	-ms-transition: background-color .25s ease, margin .25s ease;
	transition: background-color .25s ease, margin .25s ease;
}

Verder nog wat tips: plaatsing van logo (nu in de home-content) niet op als vervanging van Pinboard logo. In Weergave > header kun je het desbetreffende logo uploaden. Let op de maat-suggesties. (Ik bedenk nu dat je daar waarschijnlijk die grote afbeelding heb geupload, m.i. geen logische keuze)
Daarnaast maak je nog geen gebruik van de gemakkelijk aan te passen en gebruikersvriendelijke (perma)links in je website. Voorbeeldprojecten zie je onder url http://www.bikbrigade.nl/?page_id=4. Onder Instellingen > permalinks kun je dit naar http://www.bikbrigade.nl/voorbeeldprojecten brengen (voorlaatste keuze), of althans daar wordt de permalink gevolgd die jij bij de desbetreffende redactie-pagina hebt ingebracht bij Permalink (direct onder titel, evt. te bewerken).Je gebruikers & Google loves you more!

Succes!
Lianne

Beste Tim,

Do not edit this stylesheet: duidt (terecht) op de aanwijzing van de theme-bouwer om te werken met een childtheme. Je trekt hiermee een afgeleide van het thema, en plaatst in het nieuwe styles.css de desbetreffende code. Komen er updates van Pinboard, met weer nieuwe code, dan worden je veranderingen niet overschreven. Dit is de voorkeurs-aanpak. Maken van childtheme
Maar je kunt ook je custom-css kwijt binnen het theme zelf, tabblad ‘Layout’. Deze blijft ook behouden bij een update.

Berichten sticky maken. Hiermee ‘plak’ je berichten op home. In dit geval met desbetreffende uitgelichte afbeelding in de slider. Je vindt in het scherm van een bericht rechtsboven het hokje Publiceren. Met daarin Zichtbaarheid: Openbaar of concept. Daarachter staat ‘Bewerken’ Klik daarop en je kunt hem openbaar en met een extra vinkje hem ‘Op de voorpagina plakken (sticky). Ook op een iMac (daar werk ik ook op).

Sitedescription – line-height In styles.css is deze met de site-title op 150px om de ruimte boven het menu 150px te houden. Dit is niet hoe je zou moeten coderen. Een div eromheen zou deze hoogte moeten hebben met een height-declaratie. Maar het blijft zo dat de afbeelding die je je plaatst via opload logo heel slecht matcht met elkaar, dan moet je heel veel ’tegen-css’en’ om dit mooi te krijgen. Ik zou eerst de slideshow voor elkaar proberen te krijgen. Je visie op het bovenste blok, verandert dan ongetwijfeld.

Nog niet helemaal de navigatie doorhebbenHet is beter om als vervolg op dit topic een nieuwe topic op te zetten.

Succes,
Lianne

Oke, Tim,

In principe gebruik ik weinig jargon, alleen wat je wilt, past maar moeizaam in het theme, en dan moet je een beetje de diepte in.

Laat ik je nu twee instructies geven:

1. Haal in je theme, tabblad ‘Header’ je afbeelding weg.
2. Plaats in tabblad Theme options, tabblad Layout de hier onderstaande code in het vak ‘custom css’

#access {
	margin-top: 15px;
	padding: 0 38px;
}

#access a {
	padding: 15px;
}

#header {
	padding:15px 0;
}

#site-title ,
#site-description {
	margin:0;
	float:none;
	line-height:auto;
	padding-left:560px;
}

#site-title {
	background:url("http://www.bikbrigade.nl/wp-content/uploads/cropped-groep-6-5-kopie.jpg") no-repeat;
	height: 254px;
	margin: 0%;
}

#site-title img {
	margin: 38px 0;
	vertical-align:middle;
}

#site-description {
	margin:-200px 0 0 0px;
}

#header #searchform {
	margin: 150px 3.4% 0 3px;
}

Dan ziet het er redelijk netjes uit, gebaseerd op de huidige foto.

groet,
Lianne

Hoi,

Ik zie dat ik een declaratie verkeerd had vermeld, dan is de header al iets minder hoog. Dit betreft de laatste

#header #searchform {
	margin: 150px 3.4% 0 3px;
}

Dit was in mijn plaatje:

#header #searchform {
	margin: 15px 3.4% 0 3px;
}

Maar als je hem weg wilt hebben, vervang dit door:

#header #searchform {
	display:none;
}

Met deze ‘verschijn-niet-truc’ staat je menu te hoog. Vervang de eerste declaratie door:

#access {
margin-top: 65px;
padding: 0 38px;
}

Het totaal-verhaaltje wordt dan

#access {
        	margin-top: 65px;
        	padding: 0 38px;
        }

        #access a {
        	padding: 15px;
        }

        #header {
        	padding:15px 0;
        }

        #site-title ,
        #site-description {
        	margin:0;
        	float:none;
        	line-height:auto;
        	padding-left:560px;
        }

        #site-title {
        	background:url("http://www.bikbrigade.nl/wp-content/uploads/cropped-groep-6-5-kopie.jpg") no-repeat;
        	height: 254px;
        	margin: 0%;
        }

        #site-title img {
        	margin: 38px 0;
        	vertical-align:middle;
        }

        #site-description {
        	margin:-200px 0 0 0px;
        }

        #header #searchform {
        	display:none;;
        }

Kijk ook eens hier: wplounge.nl. Hier vind bijvoorbeeld een hele goede uitleg over de permalinks in WP (links naar de verschillende pagina’s in je site in de url-balk van je browser).

Nog een fijne zondag!
groet,
Lianne

Als je een nieuw onderwerp aansnijdt is het beter om een nieuw topic te starten met eigen onderwerp, zoals social icons verplaatsen in theme Pinboard.

Er is geen algemene handleiding die alle aanpassingen behandelt, want dat kunnen er nogal wat zijn. Binnen je theme kun je de css, de html, de php etc. aanpassen, het is maar net hoe je theme in elkaar steekt.

Css veranderingen (dit moet om de plaats van je icoontjes te veranderen) is met enige ervaring niet zo heel moeilijk. Een belangrijke tool is Firebug, een addon van de browser Firefox. Hiermee kun je analyseren welke html-elementen je site heeft (de ‘blokken’ in je website) en welke css hiervoor geldt (bijvoorbeeld hoogte, breedte, positie, achtergrondkleur, onderstreept of niet, vetgedrukt, etc. etc.)
Je kunt in Firefox testen wat het effect is van aanpassing van de css en dan deze vervolgens doorvoeren in je theme (in Pinboard bij Theme opties, Layout, custom css).

Hoe nu met Firebug te werken? Youtube stikt van de instructiefilmpjes, youtube term ‘Firebug tutorial’. Ik kreeg als eerste link http://www.youtube.com/watch?v=tdIk2PztcL0 , een introductie-video met een tweede deel die iets dieper op de materie ingaat.

Wil je meer weten over CSS? Kijk dan op http://www.w3schools.com/cssref/default.asp

PS In Chrome heb je ook een ‘firebug’ achtige inspector, die activeer je door te rechtsklikken op je muis en dan ‘Inspecteer element’ aan te klikken.

Succes!

Lianne

Succes!

L