Pentru a accesa toate paginile forumului
te rugăm să te înregistrezi
[ Cereri şabloane · Ultimile postări · Membrii · Regulamentul forumului · Căutare · RSS · Photoshop ]
  • Pagina 1 din 1
  • 1
Scripturi și teme pentru ucoz » Scripturi şi şabloane » Aspecte » Aspectul Căutării | Căutare
Aspectul Căutării | Căutare
StapanulData: Vineri, 2012-06-15, 2:59 PM | Mesaj # 1
Neconectat
 Pasul 1: Panoul de Control - Design - Administrarea design-ului (şabloane) - Secţiuni globale [Primul recipient] - găsiţi tag-ul $SEARCH_FORM$ şi schimbaţi-l cu:

Code
<form class="cautare_os" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" > <input class="cautare_camp"type="text" name="q" maxlength="30" value="Căutare..." onclick="if (this.value=='Căutare...'){this.value='';}"/><input class="cautare_buton" type="submit" value="Caută" /><input type="hidden" name="t" value="0" /> </form>


Pasul 2: Panoul de Control - Design - Administrarea design-ului (CSS) - şi adăugaţi acest cod pentru Căutare de culoare albă:

Code
/* Aspectul căutării */               
.cautare_os {             
             float:right;             
}             

.cautare_os input {             
             vertical-align:middle;             
}             

.cautare_camp {             
             font:11px Verdana,Arial,Helvetica,sans-serif;             
             color:#555; text-shadow: 1px 1px 1px #fff;             
             height:26px;             
             margin:0;             
             padding:4px;             
             background:#f6f6f6;             
             border: 1px solid #d6d6d6;             
             border-right: none;             
}             
                         
.cautare_camp:focus {             
             background:#fff;             
}             
                         
.cautare_buton {             
             font:11px Verdana,Arial,Helvetica,sans-serif;             
             color:#555; text-shadow: 1px 1px 1px #fff;             
             height:26px;             
             margin:0;             
             padding:0 7px;             
             background:#e9e9e9;             
             border:1px solid #d6d6d6;             
}             
                         
.cautare_buton:hover{             
             background:#d6d6d6;             
             }


Adăugaţi acest cod pentru Căutare de culoare albastru deschis:

Code
/* Aspectul căutării */          
.cautare_os {          
          float:center;          
}          

.cautare_os input {          
          vertical-align:middle;          
}          

.cautare_camp {          
          font:11px Verdana,Arial,Helvetica,sans-serif;          
          color:#4684a8; text-shadow: 1px 1px 1px #fff;          
          height:26px;          
          margin:0;          
          padding:4px;          
          background:#eff3f7;          
          border: 1px solid #84ABC2;          
          border-right: none;          
}          
                   
.cautare_camp:focus {          
          background:#fff;          
}          
                   
.cautare_buton {          
          font:9px Verdana,Arial,Helvetica,sans-serif;          
          color:#4684a8; text-shadow: 1px 1px 1px #fff;          
          height:26px;          
          margin:0;          
          padding:5px;          
          background:#AFD5EB;          
          border:1px solid #84ABC2;          
}          
                   
.cautare_buton:hover {          
          background:#88b9d6;          
          }


Adăugaţi acest cod pentru Căutare de culoare neagră:

Code
/* Aspectul căutării */        
.cautare_os {         
         float:right;         
}         

.cautare_os input {         
         vertical-align:middle;         
}         

.cautare_camp {         
         font:11px Verdana,Arial,Helvetica,sans-serif;         
         color:#a7a7a7; text-shadow: 1px 1px 1px #252525;         
         height:26px;         
         margin:0;         
         padding:4px;         
         background:#484848;         
         border: 1px solid #252525;         
         border-right: none;         
}         
                 
.cautare_camp:focus {         
         background:#545454;         
}         
                 
.cautare_buton {         
         font:11px Verdana,Arial,Helvetica,sans-serif;         
         color:#a7a7a7; text-shadow: 1px 1px 1px #252525;         
         height:26px;         
         margin:0;         
         padding:0 7px;         
         background:#545454;         
         border:1px solid #252525;         
}         
                 
.cautare_buton:hover {         
         background:#252525;         
         }


Adăugaţi acest cod pentru Căutare de culoare oranj:

Code
/* Aspectul căutării */
.cautare_os {        
        float:right;        
}        

.cautare_os input {        
        vertical-align:middle;        
}        
               
.cautare_camp {        
        font:11px Verdana,Arial,Helvetica,sans-serif;        
        color:#555; text-shadow: 1px 1px 1px #fff;        
        height:26px;        
        margin:0;        
        padding:4px;        
        background:#fff0e1;        
        border: 1px solid #ffa24a;        
        border-right: none;        
}        
               
.cautare_camp:focus {        
        background:#fff;        
}        
               
.cautare_buton {        
        font:11px Verdana,Arial,Helvetica,sans-serif;        
        color:#fff; text-shadow: 1px 1px 1px #ff891a;        
        height:26px;        
        margin:0;        
        padding:0 7px;        
        background:#ffc793;        
        border:1px solid #ffa24a;        
}        
               
.cautare_buton:hover{        
        background:#ffaa59;        
        }


Rezultatul:




 
StapanulData: Duminică, 2012-06-24, 11:15 AM | Mesaj # 2
Neconectat
 În block-ul unde se află codul căsuţei Căutare (în Primul, sau Al doilea recipient), înlocuiţi tagul $SEARCH_FORM$ cu codul de mai jos.

Code
<style>    
#wrap-search {    
margin: 0 auto;    
width: 100px;    
-moz-transition: all .2s ease-out;    
-webkit-transition: all .2s ease-out;    
-o-transition: all .2s ease-out;    
transition: all .2s ease-out;    
text-indent: 0px;}    

#wrap-search br { display: none; }    

#wrap-search #search {    
background: -moz-linear-gradient(center bottom , #9B9B9B 0%, #A9A9A9 50%, #CACACA 50%, #D3D3D3 2550%);    
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #9B9B9B),color-stop(0.5, #A9A9A9),color-stop(0.5, #CACACA),color-stop(25.5, #D3D3D3));    
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9B9B9B', EndColorStr='#CACACA');    
border-radius: 5px;    
padding: 4px;    
}    

#wrap-search:hover { width:200px; }    

.form-search {    
background: -webkit-gradient(linear, 0 bottom, 0 top, from(#EBEBEB), to(#BCBCBC));    
background: -moz-linear-gradient(-90deg, #BCBCBC, #EBEBEB);    
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EBEBEB', EndColorStr='#BCBCBC');    
border: 1px solid #747474;    
border-radius: 3px;    
box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF;    
height: 32px;    
position: relative;    
-moz-transition: all .2s ease-out;    
-webkit-transition: all .2s ease-out;    
-o-transition: all .2s ease-out;    
transition: all .2s ease-out;    
}    

.form-search input[type='text'] {    
background: none;    
border: none;    
color:#6E7074;    
height: 34px;    
line-height: 34px;    
padding: 0 27px 0 6px;    
font-family: Helvetica, Arial, sans-serif;    
font-size: 13px;    
text-shadow: 0 1px 0 #FFF;    
}    

#wrap-search:hover input[type='text'] { color:#597C84; }    

#wrap-search:hover .form-search {    
background: -moz-linear-gradient(-90deg, #9CC2CA, #DFECEF);    
background: -webkit-gradient(linear, 0 bottom, 0 top, from(#DFECEF), to(#9CC2CA));    
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#DFECEF', EndColorStr='#9CC2CA');    
box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;    
color: #25464D;    
}    

.form-search input[type='image'] {    
height: 32px;    
opacity: .5;    
filter:alpha(opacity=50);    
position: absolute;    
right: 0px;    
top: 0px;    
width: 32px;    
}    

.form-search input[type='image']:hover {    
opacity: 1;    
filter:alpha(opacity=100);    
}    

</style>    

<div id="wrap-search">    
<div id="search">    
<form class="form-search" method="get" action="/search" target="_blank">    
<input src="http://fierbinte.ucoz.ro/Forum/Aspect/Cautare/lupa.png" type="image">    
<input name="q" value="Căutăm?" onfocus="this.value='';" onblur="this.value='Căutăm?';" onmouseover="this.value='';" onmouseout="this.value='Caută';" type="text">    
</form>    
</div>    
</div>


Rezultatul:
 
OmulPaianjenData: Marţi, 2012-07-24, 9:43 AM | Mesaj # 3
Neconectat
 Instalare: Panoul de Control - Design - Administrarea design-ului (CSS) - adăugați stilurile:

Code
#searchbox
{
    background: #eaf8fc;
    background-image: -moz-linear-gradient(#fff, #d4e8ec);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
       
    -moz-border-radius: 35px;
    border-radius: 35px;
       
    border-width: 1px;
    border-style: solid;
    border-color: #c4d9df #a4c3ca #83afb7;               
    width: 500px;
    height: 35px;
    padding: 10px;
    margin: 100px auto 50px;
    overflow: hidden; /* Clear floats */
}
#search, #submit
{
    float: left;
}

#search
{
    padding: 5px 9px;
    height: 23px;
    width: 380px;
    border: 1px solid #a4c3ca;
    font: normal 13px 'trebuchet MS', arial, helvetica;
    background: #f1f1f1;
       
    -moz-border-radius: 50px 3px 3px 50px;
     border-radius: 50px 3px 3px 50px;
     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
     -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);               
}

/* ----------------------- */

#submit
{     
    background: #6cbb6b;
    background-image: -moz-linear-gradient(#95d788, #6cbb6b);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
       
    -moz-border-radius: 3px 50px 50px 3px;
    border-radius: 3px 50px 50px 3px;
       
    border-width: 1px;
    border-style: solid;
    border-color: #7eba7c #578e57 #447d43;
       
     -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
     -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
     box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;        

    height: 35px;
    margin: 0 0 0 10px;
           padding: 0;
    width: 90px;
    cursor: pointer;
    font: bold 14px Arial, Helvetica;
    color: #23441e;
       
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

#submit:hover
{     
    background: #95d788;
    background-image: -moz-linear-gradient(#6cbb6b, #95d788);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
}    

#submit:active
{     
    background: #95d788;
    outline: none;
         
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;     
}

#submit::-moz-focus-inner
{
          border: 0;  /* Small centering fix for Firefox */
}


- Unde aveți nevoie de căsuţa Căutare, puneţi codul:

Code
<form id="searchbox" action="">
   <input id="search" type="text" placeholder="Caută și vei găsi...">
   <input id="submit" type="submit" value="Căutare">
</form>
 
Scripturi și teme pentru ucoz » Scripturi şi şabloane » Aspecte » Aspectul Căutării | Căutare
  • Pagina 1 din 1
  • 1
Căutare:
Copyright © 2019. Toate drepturile rezervate
Politicieni | Acţiunea 2012 | Powered by uCoz