Support » CSS / opmaak vragen » Header aanpassen Tesseract thema ?

  • Hallo mensen,

    Deze week begon ik voor het eerst met WordPress.
    Ik heb gekozen voor het Tesseract thema van Tyler.com.
    Met zijn uitleg begon ik met onze website.
    De website is: home-make-deco.nl
    Het menu in de header vind ik lelijk. Ik wil het menu naar het midden centreren en wi de woorden van het menu hebben in de vorm van buttons en ze kunnen kleuren naar de kleur van mn keuze.

    Is er iemand die mij kan helpen om dit te bevestigen.

    Dank jullie wel.

    Glenn

10 reacties aan het bekijken - 1 tot 10 (van in totaal 10)
  • Hi Glen,

    Ik denk dat je site nog niet on line is?
    Dat maakt het adviseren erg moeilijk… ;(

    Dat is vreemd. Als ik kijk vanaf een ander pc kom ik er gewoon. http://www.home-made-deco.nl
    Hoop dat het nu wel werkt.

    Bedankt!

    Hi Glen,

    Dank voor de aanvulling.
    Ik kan nu de site zien.
    Welke kleur moeten de knoppen hebben?
    Welke kleur moeten de teksten op de knoppen hebben?
    Welke vorm moeten de knoppen hebben?
    bijv. afgeronde hoeken…

    Hallo W.P Ginfo

    Gelukkig kan je hem nu wel zien.

    Indien mogelijk moeten de knoppen de kleur: c4b8b8 krijgen. En de letters dan wit.

    De vorm van de knoppen mogen wel rechthoekig zijn met afgeronde hoeken.

    Weet u toevallig ook om dat logo wat groter in te stellen in de header?

    Alvast heel erg bedankt voor uw reactie en moeite.

    groetjes

    Hallo Glenn,

    Bedoel je zoiets?

    .site-logo a {
    	height: 80px; /*pas aan naar wens*/
    	box-sizing: content-box;
    	}	
    
    .site-logo img {
    	height: 80px; /*pas aan naar wens*/
    	max-width: inherit;
    	display: block;
    	}
    
    li.menu-item{
    	background-color: #c4b8b8;
    	color:#ffffff !important;
    	border-radius: 5px;
    	height:29px;
    	margin-top:-.5em;
    	padding-bottom:1em;
    }
    
    li.menu-item a{
    	background-color: #c4b8b8;
    	color:#ffffff !important;
    	width:120px;
    	text-align:center;
    	border-radius: 5px;
    	height:1.5em;
    	padding-bottom:1em;
    	}
    
    ul#menu-hoofdmenu-1 {
    	margin-top:1.255em;
    	margin-right:14em;
    }
    
    .top-navigation ul li a {
    	padding: 1px;
    }

    == == == WAT NU TE DOEN MET DEZE CODE…

    Als je theme een optie heeft om de CSS aan te passen, bijvoorbeeld in een ‘custom css’-veld, plaats dan de aanpassing[en] aan je css hierin.
    Ontbreekt een dergelijke optie in je theme? Volg dan de instructies hieronder.

    Alternatief: Voeg bovenstaande code toe aan style.css van je CHILDtheme.
    Zo voorkom je dat al je aanpassingen worden overschreven als de makers van je theme een update installeren.
    Verder heeft het als voordeel dat alle aanpassingen overzichtelijk bij elkaar staan. Dat is makkelijk, overzichtelijk en eenvoudiger te onderhouden.

    Kies je ooit een ander theme, dan dien je een nieuw childtheme te maken.

    == == == Heb je nog geen childtheme?

    1. installeer en activeer ‘one click childtheme’-plug-in
    2. activeer de originele theme
    3. Dashboard > weergave > child theme
    4. beantwoordt de vragen op het scherm
      >> er wordt een child theme aangemaakt in een map met bestanden zoals style.css;
    5. Activeer het childtheme.
    6. ==

    7. om je site aan te passen, maak je nu alle wijzigingen in de map en bestanden van je child theme.
      – Maak je aanpassingen in style.css van het childtheme;
    • Gebruik een FTP-programma bijvoorbeeld filezilla om je site te benaderen
    • open de map van je childtheme
    • gebruik een code-editor bijv. ‘NOTEPAD++’ [gratis] om het bestand ‘style.css’ van je childtheme te bewerken
    • voeg bovenstaande code toe aan ‘style.css’ van je childtheme > sla alle wijzigingen op
    • UPload de aangepaste ‘style.css’ naar de map van je childtheme [en overschrijf]
    • browser: druk <CTRL-F5> om je browser te verversen
    • bekijk het resultaat

    – mocht je aanpassingen willen maken in de originele php-bestanden, kopieer de betreffende php-file uit het originele theme naar de map van het childtheme. Maak hierin dan de gewenste aanpassingen.

    == == == Extra

    Als je precies wilt zien welke elementen je site heeft en welke opmaak-kenmerken [css] daarbij horen,rechtsklik en kies ‘element inspecteren’.

    Zo kan je op zoek naar de diverse elementen en de kenmerken zoals kleuren, layout etc. aanpassen.

    == == == ik wil echt GEEN childtheme [en begrijp het probleem van het aanpassen van het originele theme…]
    Zet de bovenstaande code dan ONDERAAN het bestand ‘style.css’ van je thema. Ververs je browser <CTRL-F5>.
    == == ==

    Uhmmm… super van je codes.
    Alleen heb ze in de custom header geplaatst, althans eronder gekopieerd en opgeslagen.
    Nu is de website wit en niet meer te bewerken. Wat heb ik verkeerd gedaan :-0

    tnx

    ik denk toch dat ik hem opnieuw ga maken dus maakt niet heel veel uit. Maar wat heb ik fout gedaan. Je moet die gemaakte codes toch gewoon kopiëren naar de custom header?

    ik zie het al. Had hem in een custom css moeten doen. Deze heeft dit thema niet. Nu wil ik alles in de style.css doen maar dan ik dan alles in een keer onderaan te plaatsen of per categorie? Ben ff de kluts kwijt 🙂

    heb hem gewoon onderaan toegevoegd. Super! alleen vroeg ik me af of de letters midden in het bruine vak kunnen en deze lager kunnen. Dus dat ze niet tegen de bovenzijde aan zitten. En probeer alles nog wat naar rechts te krijgen maar tevergeefs haha

    Hi Glenn,

    Ik zie dat je er uit bent gekomen. Fantastisch!

    Bij mij op ’t scherm zag je site er goed uit, maar kennelijk heb ik nog niet de juiste aanpassing te pakken. Ik moet nog ff puzzelen. Je hoort zsm van me.
    Willem

10 reacties aan het bekijken - 1 tot 10 (van in totaal 10)
  • Het onderwerp ‘Header aanpassen Tesseract thema ?’ is gesloten voor nieuwe reacties.