2018. 05. 12.Videó | Kép élénkítése Photoshop-ban
2018. 05. 05.ColorCop színlopó program
2018. 04. 30.Coppermine | Kép és fájlméret megadása az indexképek alatt
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
Coppermine Gallery themes

Coppermine Gallery themes
165 napja
263 néző

WordPress themes

WordPress themes
166 napja
143 néző

G-Portál themes

G-Portál themes
166 napja
86 néző

Tumblr themes

Tumblr themes
166 napja
128 néző

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 271 megtekintés

Hozzászólások