2017. 11. 27.Coppermine | Egérre felugró ablak tartalmának megváltoztatása
2017. 11. 26.GIF készítése egy pillanat alatt
2017. 11. 26.FREE theme | Dakota Johnson WordPress theme
2017. 11. 25.WordPress alapvető használata
2017. 11. 24.Ingyenes | Eliza Taylor G-Portálos téma
009.png

Eliza Taylor

001.png

Little Mix

040.png

Gal Gadot

008.png

Girls' Generation

G-Portálos CSS kódok részletezése: column_side
1 341 megtekintés

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

 




Előző, következő cikk



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.

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