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ő

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

Hozzászólások