Cikkajánló
Hoztam még kettő darab Sosugary galéria témát, hogy ne csak egy darabból tudjatok válogatni, hanem mindjárt háromból :) A CSS kód átírása egyébként nagyon egyszerű. Kiírtam minden fontos kód
Kettő darab WordPress téma került feltöltésre az oldalra. Egyelőre nincs is több, de majd ha időm engedi, akkor készítek még párat. Én inkább a letisztult kinézeteket kedvelem, szóval abból
Sziasztok :) Csak, hogy ne teljen el úgy hét, hogy nem hozok legalább egy darab prémium témát, így mára is készítettem egyet. Annyira imádom Sophie ezen fotósorozatát, hogy nem
Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló
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 103 megtekintés

Hozzászólások