DIY: Slik tilpasser navigasjons Bar søkeboksen i Thesis

Avhandlingen Tema for Wordpress skapt av DIY Temaer fungerer ved å la brukerne tilpasse layout og generelle utseende uten forutgående HTML eller CSS kunnskap. Hvert område av temaet har sin egen seksjon i Thesis dashbordet der brukerne kan endre skrifttype, størrelse og farge. I tillegg til å tilpasse hvor mange kolonner en Wordpress blogg har, kan brukerne også tilpasse sine søke barer innen navigasjonsmenyen. Slik tilpasser søkeboksen i Thesis, må du sette inn et par linjer med kode i CSS boksen i Thesis og endre fargene til din smak.

Bruksanvisning

1 Logg inn på din Wordpress dashbordet ved å bruke ditt brukernavn og passord. Klikk på "Utseende" i venstremenyen på og aktivere Thesis Theme hvis du ikke allerede har gjort det.

2 Åpne din "egendefinerte funksjoner" -filen og sørg for at du har PHP-koden for søkeboksen installert. Hvis du ikke har koden installert, kan du bruke koden under og bygge ut av det senere. Lim inn koden nedenfor på toppen av "egendefinerte funksjoner" file:

funksjon custom_search () {

// Enter your custom search text here

$ Search = "Søket tilpasset tekst";

// Skriv inn din egendefinerte sende tekst her

$ Submittext = "Din sende egendefinert tekst";

?>

<div id="search_bar">

& Lt; form method = "get" action = "& lt;? Php echo bloginfo ( 'URL');?>">

& Lt; p>

& Lt; input type = "text" id = "text_entry" value = "& lt;? Php echo $ search;?>" Name = "s" onFocus = "if (this.value == '& lt;? Php echo $ search ;?> ') {this.value =' ';} "onblur =" if (this.value ==' ') {this.value = "& lt;? php echo $ search;?>';}" />

& Lt; input type = "submit" id = "search_submit" value = "& lt;? Php echo $ submittext;?>" />

& Lt; / p>

& Lt; / form>

& Lt; / div>

<? Php}

3 Skift der det står "Your Search Custom Text" og "Your Send Custom Text" med hva du vil. Bruk ordet "Søk" i begge områder for nå som det kan alltid bli endret senere. Lagre filen.

4 Åpne din CSS fil og lim inn følgende på toppen av siden:

.custom #search_bar {background: # 212121; padding: 10px; text-align: center; }

.custom #search_bar #text_entry {background: #efefef; padding: 5px 8px; border: 1px solid # e6e6e6; }

.custom #search_bar #search_submit {background: # 888; padding: 5px 8px; border: 1px solid #aaa; }

Merk at ".custom #search_bar" tag forteller Thesis hvor disse tilpasningene vil finne sted. Legg merke til de tre til seks tallkoder etter hvor det står "bakgrunn: #" i linjene ovenfor. Disse kodene er det noen kaller hex eller fargekoder.

5 Endre ".custom #search_bar" tag og "bakgrunn: #" tag å endre bakgrunnsfargene på søkeboksen. Bruk online nettsteder som "colorcombos.com", "html-color-codes.com" og "html-color-codes.info" for å plukke ut noen av dine favoritt farger.

6 Endre kantfarge ved å følge instruksjonene i trinn fem eller fjerne den helt ved å gjøre grensen 0px. Hold padding slik det er med mindre du ønsker å flytte søkeboksen til høyre eller venstre. Så, hvis du ønsket å fjerne rammen rundt søkeboksen uten å slette koden, må du skifte der det står "border: 1px solid heksadesimalverdi code" med "border: 0px solid heksadesimalverdi kode."

7 Lagre CSS-fil og forhåndsvise nettstedet. Vær oppmerksom på fargen på søkeboksen og søkeknappen. Hvis de i konflikt med resten av området, eller hvis du ikke kan se den tilpassede søketeksten du gjorde i trinn 3, kan det være lurt å gå tilbake til din CSS-fil og endre bakgrunnsfarger.