Cikkajánló
5. rész   Magyarul a sitebottom a szerkeszthető lábléc CSS kódrésze.   A .sitebottom használata   ha használsz CSS kódot, az a legcélszerűbb, ha ide illeszted be egy modulsávos
Sziasztok! Már eléggé ideje volt új kinézetet varázsolnom az oldalamra azt hiszem, így ezen a hétvégén szántam rá egy kis időt. Nem vittem túlzásba a dolgot. Nem akartam semmi
Amióta használok kiemelt képeket az oldalon azóta foglalkoztatott a dolog, hogy lehetne azt megcsinálni, hogy a képeket lehessen méretileg alakítani és ne kelljen esetleg törölni őket. Ezzel a megoldással
Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló
2015. június. 06.
Dupla aláhúzás modulfejlécnek CSS kóddal

Mostanában nagy divat lett a dupla aláhúzás a modulfejlécekben. Minden aláhúzás más színű általában. A legtöbb helyen ezt .png képpel oldjátok meg, de simán CSS kóddal is meglehet csinálni, csak egy kis trükk kell hozzá :) Hogy lássátok miről van szó. Erről a fajta aláhúzásról:

 

Oldal információ

 

Az a lényeg, hogy a modulcímhez kettő DIV-et kell tenni. Az egyik simán a modulfejléc, ahol a cím kinézete van és a vékonyabb aláhúzás. Ez a modul-head rész. A másik a border-modul rész, ahol pedig megadhatod a vastagabb aláhúzás színét, vastagságát és persze, hogy milyen széles legyen. De akár CSS-sel három színű is lehet az aláhúzás vagy több. Csak ekkor új DIV-et kell készíteni és hozzá a CSS kódot. Ez már csak a kreativitásotokon múlik :)
 

<div class="modul-head">
<div class="border-modul">
Oldal információ
</div>
</div>

 
CSS kód a teljes cikkben

 

<style type="text/css">
.modul-head{
font-family: Trebuchet MS;
font-size:13px;
color: #000000;
text-align:left;
line-height:16px;
text-transform:uppercase;
border-bottom:3px solid #3a3a3a;
}
.border-modul{
display:block; /* ez marad */
margin-bottom:-4px; /* ezzel állítod be, hogy a két aláhúzás egymáshoz viszonyítva középen lehessen */
padding:2px;
width:20%; /* a vastagabb vonal szélessége */
border-bottom:6px solid #FD789D; /* a vonal vastagsága */
}
--></style>

 
G-Portálon a rendes modtitle részben ezt a kódot nem lehet alkalmazni, mert ugye a G-Portál kódját nem lehet módosítani. G-Portálon akkor tudjátok ezt alkalmazni, ha egyedi készítésű modulstílust használtok és azt kódoljátok be. Akkor ugyanígy meglehet csinálni :) Sima HTML/PHP oldalon simán használható :) WordPress-ben is.
A leírást betettem menübe is ide:
HTML-PHP – CSS kódok használata – Dupla aláhúzás modulfejlécnek
G-Portál – CSS kódok használata G-Portálon – Dupla aláhúzás modulfejlécnek

Kapcsolódó bejegyzések

lindadesign
1 173 megtekintés

Előző, következő cikk

Emma Stone .psd fejléc és .png képek

Hoztam még egy .psd fejlécet és a hozzá gyűjtött .png képeket is feltöltöttem a galériába. A fejléc a szokásos helyen tölthető le: PSD – Photoshop fejlécek Itt pedig meg lehet tekinteni teljes nagyságában: megnézem   Emma Stone .png képek

Beépített oldalsáv saját készítésű sablonban

A WordPress-nek vannak beépített widget alkalmazásai, amik megjelennek a szélső sávban, ha a WordPress – Megjelenés – Widgetek menüben ezt beállítjátok. De egy saját készítésű sablonban csak úgy nem fognak megjelenni ezek a widgetek, mert ezt külön kell engedélyezni.

 

Hozzászólások