   | |
| A fórum moderátora: KovJonas |
| uCoz közösség » Webmester-részleg » A honlap külalakjának testreszabása » Külalak vezérlése |
| Külalak vezérlése |
Lista utoljára frissítve: 2014. november 29. 18:49.  Egy weboldal designjának előkészítése - útmutató kezdőknek Alap sablonok megváltoztatása Globális blokkok szerkesztése Naptár beállításai Hasznos tippek és trükkök kezdőknek |
 CSS-be: Kód /* --- DOWNLOAD --- */ .sfdl2 { width:165px;height:38px;padding:0;position:relative;font:bold 12px !important; border:1px solid #aaa;display:inline;float:left;text-decoration:none;-moz-box-shadow:rgba(255, 255, 255, 0.6) 0 1px 0 0;-webkit-box-shadow:rgba(255, 255, 255, 0.6) 0 1px 0 0;-o-box-shadow:rgba(255, 255, 255, 0.6) 0 1px 0 0;box-shadow:rgba(255, 255, 255, 0.6) 0 1px 0 0;-moz-border-radius:4px;-webkit-border-radius:4px;-o-border-radius:4px;-ms-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;background:#e5e5e5;background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #fff), color-stop(100%, #ccc));background-image:-moz-linear-gradient(top, #fff 0%, #ccc 100%);background-image:linear-gradient(top, #fff 0%, #ccc 100%);text-shadow:#fff 0 1px;margin:0 10px 7px 0;overflow:hidden;color:#555 !important;} .sfdl2:hover { cursor:pointer !important;text-decoration:none;background:#eee !important;background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #fff), color-stop(100%, #eee));background-image:-moz-linear-gradient(top, #fff 0%, #eee 100%);background-image:linear-gradient(top, #fff 0%, #eee 100%);} .sfdl2 span { border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;height:29px;line-height:13px;margin:3px;padding:4px 0 0 4px;text-align:left;text-shadow:none;width:123px;float:right;margin-left:20px;color:#FFF;background:#363;background-image:-moz-linear-gradient(center top, #393 0%, #373 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #393),color-stop(1, #373));} .sfdl2 small { background:no-repeat url(http://ucoztaska.ucoz.hu/favicon.ico);background-size:16px;color:#ADC2AD; font-weight:normal;height:34px;left:9px;padding:9px 0 0 30px;position:absolute;top:12px;width:120px;white-space:nowrap;overflow:hidden;font-size:90%;} /* --- -------- --- */ Az anyag és hozzászólásainak oldala sablonban ahol a gombot látni szeretnénk: Kód <a href="$FILE_URL$" class="sfdl2"> <span> Letöltés<br/> <small>$FILE_SIZE$</small> </span> </a> Forrás: MaxRom
|
 (Descarca = Letöltés; Size = Méret; Descarcari = Letöltések (száma / hányan töltötték le)) CSS-be: Kód /* Adaptations by coffee aka mozila aka ololowka */ .mknop { display: inline-block; margin: 10px 0px; height: 30px; border: 1px solid #419DB8; border-radius: 5px; box-shadow: inset 0px 1px 0px #7ACBE3, 0px 1px 0px 0px #fff, 0px 2px 4px 0px #90C9D8; background: #58bedc; background: -moz-linear-gradient(top, #58bedc 11%, #3097b5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(11%,#58bedc), color-stop(100%,#3097b5)); background: -webkit-linear-gradient(top, #58bedc 11%,#3097b5 100%); background: -o-linear-gradient(top, #58bedc 11%,#3097b5 100%); background: -ms-linear-gradient(top, #58bedc 11%,#3097b5 100%); background: linear-gradient(to bottom, #58bedc 11%,#3097b5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58bedc', endColorstr='#3097b5',GradientType=0 ); } .mknop:hover { display: inline-block; margin: 10px 0px; height: 30px; border: 1px solid #419DB8; border-radius: 5px; box-shadow: inset 0px 1px 0px #7ACBE3, 0px 1px 0px 0px #fff, 0px 2px 4px 0px #2186A2; background: #58bedc; background: -moz-linear-gradient(top, #58bedc 11%, #21819D 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(11%,#58bedc), color-stop(100%,#21819D)); background: -webkit-linear-gradient(top, #58bedc 11%,#21819D 100%); background: -o-linear-gradient(top, #58bedc 11%,#21819D 100%); background: -ms-linear-gradient(top, #58bedc 11%,#21819D 100%); background: linear-gradient(to bottom, #58bedc 11%,#21819D 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58bedc', endColorstr='#21819D',GradientType=0 ); } .mknoplink { padding: 2px 8px; display: inline-block; background: #efefef; background: -moz-linear-gradient(top, #efefef 0%, #dbdbdb 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#dbdbdb)); background: -webkit-linear-gradient(top, #efefef 0%,#dbdbdb 100%); background: -o-linear-gradient(top, #efefef 0%,#dbdbdb 100%); background: -ms-linear-gradient(top, #efefef 0%,#dbdbdb 100%); background: linear-gradient(to bottom, #efefef 0%,#dbdbdb 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#dbdbdb',GradientType=0 ); box-shadow: inset 0px 1px 0px #fff,0px 1px 0px #E5E5E5; border-radius: 3px; text-shadow: 0px 1px 0px #fff; margin: 4px 10px 0px 5px; color: #15586A; font: 14px Arial; } .mknopsize { margin: 0px 10px 0px 7px; display: inline-block; padding: 2px 5px; background: #1A6479; box-shadow: inset 0px 1px 2px #0A4352, 0px 1px 0px #48C1E3; border-radius: 3px; color: #C9F5FF; text-shadow: 0px -1px 0px #0D3E4B; } .mknopdownload { display: inline-block; color: #D6F7FF; text-shadow: 0px -1px 0px #1A6479; } .mknopcifr { margin: 0px 5px 0px 5px; display: inline-block; padding: 2px 5px; background: #1A6479; box-shadow: inset 0px 1px 2px #0A4352, 0px 1px 0px #48C1E3; border-radius: 3px; color: #C9F5FF; text-shadow: 0px -1px 0px #0D3E4B; } .mknorazt { display: inline-block; color: #D6F7FF; text-shadow: 0px -1px 0px #1A6479; } /* ------ */ Az anyag és hozzászólásainak oldala sablonba, ahol a gombot szeretnénk látni: Kód <?if($FILE_URL$)?><a href="$FILE_URL$"><div class="mknop"><div class="mknoplink">Letöltés</div><?if($FILE_SIZE$)?><div class="mknorazt">Méret:</div><div class="mknopsize">$FILE_SIZE$</div><?endif?><div class="mknopdownload">Letöltések: <div class="mknopcifr">$LOADS$</div></div></div></a><?endif?> <?if($RFILE_URL$)?><a href="$RFILE_URL$"><div class="mknop"><div class="mknoplink">Letöltés</div><?if($FILE_SIZE$)?><div class="mknorazt">Méret:</div><div class="mknopsize">$FILE_SIZE$</div><?endif?><div class="mknopdownload">Letöltések: <div class="mknopcifr">$LOADS$</div></div></div></a><?endif?> Forrás: Webo4ka
|
 (Descarca fisieru = Fájl letöltése; Marime = Méret) Az anyag és hozzászólásainak oldala sablonban, a és tagek közé: Kód <?if($USER_AGENT$='opera')?> <link type="text/css" rel="StyleSheet" href="http://maxrom.ucoz.com/css/1/btndesc/fixed_opera.css" /> <?else?> <link type="text/css" rel="StyleSheet" href="http://maxrom.ucoz.com/css/1/btndesc/btn.css" /> <?endif?> Ugyanebben a sablonban, ahol a gombot látni szeretnéd: Kód <div class="download-btn" style="margin:15px;"> <a href="<?if($FILE_URL$)?>$FILE_URL$<?else?>$RFILE_URL$<?endif?>" class="download-btn" title="$ENTRY_TITLE$ letöltése"> <span class="title">Fájl letöltése</span><br> <span class="size">Méret: <?if($FILE_SIZE$)?>$FILE_SIZE$<?else?>$RFILE_SIZE$<?endif?></span> </a> </div> Forrás: http://maxrom.ucoz.com
|
 CSS-be: Kód a.download-link{display:block;padding:5px 0 0 0;margin-bottom:0.1em;text-decoration:none;color:#eeeeee;width:249px;background:url(http://portableapps.com/sites/all/themes/portableappsnew/images/download-portableapps.png) 0 0 no-repeat;text-align:left;line-height:145%;} a.download-link span{display:block;min-height:37px;padding:10px;}* html a.download-link span{height:37px;} a.download-link span{background:url(http://portableapps.com/sites/all/themes/portableappsnew/images/download-portableapps.png) 0 100% no-repeat;} a.download-link strong{font-size:1.6em;text-decoration:none;font-weight:bold;color:#eeeeee;} a.download-link em{font-style:normal;font-weight:normal;color:#eeeeee;letter-spacing:0;display:block;padding-top:3px;font-size:1em;} a.download-link:hover,a.download-link:hover span,a.download-link:hover strong{color:white;cursor:pointer;background-position:100% 0;} a.download-link:hover span{background-position:100% 100%;} Az anyag és hozzászólásainak oldala sablonban, ahol a gombot látni szeretnénk: Kód <a href="$FILE_URL$" class="download-link" title="$ENTRY_TITLE$ letöltése"> <span> <strong>Letöltés</strong> <em>Fájlméret: $FILE_SIZE$</em> </span></a> |
 CSS-be: Kód .button { width: 200px; margin: 50px auto; } .button a { display: block; height: 50px; width: 200px; /*ТИП*/ color: white; font: 17px/50px Helvetica, Verdana, sans-serif; text-decoration: none; text-align: center; text-transform: uppercase; /*ГРАДИЕНТ*/ background: #299a0b; /* Old browsers */ background: -moz-linear-gradient(top, #299a0b 0%, #299a0b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#299a0b), color-stop(100%,#299a0b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #299a0b 0%,#299a0b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #299a0b 0%,#299a0b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #299a0b 0%,#299a0b 100%); /* IE10+ */ background: linear-gradient(top, #299a0b 0%,#299a0b 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#299a0b', endColorstr='#299a0b',GradientType=0 ); /* IE6-9 */ } .button a, p { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); box-shadow: 2px 2px 8px rgba(0,0,0,0.2); } p { background: #222; display: block; height: 40px; width: 180px; margin: -50px 0 0 10px; /*ТИП*/ text-align: center; font: 12px/45px Helvetica, Verdana, sans-serif; color: #fff; /*ПОЛОЖЕНИЕ*/ position: absolute; z-index: -1; /*ПЕРЕХОД*/ -webkit-transition: margin 0.5s ease; -moz-transition: margin 0.5s ease; -o-transition: margin 0.5s ease; -ms-transition: margin 0.5s ease; transition: margin 0.5s ease; } /*HOVER*/ .button:hover .bottom { margin: -10px 0 0 10px; } .button:hover .top { margin: -80px 0 0 10px; line-height: 35px; } /*ACTIVE*/ .button a:active { background: #00b7ea; /* Old browsers */ background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */ background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */ } .button:active .bottom { margin: -20px 0 0 10px; } .button:active .top { margin: -70px 0 0 10px; } Az anyag és hozzászólásainak oldala sablonba, ahol a gombot látni szeretnénk: Kód <div class="button"> <a href="$FILE_URL$">Letöltés</a> <p class="top">$ENTRY_TITLE$</p> <p class="bottom">$FILE_SIZE$</p> </div> Forrás: uCoz Baze
|
 CSS-be: Kód .letoltogomb {position:relative;width:222px;height:61px;display:inline-block;background:url('http://i.imgur.com/MaMqDyI.png');} .letoltogomb .overlay {background:#000;opacity:.8;position:absolute;top:0;left:0;right:0; bottom:0;display:none;color:#fff;overflow:hidden;width:222px !important;height:61px !important;border-radius:20px;} .letoltogomb:hover .overlay {display:inline;} .letoltogomb span {font-size: 8pt;font-family: Arial;padding-top: 25px;display: block;text-align: center;} Az anyag és hozzászólásainak oldala sablonba ahova akarjuk: Kód <?if($FILE_URL$ or $RFILE_URL$)?><?if($FILE_URL$)?><a href="$FILE_URL$"><?else?><?if($RFILE_URL$)?><a href="$RFILE_URL$"><?endif?><?endif?><div class="letoltogomb"> <div class="overlay"><span>Méret: <?if($FILE_URL$)?>$FILE_SIZE$<?else?><?if($RFILE_URL$)?><?if($RFILE_SIZE$)?>$RFILE_SIZE$<?endif?><?endif?><?endif?></span></div> </div></a><?endif?> |
Apchris kérdése: Az oldal felső részén egymás mellett vannak a közösségi hálózatok gombjai. Kérdés, hogy ezeket el tudom-e úgy tüntetni, hogy csak a facebook maradjon, illetve hogy a facebook ikon alá hogyan tudom bevarászolni a saját facebook oldalamat? Az #1101-es számú sablont használom. A válasz:
A Honlap felső része sablonban van a következő kód, ahol megadhatod, mely közösségi hálózati oldalakra irányítsanak a gombok: Kód <div id="soc-box"> <a href="http://vk.com/" class="soc-vk" target="_blank"></a> <a href="https://www.facebook.com/" class="soc-fc" target="_blank"></a> <a href="https://vimeo.com/" class="soc-vi" target="_blank"></a> <a href="https://twitter.com/" class="soc-tw" target="_blank"></a> <a href="http://www.flickr.com/" class="soc-fl" target="_blank"></a> </div> Ha neked csak a Facebook kell, akkor a fent említett kódot cseréld erre: Kód <div id="soc-box"> <a href="FACEBOOK LINK" class="soc-fc" target="_blank"></a> </div> Ahol a FACEBOOK LINK szöveget a Facebook oldalad linkjére cserélsz. |
Sziasztok!
Egy kis segítséget kérnék! Nem nagyon vagyok otthon MÉG ebben a html, css kódú szereksztésben, úgyhogy egy admin rendzsres segítségét nagyon megköszönném. Főbb problémáim: hogyan kell megváltoztatni a hátteret egy képpé, színek beállításai. Igazsgá szerint, meg tudnám csinálni nagyjűból, csak nem értem hogy hol kell. Előre is köszi a válaszokat, segítséget,, amit akár pm-ben is küldhettek ! Ancsi |
Dorcsyh99, üdvözlünk! A honlap stílusát a Stílusok táblázata (CSS) sablonban szerkesztheted.
A háttér képpé változtatásához keresd meg a sablonban a Kód body { ..... } elemet, majd azon belül a background vagy background-image tulajdonságot. Itt a kettőspont (:) és a pontosvessző (;) között kell megadnod a következő kódsort (behelyettesítve az alap tartalmat): Kód url('KÉPURL') ahol a KÉPURL szöveget lecseréled a kép teljes URL-címére. A betűszín megváltoztatásának attribútuma a color. Ezt különböző osztályoknál (.class), standard elemeknél (nav) vagy ID-knál (#id) adhatod meg. Itt a kettőspont (:) és a pontosvessző (;) között kell megadnod egy színkódot: Kód #F32F32 vagy alapszínt: Kód blue Persze lehet HTML kódokkal is színt beállítani, ehhez csak a következő kódot kell használni: Kód <span style="color: #F32F32;">SZÖVEG</span> ahol az #F32F32 színkódot a kívánt színre, a SZÖVEG-et pedig a tartalomra, amelyre a színt szeretnéd beállítani. Ha valami nem érthető, vagy más kérdéseid is lennének, tedd fel azt nyugodtan 
|
Bigblog!
Köszönöm, szépen a segítséget! Úgy tudom, kép beállításánál meg lehet adni a mérteket is. Ezeket milyen kódok és közé kell beszúrni? Hozzáadva (28.03.2015, 10:54) Idézet <div id="background-image"url=('http://farkaslegendak.ucoz.hu/flszerk.jpg')></div> |
Dorcsyh99, ezt a pontosvessző után, a következő kódok megadásával valósíthatod meg:
Kód background-size: 150px 100px; ahol a 150px értéket lecseréled a kívánt szélességre, a 100px-t pedig a kívánt magasságra. Használhatsz százalékos értékeket is, tehát: Kód background-size: 50% 80%; |
Idézet Dorcsyh99 (  )Valamint, fejlécnek beírtam a következőt, de nem akarja kicserélni az eredetiről erre A helyes kód: Kód <div id="background-image: url('http://farkaslegendak.ucoz.hu/flszerk.jpg');></div> |
Dorcsyh99, bocsi, elírtam valamit
 Ez a helyes kód: Kód <div style="background-image: url('http://farkaslegendak.ucoz.hu/flszerk.jpg');></div> |
Hogyan hozzunk létre kódvázat?
Az alap sablon száma:835, nem lehet, hogy valami kódót még be kell írni mellé?
| |||