Cum adaptam un template in uCoz - Pagina 3

Mesaj # 1 | 1:29 PM 21/06/2012

Am sa va arat cum sa adaptati un template CSS in uCoz.
Am ales acest template gratuit http://www.templatemo.com/preview/templatemo_169_garden
Dupa descarcare veti primi un folder cu imagini, unul cu fisiere js (asta daca template-ul cere), un folder cu fisiere CSS si una sau mai multe pagini html.

Pentru a incepe adaptarea unui template in uCoz trebuie mai intai sa faceti cunostinta cu forma acestuia.

0 Head In head se adauga metategurile, fisierele js, si css
1 Partea inferioara a site-ului - sectiune globala "AHEADER" continutul in constructurul template-ului se pune intre  si 
2 Partea centrala a site-ului Partea centrala ale site-ului care cuprinde contentul si containerele laterale, acest continut in constructurul template-ului se pune intre  si 
2.1 Containerele laterale sectiunele globale "CLEFTER" si "DRIGHTER" continutul in constructurul template-ului se pune intre <td valign="top" style="width:200px;">


si


</td>

Tegurile tabelului <td> indica spatiul pe pagina, acestea pot fi inlocuite de tegurile <div>

Sunt 5 variante de pozitionare a containerelor laterale:
a) site cu un singur container la dreapta
b) site cu un singur container la stanga
c) site cu doua containere, unu la dreapta si altul la stanga
d) site cu doua containere la dreapta
e) site cu doua containere la stanga
2.2 Contentul central
3 Partea superioara a site-ului - sectiune globala "BFOOTER" continutul in constructurul template-ului se pune intre  si 
4 Paginile Pop up

Inainte de a incepe adaptarea, trebuie sa :
1) activati toate modulele.
2) alegeti un template cu culoare asemanatoare cu cea pe care doriti sa o instalati si copiati css-ul de acolo.

Incarcati fisierele CSS si imaginile http://forum.ucoz.com/forum/49-15165-1
Aveti in vedere: calea din CSS trebuie sa corespunda cu calea unde ati incarcat imaginile. Deschideti index.html cu notepad continutul il copiati in CP » Principală » Personalizaţi design-ul » Constructor şablon

Daca salvati, veti primi urmatoarea eroare:

Deci noi trebuie sa adaugam aspectul ferestrelor pop up si Copyright-ul uCoz. Multi pun:

Code

$POWERED_BY$

dupa codul </html> si se lasa multumiti.
Paginile de tip pop up in uCoz sunt:
1) Pagina personală a utilizatorului
2) Mesaje private (MP)
3) Pagina redactării datelor utilizatorului
4) Lista paginilor utilizatorilor

Daca totusi faceti aceasta prostie, cand veti accesa profilul unui utilizator veti primi:
If you are the administrator of this project, go to Control Panel and Restore default template for "Profile page".
Va recomand sa folositi pagina din exemplu si apoi sa o personlizati:

Code

<table border="0" cellpadding="2" cellspacing="1" style="background:#A9B8C2;" width="100%">
<tr><td style="background:#D4DFF7;" align="center"><b>[TITLE]</b></td></tr>
<tr><td align="center" style="background:#F4F4F4;padding:5px;">[BODY]</td></tr>
</table>

Si Copyright-ul uCoz la moment il puneti unde doriti.

Acum sa incepem adaptarea.
0) head - schimbati adresa fisierelor CSS si js (urmariti cu atentie calea.
1) Partea superioara a site-ului
Aceasta bucata de site se incepe dupa tegul <body>, deci indata dupa el punem  si se termina cu 
caciulita se termina in cazul nostru dupa meniu si tegurile care inchid caciulita. Multe template-uri au a.
Tot in caciulita puteti adauga si SITE LOGO care va va permite sa schimbati logoul din constructorul site-ului. In cazul nostru trebuie sa schimbam imaginea cu SITE LOGO

Code

<a href="http://www.templatemo.com" target="_parent">
                            <img src="images/logo.png" alt="Free CSS Template" />
                            
                            </a>

Daca luati doar imaginea, atunci la activarea constructului cand veti da click pe site-ul meu, veti fi redirectionati pe aceasi pagina si nu veti putea schimba logo-ul, de aceea va recomand sa scoateti si hiperlink-ul.
In urma modificarilor header-ul va arata asa:

Code

<div id="templatemo_site_title_bar_wrapper">
                             <div id="templatemo_site_title_bar">

                          <div id="site_title">
                    <h1><span style="color:#355473;font:20pt bold Verdana,Tahoma;">SITE LOGO</span></h1>
                          </div>

                      </div>
</div>

<div id="templatemo_menu_wrapper">
                             <div id="templatemo_menu">
                       <ul>
            <li><a href="$HOME_PAGE_LINK$" class="current">Home</a></li>
            <li><a href="/news">Stiri</a></li>
            <li><a href="/forum">Forum</a></li>
            <li><a href="/gb">Guest book</a></li>
            <li><a href="/index/0-3" class="last">Contact</a></li>
            </ul>

                      </div>
</div>

2) Partea centrala a site-ului
Imediat dupa header incepe partea centrala cu: 
si se incheie cu  inainte de a incepe Footerul. Ca si la partea inferioara, voi singuri trebuie sa hotarati unde se termina acesta.
Intr-un cat in partea centrala pot fi de la 1 la 3 elemente, aici aveti mai mult lucru.

2.1) Contentul central Mai intai stabilim care este contentul.Template-ul luat ca exemplu incepe cu Welcome to our Website! si se termina cu tegul <hr>. Aveti in vedere ca inceputul poate sa inceapa cu careva teguri. Tot acest cod alcatuit din teguri si continut inlocuiti cu: [BODY]

Eu am inlocuit acest fragment de cod:

Code

<div class="section_w500">

             <h2>Welcome to our Website!</h2>

             <p class="em_text">This Free CSS Template is provided by <a href="http://www.templatemo.com" target="_parent">TemplateMo.com</a>. You may use this template in your websites. Credit goes to <a href="http://www.photovaco.com" target="_blank">Free Photos</a> for photos and <a href="http://www.vecteezy.com/vf/1022-Hibiscus-flowers" target="_blank">Vecteezy.com</a> for vectors. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et ipsum sem, ut lobortis dui. Aenean posuere, nunc in vulputate vulputate, justo nibh adipiscing justo, tincidunt consectetur mauris purus ac libero.</p>

             </div>

             <div class="section_w500">

             <h2>Our Services</h2>

             <p>Donec in nisi. Etiam sit amet turpis. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero. Nam sodales, pede vel dapibus lobortis, ipsum diam molestie risus, a vulputate risus nisl pulvinar lacus.</p>
             <ul class="services">
             <li>Aenean posuere, nunc in vulputate vulputate, justo nibh adipiscing justo, tincidunt consectetur</li>
             <li>Donec felis sem, suscipit ac lobortis id, consectetur ac sapien. Phasellus eget augue in massa cursus hendrerit.</li>
             <li>Etiam eu ante non eros ultrices tincidunt. Suspendisse ac eros dui, vel posuere nibh.</li>
             </ul>

             <div class="button_01"><a href="#">Read more</a></div>

             </div>

             <div class="section_w500">

             <h2>Photo Gallery</h2>

             <ul class="gallery">
             <li><a href="#"><img src="images/templatemo_image_01.jpg" alt="image 1" /></a></li>
             <li><a href="#"><img src="images/templatemo_image_02.jpg" alt="image 2" /></a></li>
             <li><a href="#"><img src="images/templatemo_image_03.jpg" alt="image 3" /></a></li>
             <li><a href="#"><img src="images/templatemo_image_04.jpg" alt="image 4" /></a></li>
             <li><a href="#"><img src="images/templatemo_image_05.jpg" alt="image 5" /></a></li>
             <li><a href="#"><img src="images/templatemo_image_06.jpg" alt="image 6" /></a></li>
             <li><a href="#"><img src="images/templatemo_image_07.jpg" alt="image 7" /></a></li>
             <li><a href="http://www.templatemo.com" target="_parent"><img src="images/templatemo_image_08.jpg" alt="image 8" /></a></li>
             </ul>
             <div class="cleaner"></div>

             <div class="button_01"><a href="#">View all</a></div>
             </div>

Atentie!!! Majoritatea acestor template-uri au si un aspect al materialului, il puteti folosi la site-ul dvs. Adaptarea unui aspect al materialului e mult mai usoara decat adaptarea template-ului.

Code

<div class="section_w500">

<div style="float:right"><span title="$TIME$">$DATE$</span> $MODER_PANEL$</div>
<h2><a href="$ENTRY_URL$">$TITLE$</a></h2>
<p class="em_text">
               $MESSAGE$
               </p>
               <div class="button_01"><a href="$ENTRY_URL$">Citeste</a></div>
</div>

Am schimbat titlu cu tegul $TITLE$ dandu-i link $ENTRY_URL$, am schimbat mesaju cu tegul $MESSAGE$.

2.2) Containerele laterale
Indiferent de pozitionarea containerelor, principiul e acelasi. Majoritatea template-urilor sunt din tegurile <div> si marea majoritate din ele au pentru containerele laterale stilurile sidebar sau side

Code

<div id="sidebar">

           <div class="sidebar_section">

           <h2>Categories</h2>
           <ul class="category_list">
           <li><a href="index.html">Vestibulum facilisis</a></li>
           <li><a href="subpage.html">Proin dignissim</a></li>
           <li><a href="index.html">Maecenas sem libero</a></li>
           <li><a href="subpage.html">Class aptent taciti</a></li>
           <li><a href="#">Duis porttitor</a></li>
           <li><a href="#">Nullam ac tellus</a></li>
           <li><a href="#">Praesent viverra</a></li>
           <li><a href="#">Aenean molestie</a></li>
           <li><a href="#">Nunc scelerisque</a></li>
           <li><a href="#">Cras mattis ante</a></li>
           </ul>
           </div>

           <div class="sidebar_section">

           <h2>Search</h2>
           <div id="search_box">
           <form action="#" method="get">
           <input type="text" value="Enter keyword here..." name="q" size="10" id="searchfield" title="searchfield" onfocus="clearText(this)" onblur="clearText(this)" />
           <input type="submit" name="Search" value="Search" alt="Search" id="searchbutton" title="Search" />
           </form>
           </div>

           </div>

           <div class="cleaner"></div>

           </div>

<div id="sidebar"> este tegul care indica pozitia in partea centrala a site-ului. acesta este echivalentul tegului <td valign="top" style="width:200px;">

Dupa adaptare veti primi urmatorul cod:

Code

<div id="sidebar">

           

           <div class="sidebar_section">
           <h2>TITLE</h2>
           CONTENT
           </div>



           <div class="cleaner"></div>
           </div>

3) Partea inferioara a site-ului
Inaintea footer-ului puneti:  si inchideti cu . Dupa partea centrala inchideti site-ul cu tegul </body>
Acum personalizati continutul, in toate teplate-urile free css sunt: ceva asemanator cu:
Copyright © 2048 Your Company Name | Designed by Free CSS Templates

Copyright © 2048 Your Company Name inlocuiti cu: [COPYRIGHT]
si dupa el puteti pune $POWERED_BY$ si-l stergeti de acolo unde l-ati pus inainte.
Designed by Free CSS Templates il puteti sterge, insa nu va sfatuiesc sa o faceti. Toate template-urile free CSS chiar daca sunt gratuite, au drept de autor care cer prezenta acestui hiperlink.
De asemenea puteti introduce un link cu adaptorul template-ului in uCoz.
In urma adaptari acestei parti eu am primit asa:

Code

<div id="templatemo_footer_wrapper">
                  <div id="templatemo_footer">

                  [COPYRIGHT] | $POWERED_BY$ | Adaptare in uCoz <a href="http://www.maxrom.ucoz.com" target="_">MaxRom</a>
                  | Designed by <a href="http://www.templatemo.com" target="_">Free CSS Templates</a>
                  </div>

</div>

4) Paginile Pop up
Dupa cum am zis, pagina pop up o puneti dupa </head> si daca nu stiti cum sa o faceti o puneti pe cea din exemplu si o personalizati. Eu am schimbat culoarea la bara cu titlul si fundalul la continut:

Code

<table border="0" cellpadding="2" cellspacing="1" style="background:#A9B8C2;" width="100%">
<tr><td style="background:#c5e09b;" align="center"><b>[TITLE]</b></td></tr>
<tr><td align="center" style="background:#fff;padding:5px;">[BODY]</td></tr>
</table>

Apasati

Dupa care confirmati. Imediat va aparea o fereastra ajax cu modulele care au fost modificate.

Dupa adaptare forumul va aparea asa:
click pentru a mari

O parte de sus si o parte de jos a contentului nu sunt vizibile, se poate intampla si asa ceva. Aceste erori le puteti modifica manual. Daca intrati in Aspectul general a paginilor forumului
veti vedea ca lipsesc careva teguri <div> si au fost inlocuite cu:

Code

Nu va ingrijorati, inainte de

Code

puneti acele teguri <div> sau <td> care are template-ul vostru, si nu uitati sa le inchideti dupa

Code

$BODY$</div><br />

Aceasta este prima parte a adaptari, acum trebuie sa adaptati stilurile pentru elementele site-ului din containerele laterale si forumul.
Mai intai incepem cu forumul:

La inceput v-am sugerat sa pastrati stilurile CSS intr-un fisier .txt Deschideti acel fisier si cautati:
/* ===== forum Start ===== */
Copiati totul de la aceasta linie pana jos de tot:
/* ====== forum End ====== */

Postati in fisierul CSS incarcat in file manager
Pentru a clarifica: din punctul de vedere al aspectului forumului totul depinde de stilurile din CSS, mai exact, acel fragment de stil ce raspunde de aspectul forumului. Daca template-ul ales inainte de adaptare are nuante asemanatoare cu template-ul adaptat, veti avea mai putin de lucru. Daca aspectul forumului nu corespunde template-ului adaptat, trebuie sa-l modificati singuri. Va sugerez sa folositi programe ca Free HTML Color Picker.

In urma stililizari eu am primit asa: http://garden.ucoz.ro/forum/

Acum trebuie sa personalizam stilurile pentru elementrle site-ului si nu numai. Tot din CSS-ul salvat cautam urmatoarele:

/* Menus */
si
/* ----- */

/* Site Menus */
si
/* --------- */

/* Module Part Menu */
si
/* ----------------- */

/* Entries Style */
si
/* ------------- */

/* Entry Manage Table */
si
/* ------------------ */

/* Comments Style */
si
/* -------------- */

/* Comments Form Style */
si
/* ------------------- */

/* Archive Menu */
si
/* ------------ */

/* Archive Style */
si
/* ------------- */

/* Calendar Style */
si
/* -------------- */

/* Poll styles */
si
/* ---------- */

/* User Group Marks */
si
/* ---------------- */

/* Other Styles */
si
/* ------------ */

Toate aceste stiluri, la fel ca si la forum, trebuie modificate. In unele cazuri, majoritatea stilurilor pot fi omise iar altele sunt obligatorii. In cazul dat, site-ul va pastra un aspect mai original, insa asta depinde doar de cerintele dumneavoastra.

Mesaj # 39 | 1:32 PM 16/11/2013

Cod

ul#css3menu1,ul#css3menu1 ul{
   margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;}
ul#css3menu1 ul{
   display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#000000;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;padding:0 10px 10px;}
ul#css3menu1 li:hover>*{
   display:block;}
ul#css3menu1 li{
   position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
   z-index:1;}
ul#css3menu1{
   font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
   *display:inline;}
* html ul#css3menu1 li a{
   display:inline-block;}
ul#css3menu1>li{
   margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
   outline-style:none;}
ul#css3menu1 a{
   display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Trebuchet MS;color:#B60605;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#000000;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
   float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
   text-align:left;padding:4px;background-color:#000000;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 14px "Comic Sans MS",cursive;color:#B60605;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
   background-color:#B60605;border-color:#C0C0C0;border-style:solid;color:#FFFFFF;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
   display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
   background-color:#B60605;background-image:none;color:#FFFFFF;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
   border-radius:7px 0 0 7px;-moz-border-radius:7px 0 0 7px;-webkit-border-radius:7px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu1 li.toplast>a{
   border-radius:0 7px 7px 0;-moz-border-radius:0 7px 7px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:7px;-webkit-border-bottom-right-radius:7px;}

Acesta este codul ...l-am bagat in foaia CSS dar nu apare nimic... acolo ( l-am pus unde scrie MENU )....si nu merge ?! c pot face? Mai trebuie si alt cod ? APP am incercat sa creez un meniu orizontal in CP->Desing->Construcotr pentru meniul principal dar nu il facea orizontal ... chiar nu reusesc smile

Adăugat (16/11/2013, 12:32 PM)
---------------------------------------------
REZOLVAT ! Puteti inchide tema aceasta de discutie ! Multumesc

Material modificat de VraJe - Sâmbătă, 16/11/2013, 1:28 PM

Ultimele teme de discuție

Teme de discuție populare