PDA

Zobacz pełną wersję : Dopasowanie loga


mbazyl
10-01-2011, 14:57
Cześć,

Mam problem z dopasowanie logo w stylu ja_purity. Dostosowoju go do swoich potrzeb i chciałbym, żeby logo było rozciągnięte na boki na max (dostosowywanie się do rozdzielczości strony), konkretny background + dopiero wtedy nałożenie na to loga w transparent'cie.


/* HEADER
--------------------------------------------------------- */
#ja-headerwrap {
background: #ffffff;
color: #CCCCCC;
line-height: normal;
height: 165px;
}

#ja-header {
position: relative;
}

.ja-headermask {
width: 660px;
display: block;
background: url(../images/header-mask.png) no-repeat top right;
height: 165px;
position: absolute;
top: 0;
right: -1px;
}

#ja-header a {
color: #CCCCCC;
}

h1.logo, h1.logo-text {
margin: 0 0 0 5px;
padding: 0;
font-size: 180%;
text-transform: uppercase;
}

h1.logo a {
width: 208px;
display: block;
background: url(../images/logo.png) no-repeat;
height: 80px;
position: relative;
z-index: 100;
}

h1.logo a span {
position: absolute;
top: -1000px;
}

h1.logo-text a {
color: #CCCCCC !important;
text-decoration: none;
outline: none;
position: absolute;
bottom: 40px;
left: 5px;
}

p.site-slogan {
margin: 0;
padding: 0;
padding: 2px 5px;
color: #FFFFFF;
background: #444444;
font-size: 92%;
position: absolute;
bottom: 20px;
left: 0;
}
tlewap
10-01-2011, 15:11
Daj link do strony, bedzie łatwiej zrozumieć
mbazyl
10-01-2011, 15:12
Mam ją na localu.
I jeszcze jedno, szara pionowa kreska dzieląca menu od strony. Gdzie ją w kodzie mogę znaleźć?
tomaszek83
10-01-2011, 15:54
wróżek tu nie ma. bez linka do strony będzie ciężko cokolwiek wywróżyć...
mbazyl
11-01-2011, 17:53
Proszę: http://testmalta.cba.pl/ - ta pionowa linia obok menu. Ni cholery nie wiem jak i gdzie to znaleźć :)
No i to logo. Chciałbym, aby to czarne pole było zastąpione obrazkiem (który dopasuje się do szerokości strony automatycznie) i dopiero wtedy żeby można było nałożyć jakieś logo (transparent).
Dodatkowo chciałbym usunąć powiększanie czcionki w logo (A+, A, A-).
zbig1972
11-01-2011, 18:06
W sprawie szarego paska obok logo z lewej strony. Znajdź template/ja_purity/css/template.css:

h1.logo a {

width: 220px;

display: block;

background: url(../images/logo.png) no-repeat;

height: 150px;

position: relative;

z-index: 110;

}

Zamień na:

h1.logo a {

width: 220px;

display: block;

background: url(../images/logo.png) no-repeat;

height: 150px;

position: absolute;

top: 0px;

left: -20px;

z-index: 110;

A teraz prawy pasek. Juz nie pisze jaki zapis w template.css jest u ciebie, ale bez szarego paska powienien być taki:

.ja-headermask {

width: 1200px;

display: block;

background: url(../images/header-mask.png) no-repeat top right;

height: 150px;

position: absolute;

top: 0;

right: -20px;
U Ciebie moze być inna wysokość i szerokość grafiki. Ja ci podałem przykładowe wartości dla loga i dla grafiki headermask rozciągnietej na cały ekran. Pamietaj, że wartości szerokości i wysokości grafik podane tutaj muszą być jednakowe z twoimi grafikami, bo całość rozjedzie się. Resztę wg. wskazanej zasady przemodeluj.

Możesz też przemalować tło headera na zupełnie inny kolor, żeby pozbyć się tego ciemnego szarego koloru. Możesz to zrobić tu zmieniając wartość background:

#ja-headerwrap {

background: #333333;

color: #CCCCCC;

line-height: normal;

height: 150px;

}
Po liftingu u mnie wygląda to tak: http://osiedlebelweder.eu/
mbazyl
11-01-2011, 18:37
Ok, dzięki.
Jeszcze ten pionowy pasek obok menu? Nigdzie nie mogę tego znaleźć + usunięcie liter powiększenia czcionki.
zbig1972
11-01-2011, 18:39
Chodzi Ci o tę pionową kreskę grubości 1px między menu a głównym obszarem?
mbazyl
11-01-2011, 18:44
Tak, dokładnie o to :) Nie wiem dlaczego nie mogę tego znaleźć, tak jakby pobierało go z kosmosu :hmm:
zbig1972
11-01-2011, 18:52
A to bardzo ciekawe. Sam bym chciał wiedzieć gdzie to się zmienia.
mbazyl
11-01-2011, 19:02
Niet, to niestety nie to.
a_m
11-01-2011, 20:39
kreska:
#ja-container2 {
background: url("images/c-bg1.gif") repeat-y scroll 18% 0 transparent;
padding: 0;
}
mbazyl
11-01-2011, 20:55
Nie :) Nie o to mi chodzi :) Mam na myśli szara kreskę dzielącą menu od treści. No i zlikwidowanie tych liter powiększających czcionkę w wrapperze.
a_m
11-01-2011, 21:23
ta kreska, to "c-bg1.gif", litery - > inny temat / zamykamy