Adaptarea unui tempate in uCoz

[ Mesaje noi · Membrii · Regulamentul forumului · Căutare · RSS ]

Pagina 1 din 1 1
Moderatorul forumului: Muşatinu

Muşatinu

Data: Vineri, 2012-02-24, 12:19 PM | Mesaj # 1

Sergent

Grup: Administrators

Mesaje: 21

Reputaţie: 0

Status: Offline

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 vom primi un folder cu imagini unu 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 trebu 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 altu 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 faceti urmatoarele:
1) activati toate modulele.
2) alegeti un template cu culoare asemanatoare cu cea pe care doriti so instalati si copiati css-ul de acolo.

Incarcati fisierele CSS si imaginile http://forum.ucoz.com/forum/49-15165-1
Urmariti ca calea din CSS 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 salvam, vom 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 so 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>

iar Copyright-ul uCoz la moment il puneati 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 luam doar imaginea, atunci la activarea constructului cand vom da click pe site-ul meu, veti fi redirectionati pe aceiasi pagina si nu veti putea schimba logo-ul, de aceia 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
Dupa header indata 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.In cazul template-ului luat ca exemplu, el incepe cu Welcome to our Website! si se termina cu tegul <hr>. Fiti atenti inceputu poate sa inceapa cu careva teguri. tot acest cod alcatuit din teguri si continut inlocuim 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 au si un aspect al materialului, il puteti folosi la site-ul dvs. Adaptarea unui aspect al materialului e mult mai usoara de cat 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;">

In urma adaptarii am primit urmatoru 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 footerului puneti:  si inchideti cu . Dupa partea centrala inchidem site-ul cu tegul </body>
Acum personalizam continutu, 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 inlocuim cu: [COPYRIGHT]
dupa el putem pune $POWERED_BY$ si-l stergem de acolo unde l-am pus inainte.
Designed by Free CSS Templates il puteti sterge, insa nu va sfatui so faceti. Toate template-urile free CSS chiar daca sunt gratuite, au drept de autor care cer prezenta acestui hiperlink.
Deasemenea 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 cm so faceti o puneti pe cea din exemplu si o personalizati. Eu am schimbat culoarea la bara cu titlu si fundalu 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>

Apasaam

Dupa care confirmam. Indata 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 ====== */

si postati in fisierul CSS incarcat in file manager
Hai sa va explic, aspectul forumului totul depinde de stilurile din CSS. Anume acel fragment de stil si raspunde de aspectul forumului. Daca template-ul ales inainte de adaptare aere nuante asemanatoare cu template-ul adaptat, veti avea mai putin lucru. Daca aspectul forumului nu corespunde template-ului adaptat, voi 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 dim 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 unile cazuri majoritatea puteti sa nu le puneti iar altele sunt obligatorii, in cazul datsite-ul va pastra un aspect mai original, insa asta depinde doar de cerintele dumneavoastra.

Adaptarea unui tempate in uCoz

Pagina 1 din 1
1