WordPress met theme Atahualpa: zoekveld in menubalk

[lauriertje]

Beste allemaal,
Als je in WordPress, met als theme Atahualpa, in de theme options bij Style & edit Header area bij ‘Show search box?’ kiest voor ‘yes’, dan komt de search box te staan in de balk waar ook het logo en de titel van de site staan.

Ik vond dat niet mooi, en wilde de search box liever in de menubalk hebben. (Een horizontaal menu met daarin links naar de pages, niet de posts.)

Vóór ik het zoekveld toevoegde zag de menubalk er zó uit:


Het toevoegen van het zoekveld aan de menubalk lukt, met enige moeite, maar ik hou een probleem over dat ik niet weet op te lossen.

Zó heb ik het gedaan:
Ik heb het bestand atahualpa\functions\bfa_header_config.php als volgt aangepast:

Zoek “ // Search box”, en haal dat hele stukje weg.
Zoek nu de regel “// Close table if centered”, en plak daarvoor:

PHP:

// Search box
if ( $bfa_ata['show_search_box'] == "Yes" ) 
{
echo '<li class="searchbox" style="float:right; border-top: solid 1px #CCCCCC;&#8221;>
<form method="get" class="searchform" action="' . home_url() . '/">
<div class="searchbox-form" >' . 
// Check for WP 2.2 which doesn't know get_search_query
( function_exists('get_search_query') ? '
<input type="text" class="text inputblur" onfocus="this.value=\'' .
( get_search_query() ? get_search_query() : '' ) . '\'" 
value="' . ( get_search_query() ? get_search_query() : $bfa_ata['searchbox_text'] ) . 
'" onblur="this.value=\'' . ( get_search_query() ? get_search_query() : 
$bfa_ata['searchbox_text'] ) . '\'" name="s" />' :
'<input type="text" class="text inputblur" name="s" />') .
'</div>
</form>
</li>
';
}

Dat is prima, dat werkt.

Ik heb alleen nog een probleem: hierdoor wordt de menubalk vanzelf hoger. De menubalk en menu-items hebben een dun solid grijs randje, en nu zie je heel goed dat de menu-items minder hoog zijn dan de balk waar ze in zitten. Je kunt ook zien dat het zoekveld net iets te hoog is, waardoor het randje onder het zoekveld verdwijnt. (Randjes ingesteld in Atahualpa Theme Options – MENU 1 (Page Menu) – Border around all menu items: solid 1px #cccccc.)
Hier zie je het voorbeeld:


Dat is niet mooi.

Ik heb wel één oplossing gevonden, maar die geeft weer andere problemen.
Als ik in Atahualpa Theme Options – Style Forms – Form fields: Style dit regeltje toevoeg: “height: 11px;”, wordt de menubalk weer mooi. Maar als ik dan een formulier aan een pagina toevoeg met een meerregelig invulveld krijgt dat invulveld nog maar één regeltje van 11 px.
Daarom is dat toch geen goede oplossing.

Kan iemand mij helpen, heeft iemand een idee?

Dank, Laura

[ Voor 9% gewijzigd door lauriertje op 19-02-2011 18:00 ]

[Room42]

Je plaatjes zijn waardeloos klein, dus daar kan ik niets van maken. je code kun je beter tussen [code] (of [php]-) -tags zetten voor de leesbaarheid.

Nou je probleem: Zoals ik het lees, is je input-element dus te hoog. Nu is het onhandige dat ze de style inline gemaakt hebben en hem geen class of id meegegeven hebben. Met de stylesheets ga je dat dus niet (makkelijk) oplossen.

Zo te zien heb je een handleiding gevolgd maar ik ken verder de context niet. Was die handleiding speciaal voor deze theme? Wat je als eerste eens kan proberen is "border-top: solid 1px #CCCCCC;" weg te halen.

Als je Firefox gebruikt, installeer de add-on Firebug. Klik daarna met rechts op het zoekveld en klik "Inspect Element". Nu kun je rechts real-time de CSS aanpassen om zo te kijken hoe het moet worden. Als je de juiste style gevonden hebt, kun je die verwerken in je stylesheets.

[Cartman!]

Room42 schreef op zaterdag 19 februari 2011 @ 16:32:
Nou je probleem: Zoals ik het lees, is je input-element dus te hoog. Nu is het onhandige dat ze de style inline gemaakt hebben en hem geen class of id meegegeven hebben. Met de stylesheets ga je dat dus niet (makkelijk) oplossen.

Kan prima met !important in CSS, ik ga er niet vanuit dat ze de inline style ook van !important hebben voorzien althans

[lauriertje]

Ha Sjaakduhuuhl,
De plaatjes in mijn post hier waren inderdaad te klein, ik laat ze nu linken naar een grotere versie.

Als ik border-top zou aanpassen zou alleen de rand aan de bovenkant van de menubalk verwijnen, maar het probleem is juist dat de rand aan de onderkant van de menubalk ter hoogte van het zoekveld verdwijnt. Ik kan natuurlijk die hele rand weghalen, maar ik wil daar graag wel een rand hebben. Nou ja, nu de plaatjes duidelijker zijn zal je beter snappen wat ik bedoel.

Ik heb geen handleiding gevolgd, maar in die php-code het stukje over de search box gevonden, gewoon maar wat geprobeerd.

Ik ga nu in elk geval firebug installeren, had ik nog niet, bedankt!
Laura

[MueR]

Even wat [code=php] tags om de code gezet, dan is het wat leesbaarder (voor zover mogelijk met deze code )

[ Voor 21% gewijzigd door MueR op 19-02-2011 17:54 ]

[lauriertje]

Ja, ik heb het nu nog weer wat leesbaarder gemaakt. Hoe dan ook: het is nogal lastig. Echt gepruts....Ook met firebug kom ik niet veel verder in dit verband (wel heel handige addon trouwens, evengoed dus heel erg bedankt!).
Ik heb de vraag ook op het Atahualpa-forum gepost, waarschijnlijk kan ik hun er beter mee last vallen dan jullie.
http://forum.bytesforall.com/showthread.php?p=58389

[Room42]

Cartman! schreef op zaterdag 19 februari 2011 @ 17:03:
[...]

Kan prima met !important in CSS, ik ga er niet vanuit dat ze de inline style ook van !important hebben voorzien althans

Ik heb over de classes heen gelezen, zo te zien

lauriertje schreef op zaterdag 19 februari 2011 @ 18:02:
Ja, ik heb het nu nog weer wat leesbaarder gemaakt. Hoe dan ook: het is nogal lastig. Echt gepruts....Ook met firebug kom ik niet veel verder in dit verband (wel heel handige addon trouwens, evengoed dus heel erg bedankt!).
Ik heb de vraag ook op het Atahualpa-forum gepost, waarschijnlijk kan ik hun er beter mee last vallen dan jullie.
http://forum.bytesforall.com/showthread.php?p=58389

Dat is misschien beter omdat zij de code kennen, ik moet het met aannames doen Het advies om niet in de code te werken die bij een update overschreven wordt. Dan kun je namelijk weer opnieuw beginnen.

Laat nog even weten of het gelukt is

[lauriertje]

Gevonden!
In de styling van de search box staat nu:
border: 0px dashed #cccccc;
border-bottom: 0;
width: 180px;
margin: 0px 0px -48px 0;
padding: 13px 19px 0px 0px;

Bedankt voor het meedenken!