| Zobrazit předchozí téma :: Zobrazit následující téma |
| Autor |
Zpráva |
Roman
Člen týmu
Založen: 31.7.2005
Příspěvky: 183
|
 Zaslal: 18 červenec 2006 22:06 Předmět: Návod vytvoření stylu malý tutorial |
 |
|
Vytvořím nějaký styl a přitom vám popíšu jak to lze udělat
Ocením každou připomínku a radu samozřejmě i návrh na vzhled.
Celé zkusím popsat takovým tutoriálkem možná se to povede
Vzhledově postupně upravím forum
a nainstaluji a upravým IM portál .
Vše o Im portálu a modu pro Categories Hierarchy MOD 2.1.6.
naleznete tady http://www.angrezphoto.com/forum1/portal.php
Velice pěkně popsané a udělané včetně překladu.
Mé dílko sy můžete prohlížet tady http://www.beawers.cz/styl/
Den 1 Uprava navigační lišty
1/ ve složce templates v tomto případě /stylptifo/ vytvořit složku třeba "moje" ve složce images pro vlastní obrázky
2/ vytvořit pomocný soubor pokus css pro nový styl a připojit do overal_header.tpl /
3/vytvořil jsem tabulku pro navigační menu ,použil jsem tabulku a styl.css
Vložení tabulky do souboru uplně na záčátek a nic ostatního jsem nezměnil - postupně se upraví
Tabulku prohlédněte zde
| kód: | <link rel="stylesheet" href="{S_ROOT}templates/ptifo/{T_HEAD_STYLESHEET}" type="text/css">
<link rel="stylesheet" href="{S_ROOT}templates/ptifo/ptifo_pokus.css" type="text/css">
<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
if ( {PRIVATE_MESSAGE_NEW_FLAG} )
{
window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
}
//-->
</script>
<!-- END switch_enable_pm_popup -->
</head>
<body>
<table id="menu" width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr >
<td id="nava" align="center"><a href="{U_FAQ}"><img class="obr" src="{I_FAQ}" border="0" alt="{L_FAQ}" hspace="3" />{L_FAQ}</a></td>
<td id="nava" align="center"><a href="{U_SEARCH}"><img class="obr" src="{I_SEARCH}" border="0" alt="{L_SEARCH}" hspace="3" />{L_SEARCH}</a></td>
<td id="nav" align="center"><a href="{U_MEMBERLIST}"><img class="obr" src="{I_MEMBERLIST}" border="0" alt="{L_MEMBERLIST}" hspace="3" />{L_MEMBERLIST}</a></td>
<td id="nav" align="center"><a href="{U_GROUP_CP}"><img class="obr" src="{I_GROUP_CP}" border="0" alt="{L_USERGROUPS}" hspace="3" />{L_USERGROUPS}</a></td>
<td id="nava" align="center"><!-- BEGIN switch_user_logged_out --><a href="{U_REGISTER}" ><img class="obr" src="{I_REGISTER}" border="0" alt="{L_REGISTER}" hspace="3" />{L_REGISTER}</a></td>
<td id="nava" align="center"> <!-- BEGINELSE switch_user_logged_out --><a href="{U_PREFERENCES}" ><img class="obr" src="{I_PROFILE}" border="0" alt="{L_PROFILE}" hspace="3" />{L_PROFILE}</a></td>
<td id="nav" align="center"><a href="{U_PRIVATEMSGS}"><img class="obr" src="{PRIVMSG_IMG}" border="0" alt="{PRIVATE_MESSAGE_INFO}" hspace="3" />{PRIVATE_MESSAGE_INFO}</a></td>
<td id="nav" align="center"><!-- END switch_user_logged_out --><a href="{U_LOGIN_LOGOUT}" ><img class="obr" src="<!-- BEGIN switch_user_logged_out -->{I_LOGIN}<!-- BEGINELSE switch_user_logged_out -->{I_LOGOUT}<!-- END switch_user_logged_out -->" border="0" alt="{L_LOGIN_LOGOUT}" hspace="3" />{L_LOGIN_LOGOUT}</a></td>
</tr>
</table>
<a name="top"></a> |
Styl zde | kód: | #menu {
background: #0C68AD ; height:27;
border: 1px solid; border-color: #D2B8AB; font-size: 11px;
margin: 20px 0; padding:0 0 0 0;
}
td#nav {
font-size: 10px; color: #AAA; background: #FFF;
margin: 0 0 0 0; padding: 0 ; text-align:center;
}
td#nava {
list-style: none; margin: 0 ; width: 6%; padding: 0 ;
font-size: 10px; line-height: 22px; white-space: nowrap;
border: 1px solid; border-color: #D2B8AB ;
}
td#nav {
list-style: none; margin: 0 ; width: 8%; padding: 0 ;
font-size: 10px; line-height: 22px; white-space: nowrap;
border: 1px solid; border-color: #D2B8AB ;
}
td#nav a,td#nava a {
display: block; text-align:center;/* background-image: url(images/moje/naw.jpg); */
margin: 0 auto 0 auto; padding: 0 0 0 0px;
text-decoration: none; font-size: 10px;
background: #F6D8C8; color: #333;
}
td #nav a {float: none;}
td#nav a:hover, td#nava a:hover {
/* background-color: red ;*/ color: #0A3589 ;background-image: url(images/moje/naw2.jpg);
}
}
.obr{ margin: 6px auto 0 auto; padding: 0 0 0 0px;
} |
Postupně se s vývojem vzhledu upraví
Naposledy upravil Roman dne 19 červenec 2006 12:22, celkově upraveno 1 krát. |
|
| Návrat nahoru |
|
 |
leschek
Profesionál
Založen: 24.1.2006
Příspěvky: 360
|
| Zaslal: 19 červenec 2006 00:00 Předmět: |
|
|
Ja to tvorim trosku jinak. Zitra (jejkote vlastne dneska) poslu neco jako navod. Zatim se na muj vytvor muzete podivat tady. Ale budte shovivavi, delal jsem to asi jen hodku a pul .  |
|
| Návrat nahoru |
|
|
Roman
Člen týmu
Založen: 31.7.2005
Příspěvky: 183
|
| Zaslal: 19 červenec 2006 12:26 Předmět: Pokračování |
|
|
Pokračování návodu
Přidání hlavičky fora
Vytvořil jsem další tabulku hlavička fora a umístil na začátek souboru
mimo hlavní tab fora před navig. menu.Než dlouhý popis tak se podívejte:
Mé dílko sy můžete prohlížet tady http://www.beawers.cz/styl/ | kód: |
<table class="topbkg" width="100%" align="center" height="136" cellpadding="0" cellspacing="0" border="0">
<tr>
<td> </td>
<td><a href="{U_INDEX}"><img src="" width="200" height="80" border="0" alt="{L_INDEX}"></a></td>
<td align="center" width="100%" valign="middle"><span class="maintitle">{SITENAME}</span><br /><span class="gen">{SITE_DESCRIPTION}</span></td>
<td align="right" width="100%" valign="middle"><a href="#"><img src="templates/ptifo/images/css/" width="286" height="80" border="0" alt="odkaz"></a></td>
<td> </td>
</tr> </table> |
Sty css/ je připsaný obrázek na pozadí/ | kód: | .topbkg {
background: #D3B7AB url(images/moje/ban.jpg);
} |
Změnil jsem barvu pozadí body - background-color v souboru ptifo.css
Začal jsem přebarvovat celý vzhled a přeměnil pár obrázků vše v souboru
ptifo.css
Naposledy upravil Roman dne 19 červenec 2006 19:09, celkově upraveno 1 krát. |
|
| Návrat nahoru |
|
|
leschek
Profesionál
Založen: 24.1.2006
Příspěvky: 360
|
| Zaslal: 19 červenec 2006 14:50 Předmět: Re: Pokračování |
|
|
| Roman napsal: |
Mé dílko sy můžete prohlížet tady |
Prima pohodovy barvy. Ta hneda je fakt prijemna. a ty knofliky v overal_headeru jsou super. |
|
| Návrat nahoru |
|
|
Roman
Člen týmu
Založen: 31.7.2005
Příspěvky: 183
|
| Zaslal: 19 červenec 2006 15:54 Předmět: Re: Návod vytvoření stylu malý tutorial |
|
|
Už jsi dodělal ten návod na přeměnu barev ve stylopisu
at nemusím zoufale hledat ? |
|
| Návrat nahoru |
|
|
leschek
Profesionál
Založen: 24.1.2006
Příspěvky: 360
|
| Zaslal: 19 červenec 2006 19:49 Předmět: |
|
|
| Takže jsem napsal návod, kterej najdete, pokud kliknete >- SEM -< . Klidně ho zkopíruju i sem, pokud o to bude zájem. |
|
| Návrat nahoru |
|
|
Webhosting C4 - 2 GB, PHP, MySQL, administrační systém, 1.200 Kč na rok s doménou v ceně.
Bezproblémová instalace phpBB, Joomla, Drupal. Návody pro C4 - užitečné rady pro zákazníky.
Kvalitní notebooky,
spolehlivé dřevostavby,
útulné domy,
výhodné
sázkové kanceláře
Apartment in Prague - accommodation in Prag,
prague
apartments, kvalitní plastová okna, levné ubytování
|
|
Roman
Člen týmu
Založen: 31.7.2005
Příspěvky: 183
|
| Zaslal: 22 červenec 2006 00:20 Předmět: Re: Návod vytvoření stylu malý tutorial |
|
|
Slunko pálí ,ale zase jsem trochu barvil jenom upravy css styl
http://www.beawers.cz/styl/ |
|
| Návrat nahoru |
|
|
|
|
|
