Navigare rapidă

Ultimele subiecte
» Bulletin ipb theme
Scris de Iustin Vin 17 Feb - 14:49
» Sliding Menu Bar V5
Scris de RAKSONE Mier 15 Feb - 1:13
» Cereri intrare in staff[Deschise]
Scris de Madross Sam 11 Feb - 21:11
» Cum iti creezi propriul joc online
Scris de xTeRm0 Sam 11 Feb - 14:47
» Informatii Primul Post [IPB Animate]
Scris de bablil Sam 11 Feb - 0:22
Cuvinte-cheie

drop  Mesaje  chenar  tema  meniu  ultimele  phpBB2  banner  Statistici  edit  reclama  legenda  animate  radio  avatar  menu  navigare  Metin2  cautare  subforumuri  Bara  profil  html  punbb  subiecte  tutorial  

Aspect nou pentru casuta de cautare


Salut,
In acest tutorial veti putea creea o casuta de cautare mult mai frumoasa decat cealalalta.
Demo:
Normal - https://i.servimg.com/u/f45/17/45/40/76/110.png
La apasarea butonului Avansat - https://i.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
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
la data de Dum 4 Noi - 22:21
Vizitato Vizitator
Conectat
Imi place!
Felicitari.
Membru ET
la data de Dum 4 Noi - 22:51
Soricelul Membru ET
Conectat
Foarte bune si folositor tutorialul! Bravo!
Vizitator
la data de Lun 5 Noi - 15:44
Vizitato Vizitator
Conectat
Multumesc tuturor , voi reveni in curand cu un tutorial nou !
Membru dedicat
la data de Lun 5 Noi - 22:14
mr.franta Membru dedicat
Conectat
Imi place mult,felicitari!
Vizitator
la data de Sam 10 Noi - 13:28
Vizitato Vizitator
Conectat
Mersi mult tuturor !
Membru ET
la data de Lun 12 Noi - 15:30
Alex Membru ET
Conectat
Bun si folositor.Bravo!
Membru ET
la data de Dum 9 Dec - 14:50
Loby Membru ET
Conectat
Frumos tutorial.