Cum adaptam un template in uCoz - Forum
HOTSCRIPT. uCoz. Ro Va ofera Teme, Scripturi, Sabloane, Aspecte Module, Javascript, Teme ucoz traduse
[ Mesaje noi · Membrii · Reguli Forum · Caută · RSS ]
Page 1 of 11
Forum » Configurări ale sistemului uCoz » Configurarea design-ului » Cum adaptam un template in uCoz
Cum adaptam un template in uCoz
Administrator
Offline
Data: Sunday, 2013-04-28, 11:37 AM | Сообщение # 1
Статус
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 <!-- <header> --> si <!-- </header> -->
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 <!-- <middle> --> si <!-- </middle> -->
2.1 Containerele laterale sectiunele globale "CLEFTER" si "DRIGHTER" continutul in constructurul template-ului se pune intre <td valign="top" style="width:200px;">
<!-- <container> -->
<!-- <block> -->
si
<!-- </block> -->
<!-- </container> -->
</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 <!-- <footer> --> si <!-- </footer> -->
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
<!-- <popup> --><!-- </popup> --> $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
<!-- <popup> -->
<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>
<!-- </popup> -->

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 <!-- <header> --> si se termina cu <!-- </header> -->
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" />  
                             <!-- <span>your tagline goes here</span> -->  
                             </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
<!-- <header> -->  
  <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>  
  <!-- </header> -->

2) Partea centrala a site-ului
Imediat dupa header incepe partea centrala cu: <!-- <middle> -->
si se incheie cu <!-- </middle> --> 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><!-- end of sidebar -->

<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">  
                       
            <!-- <container> -->  
  <!-- <block> -->  
            <div class="sidebar_section">  
            <h2>TITLE</h2>  
            CONTENT  
            </div>  
  <!-- </block> -->  
  <!-- </container> -->  
                       
            <div class="cleaner"></div>  
            </div>

3) Partea inferioara a site-ului
Inaintea footer-ului puneti: <!-- <footer> --> si inchideti cu <!-- </footer> -->. 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
<!-- <footer> -->  
  <div id="templatemo_footer_wrapper">  
                   <div id="templatemo_footer">  
                          
                    [COPYRIGHT]| $POWERED_BY$ | Adaptare in uCoz <a  
href="http://www.hotscript.ucoz.ro" target="_">HotScript</a>  
                   | Designed by <a href="http://www.templatemo.com" target="_">Free CSS Templates</a>  
                   </div>  

  </div><!-- </footer> -->

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
<!-- <popup> -->  
  <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>  
  <!-- </popup> -->


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



Forum » Configurări ale sistemului uCoz » Configurarea design-ului » Cum adaptam un template in uCoz
Page 1 of 11
Search:

Teme si Scripturi uCoz!

ParteneriStatistici Trafic
schimb de likeuri ClickLink.ro