logo
Přihlášení
Uživatel: Přihlásit automaticky při příští návštěvě:
Zapomněli jste svoje heslo?
Heslo:
  Registrace
Internetový obchod, e-shop, SEO-shop
Webhosting C4 - 20 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.

Úvodní stránka
Úvod
Diskusní fórum
Fórum
Ke stažení
Ke stažení
Instalace
Instalace
Rady a Návody
Návody
Moduly
Moduly
Vzhled
Vzhled
FAQ
FAQ
Odkazy
Odkazy
RSS

Levné pneu pro Vaše auto.
Kvalitní kočárky Tako. Levné zájezdy, last-minute

Návod vytvoření stylu malý tutorial

 
Přidat nové téma   Zaslat odpověď    Obsah fóra phpBB CZ -> Vzhled a grafické prvky
Zobrazit předchozí téma :: Zobrazit následující téma  
Autor Zpráva
Roman
Člen týmu
Člen týmu


Založen: 31.7.2005
Příspěvky: 183

PříspěvekZaslal: 18 červenec 2006 22:06    Předmět: Návod vytvoření stylu malý tutorial Citovat

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
Zobrazit informace o autorovi Odeslat soukromou zprávu Zobrazit autorovy WWW stránky
Webhosting C4 - 20 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.
leschek
Profesionál
Profesionál


Založen: 24.1.2006
Příspěvky: 365

PříspěvekZaslal: 19 červenec 2006 00:00    Předmět: Citovat

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 . Laughing
Návrat nahoru
Zobrazit informace o autorovi Odeslat soukromou zprávu Zobrazit autorovy WWW stránky
Roman
Člen týmu
Člen týmu


Založen: 31.7.2005
Příspěvky: 183

PříspěvekZaslal: 19 červenec 2006 12:26    Předmět: Pokračování Citovat

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>&nbsp;</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>&nbsp;&nbsp;</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
Zobrazit informace o autorovi Odeslat soukromou zprávu Zobrazit autorovy WWW stránky
leschek
Profesionál
Profesionál


Založen: 24.1.2006
Příspěvky: 365

PříspěvekZaslal: 19 červenec 2006 14:50    Předmět: Re: Pokračování Citovat

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
Zobrazit informace o autorovi Odeslat soukromou zprávu Zobrazit autorovy WWW stránky
Roman
Člen týmu
Člen týmu


Založen: 31.7.2005
Příspěvky: 183

PříspěvekZaslal: 19 červenec 2006 15:54    Předmět: Re: Návod vytvoření stylu malý tutorial Citovat

Už jsi dodělal ten návod na přeměnu barev ve stylopisu
at nemusím zoufale hledat ?
Návrat nahoru
Zobrazit informace o autorovi Odeslat soukromou zprávu Zobrazit autorovy WWW stránky
leschek
Profesionál
Profesionál


Založen: 24.1.2006
Příspěvky: 365

PříspěvekZaslal: 19 červenec 2006 19:49    Předmět: Citovat

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
Zobrazit informace o autorovi Odeslat soukromou zprávu Zobrazit autorovy WWW stránky
Roman
Člen týmu
Člen týmu


Založen: 31.7.2005
Příspěvky: 183

PříspěvekZaslal: 22 červenec 2006 00:20    Předmět: Re: Návod vytvoření stylu malý tutorial Citovat

Slunko pálí ,ale zase jsem trochu barvil jenom upravy css styl

http://www.beawers.cz/styl/
Návrat nahoru
Zobrazit informace o autorovi Odeslat soukromou zprávu Zobrazit autorovy WWW stránky
Zobrazit příspěvky z předchozích:   
Přidat nové téma   Zaslat odpověď    Obsah fóra phpBB CZ -> Vzhled a grafické prvky Časy uváděny v GMT + 1 hodina
Strana 1 z 1

 
Přejdi na:  
Nemůžete odesílat nové téma do tohoto fóra.
Nemůžete odpovídat na témata v tomto fóru.
Nemůžete upravovat své příspěvky v tomto fóru.
Nemůžete mazat své příspěvky v tomto fóru.
Nemůžete hlasovat v tomto fóru.
Nemůžete připojovat soubory k příspěvkům
Nemůžete stahovat ani prohlížet přiložené soubory
šřa