Webboard

Pełna wersja: Ładny pasek nawigacjii
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
wersja skryptu MyBB:1.6.10
adres forum:http://www.dragonsprophet.xaa.pl/index.php#
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu): Witam poszukuję takiego paska nawigajci jak na zdjęciu niżej.

[Obrazek: 14244329087998015130.png]
chodzi mi tylko o te kreski po między tekstem.
Niedawno był taki temat. https://webboard.pl/thread-41515.html Trzeba tylko umieć kooperować w stylach i szablonach ;)
to już nie dla mnie ale postaram się coś zrobić.Dzięki.
Jeśli masz jakąś poradę co do tego paska to możesz napisać :)

bo chodzi mi tylko o te paski i o nic więcej :)
Napiszę Ci jak to zrobić (jak ja zrobiłem) :D

1. Wchodzisz w ACP -> Style i Szablony -> Twój_Styl -> global.css

2. Wrzuć na koniec niego ten kod:
Kod:
#breadcrumb {
    font: 11px Arial, Helvetica, sans-serif;
    background: #1d1d1d url(images/bc_bg.png) repeat-x;
    height:30px;
    line-height:30px;
    color:#000000;
    border: 2px solid #2b2b2b;
    width: 97%;
        max-width: 1100px;
    min-width: 960px;
    overflow:hidden;
    padding:0px;
    margin: auto auto;
}

#breadcrumb li {
    list-style-type:none;
    float:left;
    padding-left:10px;
}

#breadcrumb a {
    height:30px;
    display:block;
    background-image: url(images/bc_separator.png);
    background-repeat: no-repeat;
    background-position:right;
    padding-right: 15px;
    text-decoration: none;
    color:#454545;
}

.home {
    border: none;
    margin: 8px 0px;
    opacity: 0.7;
transition: all .3s linear;
-o-transition: all .3s linear;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}

.home:hover {
    border: none;
    margin: 8px 0px;
    opacity: 1;
transition: all .3s linear;
-o-transition: all .3s linear;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}

#breadcrumb a:hover {
    color:#35acc5;
}

3. Wchodzisz w ACP -> Style i Szablony -> Szablony -> Twój_Szablon -> Nawigacja.

4. Otwierasz nav i podmieniasz go na ten:
Kod:
<ul id="breadcrumb"><li><a href="{$mybb->settings['bburl']}/index.php" title="Strona główna"><span class="home"><img src="{$mybb->settings['bburl']}/images/gibon/home.png" alt="Strona główna" /></span></a></li>{$nav}{$activebit}</ul>

5. Otwierasz nav_bit i podmieniasz na ten:
Kod:
<li><a href="{$navbit['url']}">{$navbit['name']}</a></li>

6. Otwierasz nav_bit_active i podmieniasz go na ten:
Kod:
<li>{$navbit['name']}</li>

7. Do images wgrywasz pliki z załącznika.
coś nie tak.
Sorry zamień szablon nav na ten:
Kod:
<ul id="breadcrumb"><li><a href="{$mybb->settings['bburl']}/index.php" title="Strona główna"><span class="home"><img src="{$mybb->settings['bburl']}/images/home.png" alt="Strona główna" /></span></a></li>{$nav}{$activebit}</ul>

Ps. O co Ci chodzi?
obrazka domku nie widzi i ramka c zarna jest. ( za gruba )

Chodzi mi o to że stary pasek był dobry chciałem tylko te rozłączniki tekstu na te strzałeczki zmienić ale z tym już pokombinuję.

już sam pozmieniałem dzięki za pomoc.
Żeby nie mieć obramowania (atrybut border) usuwasz linijkę w klasie (a raczej identyfikatorze) o treści:
Kod:
border: 2px solid #2b2b2b;
Co w efekcie daje nam taki kod:
Kod:
#breadcrumb {
    font: 11px Arial, Helvetica, sans-serif;
    background: #1d1d1d url(images/bc_bg.png) repeat-x;
    height:30px;
    line-height:30px;
    color:#000000;
    width: 97%;
        max-width: 1100px;
    min-width: 960px;
    overflow:hidden;
    padding:0px;
    margin: auto auto;
}
I obramowania już nie ma ;)

Ps. Poczytaj troszkę o CSS i HTML, Ja na etapie Twoim (jak zaczynałem) już ogarniałem co nie co to Ty też możesz :D
ok dzisiaj poczytam jak przyjdę ze szkoły ale mam jeszcze 1 pytanie da się zmniejszyć ten domek?
W szablonie nav masz taki kod:
Kod:
<img src="{$mybb->settings['bburl']}/images/home.png" alt="Strona główna" />
Możesz ustawić mu wartości width i height (w zupełności wystarczy height) czyli byłoby coś tego typu:
Kod:
<img src="{$mybb->settings['bburl']}/images/home.png" alt="Strona główna" height="10px"/>

Oczywiście możesz go zmniejszyć w programie graficznym albo zupełnie go zamienić na inny ;)