Zum Inhalt springen

Macina Searchbox CSS Design

Erstellt am 20. August 2008 · 5 Antworten · letzte Antwort am 26. August 2008

Tags: Frage

jan_0815 ·

moment ich hohl mal eben meine Kristallkugel und löse dir dein Problem.
;-)

was hast du den bis jetzt gemacht?
wie hast du dein Design eingebunden?

killinit ·

Ich habe die Extension folgendermassen konfiguriert.

Das Plugin wird von einem Subpart aufgenommen, soweit ist alles ok, das Suchfeld funktioniert, und die Ergebnisse werden ebenfalss korrekt dargestellt.

Blöderweise sieht das Suchfeld nicht so aus wie in der Designvorlage, es bleibt einfach ein rechteckiges Suchfeld.

tmp.SUCHE < plugin.tx_macinasearchbox_pi1
tmp.SUCHE{
pidSearchpage = {$SUCHPID}

}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Template file for the&quot;macina_searchbox&quot;extension.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="search.css" />

</head>
<body>
<h3>Template file for the &quot;macina_searchbox&quot; extension.</h3>
<p><b>Available Markers:</b></p>
<ul>
  <li>###ADVANCED### Advanced Search Link</li>
  <li>###SUBMIT### Alttext for the submit button</li>
  <li>###ACTLANG### UID of the actual language</li>
  <li>###SEARCHPID### PID of the Searchpage</li>
</ul>
<!-- ###TEMPLATE### begin -->
<div>
<div id="searchleft"></div>
<div id="search">
<form action="###SEARCHPID###" method="post" name="searchform" id="searchform" style="margin:0px; padding:0px;">
	<input name="tx_indexedsearch[sword]" type="text" style="height:12px; width:125px; font-size:10px;" onfocus="if(this.value=='Suche') this.value='';" onblur="if(this.value=='') this.value='Suche';" value="" />
	<input type="hidden" name="tx_indexedsearch[_sections]" value="0" />
	<input type="hidden" name="tx_indexedsearch[pointer]" value="0" />
	<input type="hidden" name="tx_indexedsearch[ext]" value="0" />
	<input type="hidden" name="tx_indexedsearch[lang]" value="###ACTLANG###" />
</form>

</div>
<div id="searchright"></div>
</div>
<!-- ###TEMPLATE### end -->
</body>
</html>
input {
	border: 0px;
}

#searchleft {
	float: left;
	height: 19px;
	width: 20px;
	background: url(suchfeld_links.png) no-repeat right top;
}

#search {
	float: left;
	height: 19px;
	width: 130px;
	padding-top: 3px;
	background: url(suchfeld_rand.png) repeat-x center top;
}

#searchright {
	float: left;
	height: 19px;
	width: 10px;
	background: url(suchfeld_rechts.png) no-repeat left top;
}

Ich habe mich schon soweit durchgestöbert bis ich auf die Datei ext_typoscript_editorcfg.txt im macina ordner gestossen bin, leider weiss ich nicht wie ich mit dieser Datei, und ob ich in dieser Datei meine CSS Definitionen eintragen muss, ich drehe mich gerade etwas im kreis.

###ext_typoscript_editorcfg.txt####

plugin.tx_macinasearchbox_pi1.CSS_editor = Plugin: "tx_macinasearchbox_pi1"
plugin.tx_macinasearchbox_pi1.CSS_editor.selector = .tx-macinasearchbox-pi1
plugin.tx_macinasearchbox_pi1.CSS_editor.exampleWrap = <HR><strong>Plugin: "tx_macinasearchbox_pi1"</strong><HR><DIV class="tx-macinasearchbox-pi1"> | </DIV>
plugin.tx_macinasearchbox_pi1.CSS_editor.ch {
	P = Text
	P.selector = P
	P.attribs = BODYTEXT
	P.example = <P>General text wrapped in &lt;P&gt;:<BR>This is text <A href="#">with a link</A> in it. In principio creavit Deus caelum et terram terra autem erat inanis et vacua et tenebrae super faciem abyssi et spiritus...</P>
	P.exampleStop = 1
	P.ch.links = < CSS_editor.ch.A
	
	H3 = Header 3
	H3.selector = H3
	H3.attribs = HEADER
	H3.example = <H3>Header 3 example <A href="#"> with link</A></H3><P>Bodytext, Et praeessent diei ac nocti et dividerent lucem ac tenebras et vidit Deus quod esset bonum et factum est...</P>
	H3.ch.links = < CSS_editor.ch.A
	H3.exampleStop = 1


	}
jan_0815 ·

Ich hab die Searchbox so eingebunden

page.config.index_enable = 1
index_enable = 1
index_externals = 1

search.rootPidList = 86
search.templateFile = fileadmin/templates/indexed_search.tmpl

plugin.tx_macinasearchbox_pi1 {
pidSearchpage = 126
templateFile = fileadmin/templates/macina_template.htm
}
lib.suche < plugin.tx_macinasearchbox_pi1

wobei der verweis auf die lib.suche natürlich nur bei Templar Voila funktioniert.

wie man sieht hab ich das template im fileadmin ausgelagert.
Da kann ich es einfacher ändern.

Die Styles habe ich in meiner Default.css definiert.

Deine Styles werden auch richtig eingebunden?
Die Div´s #
<div id="searchleft"></div> und

<div id="searchright"></div>
tauchen bei dir im FE auf?

Teste mal mit firebug ob die styles geladen werden und die div´s da sind.

killinit ·

Danke für deine Tips, hatte es mit Firebug getestet, die divs werden an den richtigen stellen eingebunden, jedoch wird nicht korrekt zugegriffen , es scheint zumindest so.

Ich denke das wird ein doofes css problem sein

killinit ·

Das Problem ist das Firebug mir einen transparenten hintergrund anzeigt, das attribut , transparent habe ich jedoch nicht in meiner css klasse definiert

von mir definierter Code

.searchleft  {
	float: left;
	height: 19px;
	width: 20px;
	background: url(suchimages/suchfeld_links.png);
}

Code ausgelesen mit dem Firebug

.searchleft {styleFF.css (Linie 269)
background:transparent url(suchimages/suchfeld_links.png) repeat scroll 0 0;
float:left;
height:19px;
width:20px;
}