Změna velikosti písma

Drobečková navigace

CSS blog > Možné stylování fulltextu

Možné stylování fulltextu



Ukázka

CSS

#ipoFulltextForm {
    padding: 0;
    margin: 0;
    background-color: #000000;
    background-color: rgba(0,0,0,0.5);
    filter: alpha(opacity=85);
    width: 220px;
    position: absolute;
    right: 15px;
    top: -48px;
    z-index: 8;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}
#ipoFulltextForm .newsheader{
    display: none;
}
#ipoFulltextForm .newsbody {
    padding: 0;
    border: none;
    margin: 0;
}
#ipoFulltextForm input[type="text"]{
    padding: 0;
    color: white;
    width: 185px;
    padding: 5px;
    background: transparent;
    float: left;
    border: none;
}
#ipoFulltextForm input[type="submit"]{
    display: block;
    filter: none;
    margin: 0;
    padding: 0;
    background: url('image.php?nid=11683&oid=3350018') no-repeat scroll 50% 50% transparent;
    width: 25px;
    height: 25px;
    float: right;
    /* odsunutí textu "hledat" mimo */
    text-indent: -2000em;
    border: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}
#ipoFulltextForm input[type="submit"]:hover {
    filter: none;
    /*  vyrušení pozadí kvůi gradientům v defaultním nastavení */
    background: url('image.php?nid=11683&oid=3350018') no-repeat scroll 50% 50% transparent;
}

jQuery - HTML v layoutu (zdroje)

 # vyhledávání placeholder
<script type="text/javascript">
    $(document).ready(function() {
        $("#ipoFulltextForm input[type=text]").attr("placeholder", "Vyhledávání");
    });
</script>

Použití

Ukázka je použitelná v praxi pro specifické stránky. Dá se ale aplikovat i pro universální použití za pomoci pár modifikací (volitelné):

  • změnit ikonku za vlastní pro vyhledávání a změnit velikost
  • zvětšit celý fulltext na šířku a upravit stylování pro button tak, aby se zobrazovalo standardní tlačítko "vyhledat".
  • upravit si barvu pozadí fulltextu
  • upravit si v jQuery placeholder za jiný text, třeba "Hledat"
  • změnit si barvu písma

Poznámky

Lze použít i na modul vyhledávání v katalogu, je potřeba zaměnit ID a případně třídy.


Kalendář akcí

Po Út St Čt So Ne
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2