DIY: Wie man die Navigationsleiste Suchfeld in Thesis anpassen

December 4

Das Thesis Theme für Wordpress erstellt von DIY Themes funktioniert indem Benutzer anpassen ihre Layouts und Gesamterscheinungsbild ohne Vorkenntnisse HTML oder CSS. Jeder Bereich des Themas hat einen eigenen Abschnitt in der Thesis-Dashboard, wo Benutzer die Schriftart, Größe und Farbe ändern können. Zusätzlich zum Anpassen, wie viele Spalten ein Wordpress-Blog hat, können die Benutzer auch ihre Suchleisten innerhalb der Navigation im Menü anpassen. Passen Sie das Suchfeld in der Thesis, musst du ein paar Zeilen Code in die CSS-Box in these einfügen und ändern die Farben nach Ihren Wünschen.

Anweisungen

1 Melden Sie sich mit Ihrem Benutzernamen und Passwort Ihrem Wordpress Dashboard an. Klicken Sie im linken Menü auf "Erscheinungsbild" und aktivieren Sie dem Thesis Theme zu, wenn Sie dies nicht bereits getan haben.

2 Öffnen Sie die Datei "Custom Functions" und stellen sicher, dass Sie den PHP-Code für das Suchfeld installiert. Wenn Sie nicht den Code installiert haben, können verwenden Sie den Code unten und es später zu bauen. Fügen Sie den folgenden Code am Anfang der Datei "Custom Functions":

Funktion custom_search() {}

// Enter your custom search text here

$searchtext = "Your search custom text";

// Enter your custom submit text here

$submittext = "Your submit custom text";

? >

<div id="search_bar">

<form method="get" action="<?php echo bloginfo('URL'); ?>">

<p>

<input type="text" id="text_entry" value="<?php echo $searchtext; ?>" name="s" onfocus="if (this.value == '<?php echo $searchtext; ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php echo $searchtext; ?>';}" />

<input type="submit" id="search_submit" value="<?php echo $submittext; ?>" />

</p>

</form>

</div>

<? Php}

3 Ersetzen Sie mit beliebig wo es heißt: "Textbausteine für Ihre Suche" und "Your senden benutzerdefinierter Text". Verwenden Sie das Wort "Suche" in beiden Bereichen für jetzt, wie es immer später geändert werden kann. Speichern Sie die Datei.

4 Öffnen Sie die CSS-Datei und fügen Sie am oberen Rand der Seite Folgendes:

.Custom #search_bar {Hintergrund: #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 {Hintergrund: #888; Padding: 5px 8px; Border: 1px Solid #aaa;}

Beachten Sie, dass das Tag ".custom #search_bar" Thesis erzählt wo werden diese Anpassungen stattfinden. Beachten Sie die drei bis sechs Ziffern-Codes nach, wo es heißt: "Hintergrund: #" in den obigen Zeilen. Diese Codes sind was manche nennen hex oder Farbcodes.

5 Ändern Sie das Tag ".custom #search_bar" und die "Hintergrund: #" Tag, um Ihr Suchfeld die Hintergrundfarben ändern. Use online sites such as "colorcombos.com," "html-color-codes.com" and "html-color-codes.info" to pick out some of your favorite colors.

6 Ändern Sie die Farbe des Rahmens zu, folgen Sie die Anweisungen in Schritt fünf oder entfernen Sie es insgesamt die Grenze 0px zu machen. Halten Sie den Abstand der Weg ist es, wenn Sie das Suchfeld rechts oder links verschieben möchten. Also, wollte man den Rahmen um Ihr Suchfeld zu entfernen, ohne dass des Codes, ersetzen, wo es heißt "Border: 1px solid #hex Code" mit "Grenze: 0px solid #hex Code."

7 Speichern Sie die CSS-Datei und eine Vorschau Ihrer Site. Achten Sie auf die Farbe Ihrer Suchfeld und die Schaltfläche "suchen". Wenn sie mit dem Rest Ihrer Website kollidieren oder wenn Sie den benutzerdefinierte Suche-Text nicht sehen können, das, den Sie in Schritt 3 nicht, sollten Sie zurückkehren in Ihre CSS-Datei und die Hintergrundfarbe ändern.


SIE KÖNNEN AUCH GERNE