Hvordan endre størrelse på logo i Executive Pro themet

Dette er egentlig et innlegg jeg normalt ville lagt på «VIP bloggen». Der besvares konkrete utfordringer og spørsmål fra medlemmer. Her en smaksprøve for dere som lurer på hva som befinner seg på «innsiden» 🙂

I Executive Pro er størrelsen på logoen definert til maks 260 x 100 pixler. Det blir ofte for smått for mange logoer. Men det er ganske enkelt å justere.

Husk! Kjør alltid backup før du gjør endringer i childthemet!

Først endrer vi størrelsen på logoen i functions.php

Først går du inn på Utseende -> Redigering og klikker på functions.php. Der søker du deg fram til dette feltet:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'width'           => 260,
	'height'          => 100,
	'header-selector' => '.site-title a',
	'header-text'     => false
) );

Her endrer du bredde og høyde så det passer din logo. Den jeg har tenkt å legge inn er 450 x 177 pixler. Så jeg endrer til følgende:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'width'           => 450,
	'height'          => 177,
	'header-selector' => '.site-title a',
	'header-text'     => false
) );

Hvis jeg nå går inn på Utseende -> Tilpass -> Toppbilde så vil du se at størrelsen her nå er satt til 450 x 177 px, men selv om jeg har lastet opp logoen min, så ser du at vi ikke er helt i mål.

Legge til logo i Executive Pro

Vi må justere størrelsen i stilarket også

Vi går inn på samme sted som vi gjorde for å finne functions.php, men velger i stedet Stilark(style.css)

Endre størrelse på logo i stilarket.

Et stilark har ofte flere hundre linjer og det kan være vanskelig å finne akkurat det man er ute etter. Men du kan gjøre et søk etter å ha klikket på «Stilark». Klikk CMD + F på Mac, eller CTRL + F på PC, og du vil få opp et søkefelt på skjermen.

I Firefox som jeg bruker ligger det nederst i venstre hjørne. I Chrome ligger det øverst i høyre hjørne.

Her søker jeg etter «logo» og her ser du de samme størrelsene er definert her. Så her endrer vi max-width fra 260px til 450px og min-height fra 100px til 177px:

Søk etter logo
Her ser du søkefeltet nederst til venstre. Teksten du søker etter merkes her med grønt.

Om jeg da går tilbake å sjekker logoen, så ser den nå grei ut, men søkefeltet på høyre siden har nå hoppet ned under logoen.

Søkefeltet har hoppet ned et hakk

Tar du en titt under neste overskrift i stilarket, så ser du at det er definert en bredde på 820px under .site-header .widget-area.

Site Header Widget Area

Men fordi vi har økt bredden på logoen med 190px, så må bredden på dette feltet minskes tilsvarende. Så her endrer jeg fra 820 px til 630px.

Da har vi gjenopprettet balansen i «Site Header» feltet på siden:

Og vipps, har vi en header med større logo i Executive Pro.


Alle som har tatt WP Basis kurset hos oss har mulighet til å tegne et medlemskap i tillegg. Enten WP Multi eller WP VIP. VIP bloggen med svar på konkrete spørsmål fra medlemmene er en av flere fordeler i medlemskapene.

Du kan lese mer om både kurs og medlemskap her!

Kristin Skjæringrud
Kristin Skjæringrud

Kristin Skjæringrud er "rektor" på WP Skolen og mener at WordPress kan brukes til (nesten) alt. Men først og fremst til å bygge nettsider med ;-)

Artikler: 143

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *

This site uses Akismet to reduce spam. Learn how your comment data is processed.