[CSS]Styl ProSilver z phpBB

ukaszf9 - 2011-09-21 16:10:15

No więc myślę już, że większość zauważyła styl jaki tutaj jest. Jako, że ten styl jest na licencji GLU to nie mogę sobie nawet gdybym chciał zastrzec grafik ;) co jedynie poszczególne kodowanie elementów, które jak pewnie zauważycie po długości kodów wcale nie było proste. Jest też kilka warunków do omówienia zważając, że jest to konwersja z phpBB.
- Zabrania się usuwania informacji ze stopki ( tyczy się to informacji o grupie phpBB i na jakiej jest licencji )
- -||- z PunPortalu na górze informującą o grupie phpBB.
- Należy zaglądać tutaj czy nie ma jakiś aktualizacji stylu ( poprawek bądź ewentualnych zastrzeżeń przez grupę phpBB ), w innym wypadku łamiecie zasady korzystania ze stylu
Wszystkie w.w punkty muszą być przestrzegane ale myślę iż problemu nie ma w związku z tym ;)

Więc zaczynajmy.
- Wklejamy poniższe kody do ogłoszenia

Kod:

<style type="text/css">
tr td.tc2:hover {background-color:#f6f4d0; }
td.tcl:hover {background-color:#f6f4d0; }
td.tc3:hover {background-color:#f6f4d0; }
td.tcr:hover {background-color:#f6f4d0; }
td.tc2 {background-color: #d3e1ec; }
td.tc3 {background-color: #d3e1ec }
thead {display:none; }
h2 {border-top-left-radius:6px; border-top-right-radius:6px; background-image: url(http://img171.imageshack.us/img171/9674/bglist.gif); }
div#brdmenu.inbox { background-image: url(http://img171.imageshack.us/img171/9674/bglist.gif); }
</style>
<div id="PunBB">
<div id="Naglowek"><img src="http://img51.imageshack.us/img51/2875/noof.gif" align="left" <b><font color="white" size="3"><p id="Napisy_loga">Noof</b></font>
<br />Modyfikacje PunBB przez ukaszf9</p></div>
    <div id="wyszukiwarka"><div id="szukaj"><form action="http://www.google.pl/search" method="get">
<input type="text" name="q" />
<input type="hidden" name="ie" value="iso-8859-2" />
<input type="hidden" name="sitesearch" value="www.noof.pun.pl" />
<input type="submit" value="Szukaj" />
</form>
<a href="http://noof.pun.pl/search.php">Zaawansowana wyszukiwrka</a></div></div>
</div>
<br />
<div id="ogloszenie">
   <div id="index1"><img src="http://img854.imageshack.us/img854/6797/iconhomed.gif" /> <a href="index.php" /><b><font color="#105289">Strona Główna</b></font></a>, <a href="forums.php" /><b><font color="#105289">Forum</b></font></a><div id="rejestracja"><a href="register.php" />Zarejestruj się</a></div></div><hr color="white" width="950" size="1" />
      <div id="index2"><img src="http://img3.imageshack.us/img3/5800/iconfaq.gif" /> <a href="http://noof.pun.pl/help.php"/>FAQ</a> <img src="http://img36.imageshack.us/img36/6660/iconmembers.gif" /> <a href="http://noof.pun.pl/userlist.php"/>Lista użytkowników</a> <img src="http://img847.imageshack.us/img847/9472/iconlogout.gif" /><a href="http://noof.pun.pl/login.php"/>Logowanie</a>
    </div>
</div>
<div id="data">

<script type="text/javascript">
    czas = new Date(); //utworzenie nowego obiektu Date
    document.write(czas); //wypisanie na ekran naszego obiektu

</script>
</div>

- Wklejamy kody do modyfikacji css

Kod:

div#PunBB { background-image: url(http://img59.imageshack.us/img59/818/bgheaderi.gif); height: 82px; width: 100%; 
border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
border-radius:6px 5px; }

div#Naglowek {width: 500px; MARGIN-LEFT: 18px; MARGIN-TOP: 10px; float: left; }

div#wyszukiwarka { float: right; margin-right: 25px; width:205px; height: 50px; margin-top: 25px; }

div#ogloszenie { width: 100%; height: 63px; background-color: #cadceb;
border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
border-radius:6px 5px; }
div#index2 { float: right; margin-right: 20px; }
div#index1 { margin-left: 11px; }
div#data { float: right; }
h2 { height: 20px; }
h2 span { text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-size: 1em; }
div#stopka { background-color: white; }
div#brdfooter.block div.box { BORDER-COLOR: white; }
tbody {background-color: #d3e1ec; }
div#rejestracja { float: right; margin-right: 20px; }
div#autor { width: 100%; height: 68px; background-color: #d3e1ec; border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
border-radius:6px 5px;}
div#brdfooter.block div.box { background-color: white }

DIV.icon {
   FLOAT: left;
   MARGIN-TOP: 0.1em;
   MARGIN-LEFT: 0.1em;
   DISPLAY: block;
   width: 27px;
   height: 27px;
}

DIV.icon { background: url(http://img200.imageshack.us/img200/175/brakpostw.gif);}
DIV.inew { background:url(http://img16.imageshack.us/img16/996/nowypost.gif);}
TR.isticky DIV.icon {background:url(http://img707.imageshack.us/img707/500/przyklejone.gif);}
TR.iclosed DIV.icon {background:url(http://img28.imageshack.us/img28/4095/zamknite.gif);}
div.icon { border-color: #D3E1EC }
div.icon { BORDER-COLOR: #D3E1EC}
div.icon:hover {BORDER-COLOR:#f6f4d0; }
div.icon:hover {border-color:#f6f4d0; }
div.icon border {display: none; }
form#login label {
    display: block;
    float: left;
    width: 180px;
}
input#login { margin-top: 15px; }
DIV.icon {border: none; MARGIN-right: 0.4em; MARGIN-left: 0.4em; margin-top: 0.4em; MARGIN-bottom: 0.4em; }



div#informacjastyl {background-color: #CADCEB;
border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
border-radius:6px 5px; }

div.postleft { float: right; }
div.postfootleft { float: right;  }
div.postfootright { float: left; }
div.postright, div.postfootright { BORDER-LEFT-WIDTH: 0em; }
div.postmsg {
WIDTH: 79.8%;
}
div.blockform div.box form {background-image: url(http://img18.imageshack.us/img18/9738/szybkaodp.png);background-repeat: no-repeat;}
form#profile1 { background: none; }
form#profile2 { background: none; }
form#profile3 { background: none; }
form#profile4 { background: none; }
form#profile5 { background: none; }
form#profile6 { background: none; }
form#profile7 { background: none; }
form#profile8 { background: none; }
form#profile9 { background: none; }
form#profile10 { background: none; }
div#adminconsole.block2col form {background: none; }
dd.postavatar { background-image: url(DOMYŚLNY OBRAZEK AVATARA); background-repeat: no-repeat; height: 100px;}

- Wklejamy kody do stopki

Kod:

<style type="text/css">
div#brdheader.block { display: none; }
div#announce.block h2 { display: none; }
div#announce.block div.box { BORDER-COLOR: white; border-color: white; background-color: white; }
</style>
<style type="text/css">
dl.conr { background: url(http://img64.imageshack.us/img64/2998/statsvm.png); 
background-position: right top; height: 60px; }
dl.conr { line-height: 17px; }
dl.conr { background-repeat: no-repeat }
dl.conr strong { margin-right: 1.85cm }
</style>
<style type="text/css">
dl.conl { line-height: 17px; }
div#brdstats dl.conl dd {margin-left:1.85cm;}
dl.conl  { background: url(http://img840.imageshack.us/img840/3857/networkp.png);
background-position: left top }
dl.conl { background-repeat: no-repeat };
</style>
<style type="text/css">
dl#searchlinks.conl { background: none }
</style>

<div id="stopka">
<h3>Zarządzanie profilem</h3>
<hr size="1" />
<ul class="subnav">
<span>
<a href="message_list.php" />Prywatne Wiadomości(PW) </a>, <a href="login.php?action=forget" />Zapomniałem hasła</a>, 
<a href="admin_index.php" />Administracja ( tylko dla administratorów i moderatorów )</a></span></ul>
</div>
<br />
<div id="logowanie">
<h3>Login</h3>
<hr />
<form id="login" method="post" action="login.php?action=in" onsubmit="return process_form(this)">
<input name="form_sent" value="1" type="hidden">
<input name="redirect_url" value="http://www.noof.pun.pl/forums.php" type="hidden">
<label id="1"><b>Nazwa użytkownika:</b>  <input name="req_username" size="25" maxlength="25" tabindex="1" type="text"></label>
<label id="2"><b>Hasło:</b>  <input name="req_password" size="25" maxlength="16" tabindex="2" type="password"></label>
<input  id="login" name="login" value="Logowanie" tabindex="3" type="submit">
</form>
</div>
<br />
<br />
<div id="linkireklama"><h3>Reklama</h3><hr />|| <a href="pun.pl" />Darmowy serwis for PunBB</a>   || <a href="www.ninjaclanwars.pun.pl" />Ninja Clan Wars</a> || <a href="http://www.teenbookforum.pun.pl/" />Teen Book Forum</a></div>
<br />
<br />
<div id="autor" align="center" >Theme powered by <a href="http://www.phpbb.com/" /> phpBB group</a>
<br />License GLU v2
<br />Conversion theme on PunBB by <a href="http://noof.pun.pl/" />ukaszf9</a>
<br />Individual Javascript jQuery scripts are public areas.
</div>

Oraz w przypadku korzystania z PunPortalu, w treści ogłoszenia wklejamy taki kod

Kod:

<style type="text/css">
h2 {border-top-left-radius:6px; border-top-right-radius:6px; background-image: url(http://img171.imageshack.us/img171/9674/bglist.gif); }
div#brdmenu.inbox { background-image: url(http://img171.imageshack.us/img171/9674/bglist.gif); }
</style>
<div id="PunBB">
<div id="Naglowek"><img src="http://img51.imageshack.us/img51/2875/noof.gif" align="left" <b><font color="white" size="3"><p id="Napisy_loga">Noof</b></font>
<br />Modyfikacje PunBB przez ukaszf9</p></div>
    <div id="wyszukiwarka"><div id="szukaj"><form action="http://www.google.pl/search" method="get">
<input type="text" name="q" />
<input type="hidden" name="ie" value="iso-8859-2" />
<input type="hidden" name="sitesearch" value="www.skrypty2.pun.pl" />
<input type="submit" value="Szukaj" />
</form>
<a href="http://skrypty2.pun.pl/search.php">Zaawansowana wyszukiwrka</a></div></div>
</div>
<br />
<div id="ogloszenie">
   <div id="index1"><img src="http://img854.imageshack.us/img854/6797/iconhomed.gif" /> <a href="index.php" /><b><font color="#105289">Strona Główna</b></font></a>, <a href="forums.php" /><b><font color="#105289">Forum</b></font></a><div id="rejestracja"><a href="register.php" />Zarejestruj się</a></div></div><hr color="white" width="950" size="1" />
      <div id="index2"><img src="http://img3.imageshack.us/img3/5800/iconfaq.gif" /> <a href="http://skrypty2.pun.pl/help.php"/>FAQ</a> <img src="http://img36.imageshack.us/img36/6660/iconmembers.gif" /> <a href="http://skrypty2.pun.pl/userlist.php"/>Lista użytkowników</a> <img src="http://img847.imageshack.us/img847/9472/iconlogout.gif" /><a href="http://skrypty2.pun.pl/login.php"/>Logowanie</a>
    </div>
</div>
<style type="text/css">
div#portalads.block div.box { BORDER-COLOR: white; border-color: white; background-color: white; }
</style>
<br />
<div id="informacjastyl">
<center>Theme powered by <a href="http://www.phpbb.com/" /> phpBB group</a>
<br />License GLU v2</center>
</div>

Skrypt ten zawiera w sobie skrypty takie jak:
- Profil po prawej stronie
- Obrazek w szybkiej odpowiedzi
- Jeden obrazek koło ostatni zarejestrowany
- Jeden obrazek koło wszyscy użytkownicy
- Domyślny avatar
- Usunięcie obłoczki koło nowej ikonki

No i to chyba wszystko. Jedynie jeszcze chciałbym wspomnieć o tym by każdy nie kończył tworzenia sobie stylu na tym, że to wszystko przekopiuje bo nie na tym rzecz polega. Zawsze warto pokombinować, ze zmianą obrazków, kolorystyką i różnymi innymi rzeczami. No i to chyba tyle. Należy też ustawić wszystkim styl Oxygen gdyż na tym stylu kod był bazowany.

P.S - ze względu, że kod jest strasznie długi nie został jeszcze napisany poradnik dlatego i linki niektóre będą przekierowywać do tej strony więc radzę je oczywiście zmienić na swój adres.