Pagina 2 din 4«1234»
Comunitatea uCoz » Configurări ale sistemului uCoz » Configurarea design-ului » Cum adaptam un template in uCoz
Cum adaptam un template in uCoz
ArtyRo
Postări: 3498
Reputație: 140
Mesaj # 1 | 1:29 PM
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.maxrom.ucoz.com" target="_">MaxRom</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.



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
<div class="forumContent">

Nu va ingrijorati, inainte de
Code
<div class="forumContent">
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.

ArtyRo
Postări: 3498
Reputație: 140
Mesaj # 16 | 2:00 PM
lucacin, Largirea aspectului, adaugarea de elemente noi sunt lucruri individuale. poate fi dinn CSS poate din codul html.

AlynFyn, Toate imagiinile si fisierele .js le incarcati conform caii care sunt indicate in template.. in cele mai multe cazuri acestea sunt in /img/ sau direct in filemanager fara nici o mapa. Daca e varianta 2, va sfatui sa creati mapa /img/ sau /images/ in care sa incarcati imaginile si respectiv /js/ pentru fisierele .js.
Nu uitati daca faceti mape, acestea trebuie indicate si in fisierul CSS sau in template.

AlynFyn
Postări: 19
Reputație: 0
Mesaj # 17 | 2:30 PM
Musatinu am dat la constructor sablon si acolo e un spatiu liber...trebuie sa bag template apasand pe butonul "manager de fisire"? si apropo template-ul meu e diferit fata de al tau .e template 322 sailing si stiam unde sunt pozele .in folderul images.. imi dai skype.id mess cv.. sunt foarte confuz. cred ca trebuie sa termin limbajul htmlx_x
Multumesc.!

Contact:
Id mess.:alin_fin_xd
Material modificat de AlynFyn - Sâmbătă, 26/01/2013, 0:29 AM
gustipodar
Postări: 3
Reputație: 0
Mesaj # 18 | 12:28 PM
Salutare! Am modificat si eu un template insa nu pot sterge o poza ce-mi apare si pe prima pagina. http://divizorcomun.ucoz.com/ E vorba de poza cu logo Divizor Comun si figurinele..Nu vreau sa apara si pe prima pagina. Ma poate ajuta cineva? Multumesc anticipat!
Material modificat de gustipodar - Luni, 04/03/2013, 12:39 PM
ArtyRo
Postări: 3498
Reputație: 140
Mesaj # 19 | 2:59 PM
gustipodar, ce-a din content sau cea din header?
gustipodar
Postări: 3
Reputație: 0
Mesaj # 20 | 3:09 PM
Am gasit intre timp unde era problema..in textul ce l-am pus pe prima pagina, un text oarecare copiat de pe o pagina, in codul html aparea si <div id="header"> adica exact poza respectiva.. Sper ca m-am exprimat bine, eu doar de cateva zile am inceput sa invat html si css de cand mi-a venit ideea cu site-ul. Multumesc oricum pentru promptitudine!
FaraLimite
Postări: 37
Reputație: 1
Mesaj # 21 | 3:27 PM
Nu ma pricep deloc care vrea sa ma ajuta la id-ul ferenti_alyn@yahoo.com va rog mult cry
Material modificat de FaraLimite - Sâmbătă, 13/04/2013, 3:28 PM
Raver
Postări: 1227
Reputație: 70
Mesaj # 22 | 1:25 PM
FaraLimite, dacă urmezi tutorialul de mai sus cu atenție vei reuși. În acelaști timp și niște cunoștințe de HTML/CSS ar ajuta enorm. Poți găsi cursuri utile aici (română) și aici (Engleză).
Be the change you want to see in the world. M Gandhi.
FaraLimite
Postări: 37
Reputație: 1
Mesaj # 23 | 11:48 PM
Multumesc Raver biggrin happy
saw_bis74
Postări: 2
Reputație: 0
Mesaj # 24 | 7:35 PM
Deci acum din ce voi spune eu,probabil ca multi ma vor crede un pic mai incet pentru ca mie nu imi iasa,este prea sofisticat si codificat toul.Deci eu unul nu vreau prea multe detalii ci doar cum pot sa imi pun sau sa imi aleg designul principal,ca sa ma explic mai bine.Deci eu nu vreau sa imi aleg designul ci vreau doar sa pun unul personal ca apoi sa imi continui treburile pe care le am,forum schite etc..
Raver
Postări: 1227
Reputație: 70
Mesaj # 25 | 9:54 PM
saw_bis74, dacă vrei să alegi un alt design din cele predefinite, trebuie să procedezi în felul următor: Panoul de Control -> Setări -> Setări Standard -> Design-ul site-ului -> Selectează Design.

Dacă vrei să instalezi o temă nouă (șablon) din Magazinul de Șabloane, ai toate instrucțiunile aici.

Be the change you want to see in the world. M Gandhi.
draqushor
Postări: 15
Reputație: 0
Mesaj # 26 | 5:12 PM
Muşatinu
Salut pe maxrom.ucoz.ro nu pot sa`ti dau mp si nici pe forum nu pot ca ai l`ai blocat
Am si eu nevoie de 2 scripturi
1 pentru livescore cum este : http://cupeonline.ucoz.ro/index/live_score/0-4#h
2 pentru scrisul rosu care se misca odata cu mouse`ul:http://muzica-live.ucoz.ro/index/chat_online/0-8
ArtyRo
Postări: 3498
Reputație: 140
Mesaj # 27 | 9:11 PM
draqushor,
1) maxrom.ucoz.com cand am facut site-ul domeniu .ucoz.ro inca nu era.
am blocat MP-ul intr-un cat toate intrebarile se pun pe forum.
2) imagineaza-ti ca ma inviti la tine acasa si eu calc pe florile crescute in gradina de maica-ta, exact asta ai facut si tu. Ai scris intr-un topic care nu are nimic cu subiectul mesajului tau.
3) daca dadeai la cautare aici pe forum ai fi gasit ca e un iframe, adica o pagina inserata in interiorul altei pagini,
4) iarasi daca cautai pe forum ai fi gasit cateva exemple din astea + comentariile mele in care zi ca nu se recomanda aceste scripturi.

Andrw
Postări: 70
Reputație: 2
Mesaj # 28 | 0:08 AM
Muşatinu, buna treaba, o sa ma apuc si eu sa creez cateva template ucoz, asa doar ca sa mai invat cate ceva...
OFF: Nu va mai plangeti atata fratilor, daca nu va iese din prima reluati tutorialul.Din greseli invatati..

Material modificat de Andrw - Luni, 19/08/2013, 0:15 AM
pariuri-sportive
Postări: 10
Reputație: 0
Mesaj # 29 | 8:33 AM
salut,
am folosit template #1031 pentru site-ul http://pariurisportive.ucoz.ro/index/0-3 si nu apare scrisul decat daca selectezi cu mouse-ul. este aceeasi culoare cu fundalul, pentru mai multe subcategorii.
ma poate ajuta cineva?
merci!
Felicia
Postări: 1078
Reputație: 51
Mesaj # 30 | 1:17 PM
Salut. Ai reusit sa rezolvi situatia intre timp sau inca mai ai nevoie de ajutor?
Good things come to those who wait!
Comunitatea uCoz » Configurări ale sistemului uCoz » Configurarea design-ului » Cum adaptam un template in uCoz
Pagina 2 din 4«1234»
Căutare: