Jak przenieść pasek stron
na górę bloga?
Witam! Dziś przedstawię
wam bardzo prosty sposób, na przeniesienie paska stron tak, żeby znajdował się
na samej górze naszego bloga. Od razu uprzedzam, że to żadna filozofia.
Wystarczy wkleić w arkusz css jeden kod i gotowe!
Zaczynamy od wklejenia
poniższego kodu w okienko z arkuszem css.
Szablon – dostosuj –
zaawansowane – dodaj arkusz css
.tabs-outer {
overflow: hidden;
position: relative;
background-color: #00ccff;
none repeat scroll 0 0;
width: 100%;
height:35px;
margin-left: auto;
margin-right: auto;
position: fixed; z-index: 1; top: 0px;
}
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
padding: .4em 2.8em;
font: normal 16px Century Gothic, Tahoma, Helvetica, FreeSans, sans-serif;
color: #000000;
height: 22px;
line-height: 22px;
}
.tabs-inner .widget li:last-child a {
border-right: 1px solid transparent;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: transparent none repeat-x scroll 0 -100px;
color: #fbfbfb;
}
Kolorową czcionką
zaznaczyłam wartości które możecie zmieniać, tak by dostosować pasek stron
wedle waszych upodobań. Przyznam, że jest z tym troszkę zabawy, ale dzięki temu
stworzycie coś swojego! : )
Przedstawiam wam więc wyjaśnienie zaznaczonych literek i cyferek.
background-color: #00ccff; - kolor tła paska (strona z kolorami rgb klik)
height:35px; - wysokość paska
margin-left: auto; - lewy margines (aby zmienić wpisujemy ilość px
margin-right: auto; - prawy margine (tutaj tak samo jak wyżej)
position: fixed; z-index: 1; top: 0px; - odstęp między górną częścią bloga)
padding: .4em 2.8em; - odstępy między nazwami stron i ich ułożnie
font: normal 16px Century Gothic, Tahoma, Helvetica, FreeSans, sans-serif; - rozmiar i styl czcionki
color: #000000; - kolor tekstu
line-height: 22px; - wysokość tekstu
color: #fbfbfb; - kolor napisu odwiedzonej strony
Mam nadzieję, że pomogłam
wam sprostać temu zadaniu. W komentarzach dajcie koniecznie znać, czy udało wam
się uzyskać efekt końcowy! Jak pasek prezentuje się u mnie?