Webboard

Pełna wersja: Gradientowany thead.
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
wersja skryptu MyBB:1.6.2
adres forum:konsolka.eu
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Witam ponownie! Chciałbym się zapytać, jak zrobić "gradientowaną ramkę" (thead). Chodzi mi o to, żeby ramka nie była w jednym kolorze, ale miejscami pojawiał się jakiś inny (jak na http://podziemieopowiadan.pl albo vBulletinowskim http://precyl.pl).
Musisz sobie stworzyć paseczek o odpowiedniej szerokości i wysokości. Wszystko zależy do tego, jaką grafikę wykonasz.

Spójrz sobie na thead domyślnego stylu. To jest tylko mały paseczek odpowiednio wykonany w programie graficznym. Oczywiście jeszcze został ostylowany CSS'em, w np. taki sposób:

#026CB1 url(images/thead_bg.gif) top left repeat-x

#kolor odnośnik do obrazka umiejscowienie powtarzanie

Najlepiej zajrzyj do poradnika:
Podstawy CSS
Dobra, ale gdybym chciał wstawić obrazek jako tło, ale nie przy thead tylko przy:

.trow_sep {
background: #558f2b;
color: #fff;
border-bottom: 1px solid #c5c5c5;
padding: 6px;
font-size: 12px;
font-weight: bold;
}


to co mam zrobić? Mój obrazek o wymiarach takich jak trow_sep znajduje się tu:
http://konsolka.eu/images/konsolka/thead2_bg.gif
virus4 napisał(a):Tło:
1. Kolor - selektor { background-color: kolor }
Za kolor podstawiamy jakiś kolor w zapisie szesnastokwym lub po angielsku.

2. Tło obrazkowe - selektor { background-image: url(ścieżka dostępu do obrazka) }
Za ścieżka dostępu do obrazka podajemy ścieżkę do obrazka.

3. Powtarzanie - selektor { background-repeat: powtarzanie }
Za powtarzanie podstawiamy:

repeat - powtarzanie tła w obu kierunkach (domyślnie)
repeat-x - powtarzanie tła tylko w kierunku poziomym
repeat-y - powtarzanie tła tylko w kierunku pionowym
no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek)
Sorki, że cię dręczę, ale mógłbyś mi podedytować jak głupiemu?

Tutaj chciałbym, aby tylko po lewej na brzegu pojawił się ten obrazek:

KOD:
.thead {
background: #000000;
color: #ffffff;
padding-left: 10px;
padding-right: 3px;
padding-top: 3px;
padding-bottom: 3px;
}

LINK DO OBRAZKA:
http://konsolka.eu/images/konsolka/thead_bg.gif

A tutaj, żeby jeden obrazek był całym tłem (powtarzał się):

KOD:
.trow_sep {
background: #558f2b;
color: #fff;
border-bottom: 1px solid #c5c5c5;
padding: 6px;
font-size: 12px;
font-weight: bold;
}

LINK DO OBRAZKA:
http://konsolka.eu/images/konsolka/thead2_bg.gif

po prostu żebyś mi wpisał tam to, co ma być okej? Z góry ogromne dzieki :)
Kod PHP:
.thead {
background#000000 url('images/konsolka/thead_bg.gif');
color#ffffff;
padding-left10px;
padding-right3px;
padding-top3px;
padding-bottom3px;
}

.
trow_sep {
background#558f2b url('images/konsolka/thead2_bg.gif') repeat-x;
color#fff;
border-bottom1px solid #c5c5c5;
padding6px;
font-size12px;
font-weightbold;


Powyżej obrazek powtarza się poziomo, jak chcesz pionowo, ustaw repeat-y.

Nie wiem, czy kod da taki efekt, jakiego oczekujesz, bo sam nie wiem jakiego efektu oczekujesz.
.trow_sep {
background: #558f2b url('images/konsolka/thead2_bg.gif') repeat-x;
color: #fff;
border-bottom: 1px solid #c5c5c5;
padding: 6px;
font-size: 12px;
font-weight: bold;
}


To dało taki efekt o jaki mi chodziło.

Ale przy:
.thead {
background: #000000 url('images/konsolka/thead_bg.gif');
color: #ffffff;
padding-left: 10px;
padding-right: 3px;
padding-top: 3px;
padding-bottom: 3px;
}

chciałbym, aby obrazek pojawił się tylko raz po lewej stronie - przy krawędzi thead. Rozumiesz? :)
Kod PHP:
.thead {
background#000000 url('images/konsolka/thead_bg.gif') no-repeat;
color#ffffff;
padding-left10px;
padding-right3px;
padding-top3px;
padding-bottom3px;


Obrazek powinien się pokazać po lewej, tylko jeden raz. Ustawienie po lewej jest domyślnym.