Inne Nowe belki dla panelu bocznego

wersja skryptu MyBB: 1.8.3
adres forum: www.cs-sonic.xaa.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu): proszę o pomoc w zrobieniu taki belek do panelu bocznego jak sa na http://reksio-cs.pl/ w panelu bocznym .

Więc tak:

- Obejmujesz całość

<div id="calosc"><span class="kolorTlaTekstu">Tekst</span></div>

I tylko teraz zostaje Ci dodać CSS do klas i ID, myślę, że do tego czasu się czegoś nauczyłeś i potrafisz złożyć kilka linijek kodu CSS po angielsku.

ale te belki obejmą tylko panel boczny ??

Jak użyjesz ich w panelu bocznym, to tylko tam obejmie zasięg.

Zrobiłem 1 belke na próbę, ale nie czyta mi tła w belce czyli tych przerywanych linij (pokazane na ss tak jak powinna wygladac belka).

Zrobiłem takie cos w css

.kolorTlaTekstu {
    width: 260px;
    background: url(images/square/asidebg.png") repeat-x scroll 0% 0% transparent;
    display: block;
    font: 16px calibri;
    color: #FFF;
}

.kolorTlaTekstu {
    background: none repeat scroll 0% 0% / 20px 20px #1B9BE4;
    width: 145px;
    height: 24px;
    line-height: 24px;
    padding-left: 6px;
} 


Jak tak logicznie pomyślał patrząc w kod to zauważyłbyś, że coś jest nie tak bo po

background: url(images/square/asidebg.png

wszystko jest podświetlone na czerwono (czy tam jakiś inny kolor w edytorze).

Poprawiłem kod ale wraz nie ma tego zakreskowanego tła

.kolorTlaTekstu {
    width: 260px;
    background: url(../../../images/square/asidebg.png) repeat-x scroll 0% 0% transparent;
    display: block;
    font: 16px calibri;
    color: #FFF;
}
.kolorTlaTekstu {
    background: none repeat scroll 0% 0% / 20px 20px #1B9BE4;
    width: 145px;
    height: 24px;
    line-height: 24px;
    padding-left: 6px;
} 


No i jak to ma działać jeżeli dla jednej klasy nadałeś dwa razy tło?

#calosc {
    width: 260px;
    background: url(images/square/asidebg.png) repeat-x scroll 0% 0% transparent;
    display: block;
    font: 16px calibri;
    color: #FFF;
}
.kolorTlaTekstu {
    background: none repeat scroll 0% 0% / 20px 20px #1B9BE4;
    width: 145px;
    height: 24px;
    line-height: 24px;
    padding-left: 6px;
}

Nie rozumiem tej składni. Co to w ogóle jest? Nadajesz dla tła kolor i pozycjonujesz? To tak jakby rozlać farbę na podłogę i próbować ją przesunąć.

background: none repeat scroll 0% 0% / 20px 20px

Zamień na

background: #1B9BE4;

BTW: używanie id w takim miejscu to nie jest dobry pomysł, bo na stronie powinien być tylko jeden element z takim samym identyfikatorem.

#calosc {
    width: 260px;
    background: url(../../../images/square/asidebg.png) repeat-x scroll 0% 0% transparent;
    display: block;
    font: 18px calibri;
    color: #FFF;
}
.kolorTlaTekstu {
    background: #1B9BE4;
    width: 145px;
    height: 24px;
    line-height: 24px;
    padding-left: 120px;
} 


to dałem ale tekst powinien byc przy lewej stronie a jest po prawej

Przecież masz w #całość tło graficzne, a w kolorTlaTekstu niebieskie.

juz poprawilem, ale teraz tekst powinien byc przy lewej stronie a jest przy prawej

w .kolorTlaTekstu dodaj

display: block;

i zamień padding-left na 20px;