2017. 11. 27.Coppermine | Egérre felugró ablak tartalmának megváltoztatása
2017. 11. 26.GIF készítése egy pillanat alatt
2017. 11. 26.FREE theme | Dakota Johnson WordPress theme
2017. 11. 25.WordPress alapvető használata
2017. 11. 24.Ingyenes | Eliza Taylor G-Portálos téma
009.png

Eliza Taylor

001.png

Little Mix

040.png

Gal Gadot

008.png

Girls' Generation

A kiemelt kép végigér a modulban

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 minden más szupi beállítást CSS kóddal lehet megcsinálni. Nem nagy dolog az egész, szóval teljesen egyszerű. Értitek? :) Ugye a legtöbb helyen vagy van padding a kép és a modul között, mint ezen a képen is:

 

 

vagy nincsen, de akkor a szöveg is teljesen kiér a modul szélére és az olyan nagyon csúnya. :( Már elnézést, de így van.

 

 

Na, ezt a két problémát egyszerre fogjuk megoldani. Nem lesz a kép köré téve a modul széle és a szöveg is szépen paddingolva lesz és akkor így fog kinézni a bejegyzés:

 

 

Ehhez ez a három CSS kód kell:
div[id*=”post_”] h2, div[id*=”post_”] a:hover h2 – ennél a kódnál nem baj, ha meg van hagyva a betűtípus, betűméret, stb, mert így a régebbi bejegyzéseitek címei kép nélkül is jól mutat, így nem muszáj visszamenőleg minden bejegyzésnek képet adni. A fontos beállítás itt a padding: 0px !important; Ez kell ahhoz, hogy a képek szélei teljesen kiérjenek a modulban.

 

div[id*=”post”] – ebben a kódban szintén nullára kell venni a padding-ot!

 

div[id*=”post”] p – ezzel a kóddal pedig azt lehet beállítani, hogy a tartalom a modul szélein mennyire legyenek beljebb.

 

A padding, ha egy sorba írjátok az értékeket, akkor úgy néz ki, hogy az első érték a TOP, a második a LEFT, a harmadik a BOTTOM és a negyedik a RIGHT. Így egyszerűsíteni is lehet a CSS kódot. Nem kell külön kiírogatni, hogy padding-left, padding-right, stb.

 

div[id*="post_"] h2, div[id*="post_"] a:hover h2 {  /*  blog címének kinézete */
font-family: Trebuchet MS;
font-size: 14px!important;
font-weight: normal;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase !important;
color: #D3C1B6;
background-color: transparent;
text-transform: none;
padding: 0px !important;
text-decoration: none !important;
}
div[id*="post"] { /* az egész blog modul egyben */
margin-bottom: 40px !important;
margin-top: -14px !important;
padding: 0px !important;
color: #666666;
font-size: 13px;
line-height: 20px;
text-align: justify;
background-color: #ffffff;
}
div[id*="post"] p {
padding: 0 15px 0 15px !important;
}

 

Ehhez tartozó leírások, amitől szépen be lehet állítani a blog kinézetét még:

 

Kiemelt kép blogcímnek
Fő cím eltüntetése a blogban
Különálló bejegyzések a blogban
A kiemelt képre nem hat a képeffekt


1 151 megtekintés

Hozzászólások