2018. 04. 24.Coppermine | Thumbnails képek méretének változtatása egyszerűen
2018. 04. 18.Videó | PNG készítése Photoshop-ban
2018. 04. 17.Coppermine | Eredeti kép megnyitása új lapon és nem új ablakban
2018. 04. 03.Képről szöveg másolása
2018. 04. 02.Coppermine Galéria költöztetése
Coppermine Gallery themes

Coppermine Gallery themes
80 napja
111 néző

WordPress themes

WordPress themes
81 napja
114 néző

G-Portál themes

G-Portál themes
81 napja
67 néző

Tumblr themes

Tumblr themes
81 napja
101 néző

Dupla aláhúzás modulfejlécnek CSS kóddal
1 329 megtekintés

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




Előző, következő cikk



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

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