Dopasowanie loga do stylu.

Dyskusje na temat modyfikowania i tworzenia stylów do phpBB 3.0.x oraz spraw związanych z szablonami, motywami i zestawami obrazków.
czarny
Posty: 9
Rejestracja: 08 maja 2009, 16:14

Dopasowanie loga do stylu.

Post autor: czarny » 08 maja 2009, 16:23

Witam.

Mam problem z dopasowaniem za dużego loga do forum. Dokładniej chodzi o styl reBlue ( tutaj jest zainstalowany http://starzaki.eu.org/~czarny/gonzek/ ) Logo które chce umieścić wygląda tak: http://starzaki.eu.org/~czarny/gonzek/s ... t/logo.jpg ... Próbowałem już masę sposobów, zmieniałem wielkości w css, lecz na marne, zawszę coś wyskakiwało. Nie mam już sił, jeśli ktoś byłby tak łaskawy i mi pomógł to zrobić byłbym wdzięczny!

pit
Posty: 1580
Rejestracja: 25 lutego 2009, 18:15

Re: Dopasowanie loga do stylu.

Post autor: pit » 08 maja 2009, 16:37


czarny
Posty: 9
Rejestracja: 08 maja 2009, 16:14

Re: Dopasowanie loga do stylu.

Post autor: czarny » 08 maja 2009, 17:20

Zrobiłem tak jak jest tam napisane, lecz to jednak dalej nie to, zobacz sam http://starzaki.eu.org/~czarny/gonzek/

pit
Posty: 1580
Rejestracja: 25 lutego 2009, 18:15

Re: Dopasowanie loga do stylu.

Post autor: pit » 08 maja 2009, 21:25

Bo ten styl jest lekko po...bany.
Jak możesz to odkręć to wszystko albo wgraj nowe pliki (te co modyfikowałeś} sorry.
Zmień nazwę "reBlue/theme/images/topbg.gif" na "topbg2.gif".
Swoje logo zapisz pod nazwą "topbg.gif" i wklej do "reBlue/theme/images" (coś 938px szerokości żeby miał).
Z "overall_header.html" wytnij (tylko dokładnie)

Kod: Zaznacz cały

<div class="navbar">
					<div class="inner"><span class="corners-top"><span></span></span>
					<ul class="linklist navlinks">
						<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>
						<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}" style="margin-right: 17px;">{L_CHANGE_FONT_SIZE}</a></li>
						<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
						<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
						<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
						<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
					</ul>
					<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
					<ul class="linklist leftside">
						<li class="icon-ucp">
							<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u">{L_PROFILE}</a>
							<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF --> <span class="bull">&bull;</span> 
							<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
							<!-- IF U_RESTORE_PERMISSIONS --> <span class="bull">&bull;</span>
							<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
							<!-- ENDIF -->
						</li>
					</ul>
					<!-- ENDIF -->
					<ul class="linklist rightside">
						<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a> <span class="bull">&bull;</span>
						<a href="{U_SEARCH}" title="{L_SEARCH}">{L_SEARCH}</a> <span class="bull">&bull;</span>
						<!-- IF not S_IS_BOT -->
						<!-- IF S_DISPLAY_MEMBERLIST --><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a>  <span		class="bull">&bull;</span><!-- ENDIF -->
						<!-- IF not S_USER_LOGGED_IN --><a href="{U_REGISTER}">{L_REGISTER}</a> <span class="bull">&bull;</span><!-- ENDIF -->
						<a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></li>
						<!-- ENDIF -->
					</ul>
					<span class="corners-bottom"><span><!-- --></span></span>
				</div>
			</div>
i wklej po "</div>"

Kod: Zaznacz cały

<p class="{S_CONTENT_FLOW_END}<!-- IF S_USER_LOGGED_IN --> rightside<!-- ENDIF -->"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ELSE -->{CURRENT_TIME}<!-- ENDIF --></p>
		<!-- IF U_MCP --><p>{CURRENT_TIME} &bull; [&nbsp;<a href="{U_MCP}">{L_MCP}</a>&nbsp;]</p><!-- ELSEIF S_USER_LOGGED_IN --><p>{CURRENT_TIME}</p><!-- ENDIF -->
	</div>
W "common.css" poszukaj ".headerbar" i zmień "height:" stosownie do wysokości Twojego obrazka.
Odśwież style i motywy.
Jesli masz logo w innym formacie zmień rozszerzenie w "colours.css"

Kod: Zaznacz cały

.headerbar {
	background-image: url("{T_THEME_PATH}/images/topbg.gif");
}

czarny
Posty: 9
Rejestracja: 08 maja 2009, 16:14

Re: Dopasowanie loga do stylu.

Post autor: czarny » 08 maja 2009, 21:50

Dzięki @pit, zrobiłem tak jak napisałeś wyżej, lecz dalej jednak z belek została na swym miejscu i teraz jest "pod logiem". Wiesz może w czym problem ?

W zamierzeniu logo miało się wkomponować w taki sposób: http://img211.imageshack.us/img211/6480 ... aaaaad.jpg
Ostatnio zmieniony 08 maja 2009, 21:54 przez czarny, łącznie zmieniany 1 raz.

pit
Posty: 1580
Rejestracja: 25 lutego 2009, 18:15

Re: Dopasowanie loga do stylu.

Post autor: pit » 08 maja 2009, 21:54

Logo jest ok. 10px za wąskie.
O co chodzi z tą belką?

czarny
Posty: 9
Rejestracja: 08 maja 2009, 16:14

Re: Dopasowanie loga do stylu.

Post autor: czarny » 08 maja 2009, 21:58

Chodzi o to, że pod logiem, w gorej części widnieje, jeszcze jedna belka:

Kod: Zaznacz cały

Obecny czas: Pią Maj 08, 2009 8:58 pm • [ Panel moderatora ]
Jest ona "zamaskowana" przez aktualne logo.
W rzeczywistości miało to wyglądać tak: http://img211.imageshack.us/img211/6480 ... aaaaad.jpg

pit
Posty: 1580
Rejestracja: 25 lutego 2009, 18:15

Re: Dopasowanie loga do stylu.

Post autor: pit » 08 maja 2009, 22:21

Namieszałeś trochę, nie widzę zebyś w "overall_header.html" miał <div class="navbar">
Zostało tylko jakieś osierocone

Kod: Zaznacz cały

<p class="right">Obecny czas: Pią Maj 08, 2009 9:14 pm</p>

czarny
Posty: 9
Rejestracja: 08 maja 2009, 16:14

Re: Dopasowanie loga do stylu.

Post autor: czarny » 08 maja 2009, 22:33

pit pisze:Namieszałeś trochę, nie widzę zebyś w "overall_header.html" miał <div class="navbar">
Zostało tylko jakieś osierocone

Kod: Zaznacz cały

<p class="right">Obecny czas: Pią Maj 08, 2009 9:14 pm</p>

nie ma <div class="navbar"> bo bo przecież kazłeś mi wyciąć z "overall_header.html"

pit
Posty: 1580
Rejestracja: 25 lutego 2009, 18:15

Re: Dopasowanie loga do stylu.

Post autor: pit » 08 maja 2009, 22:37

Nic Ci nie kazałem, najwyżej zasugerowałem.
Napisałem również "Jak możesz to odkręć to wszystko albo wgraj nowe pliki (te co modyfikowałeś} sorry."

pit
Posty: 1580
Rejestracja: 25 lutego 2009, 18:15

Re: Dopasowanie loga do stylu.

Post autor: pit » 08 maja 2009, 22:59

Dobra trochę namieszałem bo nie wiedziałem jaki chcesz uzyskać efekt, dopiero ten aaaaaaaaaaaaaaaaaad.jpg wyjaśnił sprawę.
Wgraj nowy "overall_header.html" i "common.css".
W "common.css" zmień

Kod: Zaznacz cały

.headerbar {	height:  ;}
na około 560px
W "overall_header.html" to

Kod: Zaznacz cały

<div class="navbar">
zmień na

Kod: Zaznacz cały

<div class="navbar" style="margin-top: 420px">
Oczywiście w "colours.css" masz

Kod: Zaznacz cały

.headerbar {background-color: #FEF9D7;
	background-image: url("{T_THEME_PATH}/images/topbg.jpg");

Awatar użytkownika
daroPL
Zasłużony
Posty: 4564
Rejestracja: 24 czerwca 2005, 13:36
Lokalizacja: Poznań
Kontakt:

Re: Dopasowanie loga do stylu.

Post autor: daroPL » 09 maja 2009, 08:26

Zamiast

Kod: Zaznacz cały

.headerbar {   height:  ;}
lepiej

Kod: Zaznacz cały

.headerbar { }
jeżeli nie ma mieć żadnej wartości.

pit
Posty: 1580
Rejestracja: 25 lutego 2009, 18:15

Re: Dopasowanie loga do stylu.

Post autor: pit » 09 maja 2009, 09:16

Widzę, że sukces jest blisko.
Weź jeszcze

Kod: Zaznacz cały

<div class="inner"><span class="corners-top"><span></span></span>
zmień na

Kod: Zaznacz cały

<span></span></span>
stąd

Kod: Zaznacz cały

<a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></li>
						<!-- ENDIF -->
					</ul>
					<span class="corners-bottom"><span><!-- --></span></span>
				</div>
			</div>
	</div>
	</div>
usuń jeden

Kod: Zaznacz cały

</div>
W "colours.css" zmień to

Kod: Zaznacz cały

.headerbar {
	background-color: #FEF9D7;
	background-image: url("{T_THEME_PATH}/images/topbg.jpg");
na

Kod: Zaznacz cały

.headerbar {
	background: #FEF9D7 url("{T_THEME_PATH}/images/topbg.jpg") top center no-repeat;
i przesuń "navbar do góry albo w dół ile będzie trzeba (margin-top) w

Kod: Zaznacz cały

<div class="navbar" style="margin-top: 420px">

czarny
Posty: 9
Rejestracja: 08 maja 2009, 16:14

Re: Dopasowanie loga do stylu.

Post autor: czarny » 10 maja 2009, 17:51

Wielkie dzięki, już jest niemal idealnie. Mam jeszcze drobne problemy.

1. Jak usunąć opcję "zmień rozmiar czcionki" ? (chodzi dokładnie o: http://g.imagehost.org/0278/Untitled-2_2.jpg)
2. Gdzie znajdę parametr, który umożliwi mi usunięcie białego pola nad logiem ( chodzi o: http://g.imagehost.org/0590/Untitled-3.jpg )
3. W jaki sposób, mogę poszerzyć owe pole formularza do logowania? ( http://g.imagehost.org/0633/Untitled-4_6.jpg )

Adres do forum: http://starzaki.eu.org/~czarny/gonzek/
Z góry dziękuje

pit
Posty: 1580
Rejestracja: 25 lutego 2009, 18:15

Re: Dopasowanie loga do stylu.

Post autor: pit » 10 maja 2009, 21:20

  1. Usuń z "overall_header.html"

    Kod: Zaznacz cały

    <li class="rightside"><a href="#" onclick="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}" style="margin-right: 17px;">{L_CHANGE_FONT_SIZE}</a></li>
  2. Nie o parametr tu biega tylko o logo, wgraj to
    Obrazek
  3. Dodaj do "common.css"

    Kod: Zaznacz cały

    #username,#password {width: 130px}
Ps. Jaja sobie robisz czy nie panujesz nad tym co się dzieje na Twoim forum?

Zablokowany

Wróć do „Pomoc”