Cikkajánló
A cím kérdésére az őszinte válasz az lenne, hogy akármennyi, mert mindenki saját maga dönti el, hogy mennyi honlapot szeretne szerkeszteni. Ez jogos is, de az én véleményem ettől
Nagyon-nagyon sokan kérdeztétek, hogyan lehet azt megoldani, hogy a G-portálon a kiemelt kép szélein ne legyen padding, az-az oldalt és felül végigérjen a modulban a kép. Ezt is mint
Hoztam kettő darab WordPress-es leírást,  ahogy a címből is kiderül. Mind a kettő a kiemelt képekkel kapcsolatos és mind a kettő eléggé hasznos is szerintem.   1. leírás: Kiemelt képek
Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák Maisie Williams G-Portálos téma
Egyedi modulstílus blog modulnak

Haladó felhasználók számára íródott a cikk!!!!!!

 

A cikk frissült. A frissítés ideje: 2015. 08. 16.

 

Nagyon-nagyon sokan kérdeztetek arról, hogy hogyan lehet azt megcsinálni, hogy a Blog modul is egyedi modulstílusú lehessen. Az ez előtti cikk, ami itt volt, az is erre volt jó, viszont a kódok benne már elavultak voltak, így újra csináltam az egészet. Jó régóta én is ezt használom a Lauren Graham-es rajongói oldalamon (ahol frissítés egy évben egyszer van :/ ), ezért most már ide is közzé teszem. Megpróbálom érthetően elmagyarázni az egészet. Eléggé bonyolultnak tűnik és igazság szerint nem is olyan könnyű összehozni a design-t. Sok kitartást és türelmet igényel. Gyakorlás kérdése.

 

Először is kell nekünk az egyedi modulstílusunk, ami 3-ba van vágva. Fejléc, tartalmi háttér, lábléc. Ami itt nagyon-nagyon fontos, az-az, hogy a moduloknak meg kell hagyni a hátteret! Azt a hátteret, ami az egész oldaladon lesz a háttér. Nálam most itt ez a halványbarna. Szóval NE háttér nélküli .png képként mentsétek el a modul darabokat!

 

 

 

 

A középső modulnak is kell szélességet adni ahhoz, hogy a blog modul minden széle látszódjon. Pár pixellel nem árt szélesebb értéket megadni, mint a modulstílus szélessége. Azt ezzel a kóddal kell:

 

.column_main_td .module {
width: 634px;
}

 

Akkor helyezzük el a modulfejlécet a blog modulba. Ezzel a kóddal:

 

div[id*="post_"] h2, div[id*="post_"] h2:hover {  /*  blog címének kinézete */
background-image: url(ide jön a modulfejléc URL címe);
font-family: Georgia;
text-align: center !important;
font-size: 16px;
font-style: italic;
color: #ffffff;
text-transform: none;
width: 630px; /* modulfejléc kép szélessége */
height: 87px; /* modulfejléc kép magassága*/
padding-top: 72px; /* ezzel az értékkel állítod be, hogy a modulfejlécen a cím hol legyen. Padding-left, padding-right érték is használható */
}

 

Második lépésben a modulhátteret adjuk meg

 

div[id*="post"] { /* az egész blog modul egyben */
background: url(ide jön a modultartalom URL címe);
padding: 0px !important; /* marad */
margin-top: 0px !important; /* marad */
margin-bottom: 30px !important; /* ennyivel dobja el egymás alatt a bejegyzéseket */
color: #666666;
font-size: 13px;
line-height: 20px;
text-align: justify;
}

 

Ezek után jöhet pl. az alcím és a dátum elhelyezkedése is. Ezeket is oda pakoljátok, ahova tetszik. :) Külön dátum részt is lehet a képszerkesztőben készíteni a modulhoz és aztán a CSS-ben pedig meg lehet adni a dátum egyedi elhelyezkedését. Erről bővebben itt olvashattok: Címkék és dátum egyedi elhelyezkedése

 

div[id*="post_"] .txtbold {  /*  blog alcíme */
background-color: transparent;
border: 0px;
font-size: 11px;
color: #687C97;
text-align: center;
margin-top: -2px !important;
font-weight: normal !important;
text-transform: none;
padding: 2px !important;
font-style: normal !important;
font-family: Arial;
}
div[id*="post_"] .txtmini { /*  dátum a blogban felül  */
color: #C9C9C9;
font-size: 11px;
text-align: right;
background-color: transparent;
margin-top: -8px !important;
font-weight: normal !important;
font-style: normal !important;
font-family: Arial;
}
/* címkék */
.blogtags {
font-size: 0px !important;
color: #F6E6CD;
background-color: transparent;
margin-top: 92px !important;
margin-left: 45px !important;
position: absolute;
}
.blogtags a:link, .blogtags a:visited, .blogtags a:hover {
font-size: 11px;
font-family: Century Gothic !important;
font-weight: normal;
font-style: italic !important;
color: #ffffff; !important;
background-color: transparent;
border: 0px;
padding-right: 5px;
}

 

Igen, tudom. Nem feledkeztem meg a lábrészről sem. A modul láblécét ebben a kódban kell megadni. Először! Mert még egy kódba be kell illeszteni majd.

 

/* mit szólsz hozzá kinézete */
.blogcommentcount {
background: url(ide jön a modullábléc URL címe);
width: 630px;
height: 191px;
font-family: Century Gothic;
background-color: transparent;
color: #ffffff!important;
font-size: 11px!important;
font-style: normal!important;
text-transform: uppercase!important;
padding-right: 350px !important;
padding-top: 110px !important;
}
/* mit szólsz hozzá link kinézete. Ezt is oda pakoljátok, ahova jól esik :) */
.blogcommentcount a:link, .blogcommentcount a:visited {
font-family: Arial !important;
font-size: 11px !important;
color: #ffffff !important;
background-color: transparent !important;
font-weight: normal !important;
}
.blogcommentcount a:hover {
text-decoration: underline;
color: #ffffff !important;
font-weight: normal !important;
}

 

És akkor még egy helyen meg kell adni a lábléc linkjét. Azért, mert ha a blogban rákattintasz az egyik címre vagy a Bővebben feliratra, akkor egy “új lapra” érkezel és ott a “mit szólsz hozzá” DIV-ek már nem szerepelnek, helyette a “Vissza a bloghoz” DIV-ek lesznek a forráskódban. Ezért ebben is meg kell adni a hátteret!

 

/* vissza a bloghoz kinézete */
.blogback2blog { /* vissza a bloghoz */
background: url(ide jön a modullábléc URL címe);
width: 630px;
height: 191px;
font-family: Century Gothic;
background-color: transparent;
color: #ffffff!important;
font-size: 11px!important;
font-style: normal!important;
text-transform: uppercase!important;
padding-right: 350px !important;
padding-top: 110px !important;
}
.blogback2blog a:link, .blogback2blog a:visited, .blogback2blog a:hover {
font-size: 12px;
font-family: Trebuchet MS !important;
font-weight: normal;
font-style: italic !important;
color: #ffffff; !important;
background-color: transparent;
border: 0px;
padding-right: 5px;
}

 

És akkor már legyen teljes a kód. A “Bővebben” linket is formázzuk át ezzel a kóddal

 

.blogmorelink { /* bővebben */
background-color: #acd6fb !important;
width: 30% !important;
padding: 8px !important;
padding-bottom: 10px;
margin: 0 auto;
margin-top: 12px !important;
text-align: center !important;
display: table;
border: 4px double #ffffff;
}
/* bővebben link kinézete */
.blogmorelink a:link, .blogmorelink a:visited {
font-size: 12px;
font-family: Georgia !important;
font-weight: normal;
font-style: italic !important;
color: #ffffff; !important;
background-color: transparent;
border: 0px;
padding-right: 5px;
}
.blogmorelink a:hover {
text-decoration: underline;
color: #ffffff!important;
background-color: transparent !important;
}

 

És, ha mindent jól csináltatok, akkor kaptok egy szép egyedi modult a blog modulnak :)

 

lindadesign Hozzászólások
1 368 megtekintés

Hozzászólások