Navigare rapidă

Ultimele subiecte
» Prezentare Cristian
Scris de Petronel™ Dum 27 Aug - 16:36
» Cum sa repari un CD sau DVD "Idiot"
Scris de ionut1ion Dum 30 Iul - 11:28
Cuvinte-cheie

Aspect nou pentru casuta de cautare


Salut,
In acest tutorial veti putea creea o casuta de cautare mult mai frumoasa decat cealalalta.
Demo:
Normal - http://i45.servimg.com/u/f45/17/45/40/76/110.png
La apasarea butonului Avansat - http://i45.servimg.com/u/f45/17/45/40/76/210.png

Pasul 1. Adaugarea codurilor CSS
Mergem in: Panoul de administrare => Afisare => Imagini si culori => Culori => Foaie de stil CSS si adaugam:
Cod:
/* Casuta de cautare */

#cautare {
padding: 1px;
margin-left: 1px;}

/* Casuta de inserare */

#casuta_cautare {
color: #999;
background: #fff;
padding: 5px;
border: 1px solid #ddd;
border-radius: 3px 0px 0px 3px;}

#casuta_cautare:hover {
border: 1px solid #d8d8d8;
color: #777; }

/* Butonul de cautare */

#buton_cautare {
position: relative;
cursor: pointer;
margin-left: -26px;
background: #295CA9 url("http://i45.servimg.com/u/f45/17/45/40/76/start10.png") no-repeat 50% center ;
width: 26px;
height: 26px;
border-radius: 0px 3px 3px 0px;
border: 1px solid #19367B;
border-left: none;}

#buton_cautare:hover { opacity: 0.9;}

/* Butonul avansat */

.optiuni {
display: none;
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #000;
text-shadow: 1px 1px 1px #fff;
margin-top: 5px;}

.avansat {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px #19367B;
bottom: -1px;
display: inline-block;
cursor: pointer;
padding: 3px;
border-radius: 3px 3px 3px 3px;
border: 1px solid #19367B;
background: #295CA9;}

.avansat:hover { opacity: 0.9;}
Pasul 2. Adaugarea codului javascript
Mergem in Panoul de administrare => Module => Gestiunea codurilor javascrip si creem un cod nou:
Titlu - Casuta de cautare
Amplasare - Toate paginile
Cod:
Cod:
$(document).ready(function() {
$(".avansat").click(function() {
$(".optiuni").toggle();
});
});
Pasul 3. Adaugarea librariei javascript
Daca folositi phpbb2 sau punbb, mergeti in Panoul de administrare => Afisare => Template-uri => General => Overall_header si adaugam codul urmator dupa < head>
Cod:
<script src="http://code.jquery.com/jquery-latest.js"></script>
Daca folositi phpbb3 sau invision adaugati codul intr-un widget] afisat pe toate paginile[/b sau in [b]anunturi.
Panoul de administrare => General => Anunturi => Creeaza un anunt.
Panoul de administrare => Module => Widget-urile forumului

Pasul 4. Codurile HTML
Adaugati codurile urmatoare unde doriti:
- Anunturi
- Generalitati
- Header
Daca doriti sa mutati intreaga casuta, nu doar parti din ea cum ar fi butonul avansat, cel de cautare sau casuta de inserare, editati #cautare din CSS.
Cod:
<form method="get" action="/search" id="cautare">

<input name="search_keywords" maxlength="128" value="Cauta..." onclick="if (this.value == 'Cauta...') this.value = '';" onblur="if (this.value == '') this.value = 'Cauta...';" type="text" id="casuta_cautare" /></input>
<input value=" " type="submit" id="buton_cautare"  /></input>
<div class="avansat">Avansat</div>
  <div class="optiuni">
<label for="rposts"><input id="rposts" name="show_results" value="posts" type="radio" /> Mesaje </label>
<label for="rtopics"><input id="rtopics" name="show_results" value="topics" checked="checked" type="radio" /> Subiecte</label>
</div>

</form>

Acest tutorial a fost scris de PlayOn.

Comentariile utilizatorilor
Vizitator
avatar
la data de Dum 4 Noi - 7:45
Vizitator Vizitator
Conectat
Frumos Tutorial Bravo

si pentru phpbb3 se putea adauga libraria
Cod:
$(document).ready(function() {
$(".avansat").click(function() {
$(".optiuni").toggle();
});
$.getScript('http://code.jquery.com/jquery-latest.js');
});
Vizitator
avatar
la data de Dum 4 Noi - 22:21
Vizitato Vizitator
Conectat
Imi place!
Felicitari.
Membru ET
avatar
la data de Dum 4 Noi - 22:51
Soricelul Membru ET
Conectat
Foarte bune si folositor tutorialul! Bravo!
Vizitator
avatar
la data de Lun 5 Noi - 15:44
Vizitato Vizitator
Conectat
Multumesc tuturor , voi reveni in curand cu un tutorial nou !
Membru dedicat
avatar
la data de Lun 5 Noi - 22:14
mr.franta Membru dedicat
Conectat
Imi place mult,felicitari!
Vizitator
avatar
la data de Sam 10 Noi - 13:28
Vizitato Vizitator
Conectat
Mersi mult tuturor !
Membru ET
avatar
la data de Lun 12 Noi - 15:30
Alex Membru ET
Conectat
Bun si folositor.Bravo!
Membru ET
avatar
la data de Dum 9 Dec - 14:50
Loby Membru ET
Conectat
Frumos tutorial.