News Details

15.02.2010 20:18

[typoscript] Searchbox

Kategorie: typoscript, RSS Feeds, TYPO3 snippets
Von: larsmessmer

Add nice Searchbox at any page via marker or TV only with TypoScript and CSS. 

  1. #TypoScript for Setup
  2.  
  3. lib.searchbox = <span style="color: #000000; font-weight: bold;">COA_INT
  4. lib.searchbox {
  5.   10 = <span style="color: #000000; font-weight: bold;">TEXT
  6.   10.typolink.parameter = {$plugin.tx_indexedsearch.searchUID}
  7.   10.typolink.returnLast = url
  8.   10.wrap = <!-- searchbox begin --><form name="search" id="search" class="search" action="|" method="post"><label id="searchLabel" for="searchQuery">suchen</label><input type="text" size="15" name="tx_indexedsearch[sword]" id="searchQuery" value="" /><input class="hidden" 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="0" /><button class="submit" name="tx_indexedsearch[submit_button]" type="submit" value="search">search</button></form><!-- searchbox end --> 
  9.   # if you need here comes userFunc for exampe ajax search
  10.   20 = <span style="color: #000000; font-weight: bold;">USER
  11.   20.userFunc = user_functionname
  12.   20.userFunc < plugin.name
  13.   20.userFunc.cssId = searchQuery
  14. }
  15.  
  16. #TypoScript Constants
  17. plugin.tx_indexedsearch.searchUID = 25
  18.  
  19. #CSS Code for box styling
  20. /************* search box begin *******************/
  21.  
  22. .search {
  23. 	clear: right;
  24. 	width: 163px;
  25. 	margin: 5px 0px 0 0;
  26. 	padding: 0;
  27. 	border: 1px solid #DDD;
  28. 	position: relative;
  29. 	line-height: 125%;
  30. 	height: 1.75em;
  31. 	background: #fff url(../img/bg_search.jpg) top right no-repeat;
  32. }
  33.  
  34. .searchfocus {
  35. 	background: #fff url(../img/bg_search_over.jpg) top right no-repeat;
  36. }
  37.  
  38. .search label {
  39.   	position: relative;
  40.   	display: block;
  41.   	width: 117px;
  42.   	color: #AAA;
  43.   	margin: 0;
  44.   	padding: .25em 4px .25em 20px;
  45.   	background: transparent url(../img/bg_searchlabel.gif) 4px 50% no-repeat;
  46.   	overflow: hidden;
  47. 	font-weight: normal;
  48. }
  49.  
  50. .search label.hidden {
  51.   	text-indent: -5000px;
  52. }
  53.  
  54. .search #searchQuery {
  55.   	margin: 0;
  56.   	padding: 0;
  57.   	border: none;
  58.   	background: none;
  59.   	position: absolute;
  60.   	top: .25em;
  61.   	left: 20px;
  62.   	width: 117px;
  63.   	height: 1.25em;
  64.   	font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
  65.   	font-size: 100%;
  66.   	line-height: 125%;
  67.   	color: #000;
  68. }
  69.  
  70. .search #searchQuery:focus {
  71.   	outline: none;
  72. }
  73.  
  74. .search .submit {
  75.   	position: absolute;
  76.   	display: block;
  77.  	top: 0;
  78.   	right: 0;
  79.   	bottom: 0;
  80.   	left: 141px;
  81.   	width: 22px;
  82.   	height: 100%;
  83.   	border: none;
  84.   	margin: 0;
  85.   	padding: 0;
  86.   	background: transparent url(../img/bg_searchsubmit.gif) 50% 50% no-repeat;
  87.   	text-indent: -5000px;
  88.   	overflow: hidden;
  89. }
  90. /************* search box end *******************/
  91.  

Links:
snippets.typo3.org/c/247/
« Zurück

Kommentare zu dieser News

Typo3