Cikkajánló
Kérésre hoztam egy újabb szövegdobozt, ahol ha a képre viszed az egeret, akkor jelenik meg az üdvözlő szöveg. De szöveg helyett más is lehet a doboz tartalma. Pl.:  
Az ingyenesen letölthető Sosugary galéria mellett, ha egyedi saját Sosugary galéria kinézetet szeretnétek, akkor idén (az-az december 31-ig) ingyen lehet megrendelni tőlem. Vagy is, aki ezután rendeli meg, attól
Összegyűjtöttem 25 darab olyan betűtípust, ami nekem tetszik vagy szeretem őket használni. Igazából minden betűtípust szeretek, még azt is, ami csúnya :) A betűtípusok az eredeti oldalról tölthetőek le,
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
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

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

Hozzászólások