Navigare rapidă

Ultimele subiecte
» Prezentare Cristian
Scris de cristiankiss Mar 20 Iun - 8:12
» Prezentare Petronel YT
Scris de Cătălin. Vin 16 Iun - 1:45
» [punbb] eteral-game v2
Scris de Petronel™ Joi 8 Iun - 18:20
» Tema InvizionVirus
Scris de Petronel™ Joi 8 Iun - 18:19
» [punbb] xretrogradatii theme 2016
Scris de Petronel™ Joi 8 Iun - 18:17
Cuvinte-cheie

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

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.