Cikkajánló
Na jó, nem teljesen van készen a galéria, de a brush-ok és a .png képek már elérhetőek. A galéria fejlécén Lauren Cohan virít, így készültek .png képek is róla.
Kaptam már kérdést arról, hogy hogyan lehet azt megcsinálni, hogy az elit cserék szöveggel vannak kiírva és amikor rávisszük az egeret, akkor a szöveg helyett képeket mutat. Nos mivel
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ó
2015. május. 31.
G-Portálos CSS kódok részletezése: column_side
Egyéb

7. rész

 
Ebben a részben a column_side azaz a G-Portálon lévő szélső modullal ismerkedhettek meg. Lásd a cikk alatt a képen a szélső sötét színű modult. Ezt a modult teljesen át lehet alakítani úgy, hogy egy kicsit sem kell, hogy megegyezzen a középső tartalmi modul kinézetével. Minden, amit a szélső modulba tesztek (linkek, képek, idézetblokkok, stb.) teljesen eltérhet a középső modulban lévő kinézetektől. De menjünk szépen sorban:
 
Szélső modul színe, szélessége, elhelyezkedése: Ha ennek a modulnak adtok színt, akkor ezen kívül külön a szélső modul modbody részének már nem kell háttérszínt is megadni. Viszont, ha azt szeretnétek, hogy a szélső modulok ne egybe follyanak, hanem legyen a modulok között távolság, akkor itt ebben a kódban a background transparent legyen és a modbody részben kell háttérszínt megadni.
 

.column_side {
background: #272727 !important;
margin-top: 15px;
width: 384px;
}

 
Szélső modul modbody része, ami a CSS kódban így néz ki:
 
.column_side_td .module .modbody
Ha külön modulokat szeretnétek, akkor a háttérszínt itt adjátok meg. Ha a sima .column_side résznél adtatok meg háttérszínt, akkor itt már nem kell. Ez a modul egyébként a szélső modul tartalmi kinézete.
 

.column_side_td .module .modbody {
background: transparent;
font-family: Arial;
font-size: 13px;
color: #666666;
line-height: 20px;
text-align: justify;
text-shadow: 1px 1px 1px #171717;
}

 

 
A szélső modul fejléc kinézete. A CSS kódban így hat rá: .column_side_td .module .modtitle
 

.column_side_td .module .modtitle {
font-family: Trebuchet MS;
text-align: left;
font-size: 12px;
color: #f2f2f2;
letter-spacing: 2px;
text-transform: uppercase;
background: transparent;
border-top: 1px solid #8F8F8F;
border-bottom: 3px solid #8F8F8F;
padding: 8px;
}

 
A szélső modulok lábléc része. A CSS kódban így hat rá: .column_side_td .module .modbottom
Ha semmi extra dolgot nem szeretnétek a láblécnek, akkor elég a padding-bottom, hogy egymás alatt mennyivel helyezkedjenek el a modulok. De adhattok a szélső modul láblécének háttérképet is akár.
 

.column_side_td .module .modbottom {
padding-bottom: 30px;
}

 
A szélső modulban a link kinézete: .column_side a:link, .column_side a:visited
Ha ezt a kódot használjátok, akkor a középső modulban a linkekre nem lesz hatással.
 

.column_side a:link, .column_side a:visited {
color: #A0A0A0;
text-decoration: none;
text-shadow: none !important;
}
.column_side a:hover {
text-decoration: underline;
cursor: default;
}

 
A szélső modulban a linkelt képek kinézete:
 
.column_side a:link img, .column_side a:visited img
Csak a szélső modulban lévő képekre lesz hatással a kód.
 

.column_side a:link img, .column_side a:visited img {
border: 1px solid #3B3B3B;
background: #171717;
padding: 6px;
filter: alpha(opacity=80);
opacity: .8;
}
.column_side a:hover img {
border: 1px solid #3B3B3B;
background: #171717;
padding: 6px;
filter: alpha(opacity=100);
opacity: 10;
}

 
Vastag, aláhúzott, dőlt betűtípusok a szélső modulban
 

.column_side strong, .column_side B { /* vastag */
color: #9C7697;
font-weight: bold;
}
.column_side U { /* aláhúzott */
color: #7A9898;
text-decoration: none;
border-bottom: 0px dotted #000000;
text-shadow: none !important;
}
.column_side EM, .column_side I { /* dőlt */
color: #f2f2f2;
}

 
Idézetblokk a szélső modulban: .column_side_td blockquote
 

.column_side_td blockquote {
background: #D9E6B0;
font-family: Arial;
font-size: 13px;
color: #000000;
text-align: justify;
padding: 5px;
margin-left: 0px;
margin-right: 0px;
}

 
És így tovább… Gondolom a lényegre már rájöttetek ti is. A szélső modulban a CSS kódban, ha valamit használtok, akkor mindig kell elé a column_side rész és mögé pedig jöhet a CSS azon része, ami pl. a linkre, idézetblokkra, stb. hat.
 
.column_side_td .module .modbody
.column_side_td .module .modtitle
.column_side_td blockquote
.column_side a:link img, .column_side a:visited img
.column_side a:link, .column_side a:visited

 

Kapcsolódó bejegyzések

lindadesign
1 304 megtekintés

Előző, következő cikk

Egyszerű G-Portálos téma 1.

Hoztam egy újabb G-Portálos kinézetet. Úgy látom a szavazás állásából, hogy a G-Portálos kinézeteket igénylitek a legtöbben :) De azért majd mást is hozok, de mivel volt már kérés, hogy hozzak egyszerűbb kinézetet is, így  most ez mellett döntöttem.

G-Portálos CSS kódok részletezése: column_main

8. rész   Ebben a részben a column_main azaz a G-Portálon lévő középső modullal ismerkedhettek meg. Lásd a cikk alatt a képen a középső világos színű modult. Ezt a modult teljesen át lehet alakítani úgy, hogy egy kicsit sem

 

Hozzászólások