Cikkajánló
Általában soha nem szoktam a véleményemet leírni, vagy kimondani, ha nem muszáj, mert túl őszinte vagyok, és vannak olyan emberek, akik nagyon nehezen viselik az igazságot. Vagyis általában a
A WordPress-ben alapból a szövegszerkesztő elég szegényes. Gondolom az-az oka, hogy optimisták a WP készítői és úgy gondolják, hogy aki WordPress-t használ, az ismeri a kódokat és inkább kódnézetben
Jajj, de nagyon régen nem frissítettem már. Néha időm, néha meg kedvem nincsen hozzá, de most hoztam kettő darab Coppermine galéria témát. Az egyik Alicia Vikaner-rel készült, a másik
Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák Maisie Williams G-Portálos téma
2015. május. 31.
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 kell, hogy megegyezzen a szélső modul kinézetével. Minden, amit a középső modulba van (linkek, képek, idézetblokkok, stb.) teljesen eltérhet a szélső modulban lévő kinézetektől. De menjünk szépen sorban:
 
Középső modul színe elhelyezkedése: Ha ennek a modulnak adtok színt, akkor ezen kívül külön a középső modul modbody részének már nem kell háttérszínt is megadni.
 

.column_main {
background: #ffffff !important;
margin-top: 15px;
}

 
Középső modul modbody része, ami a CSS kódban így néz ki:
 
.column_main_td .module .modbody
Ha a sima .column_main résznél adtatok meg háttérszínt, akkor itt már nem kell. Ez a modul egyébként a középső modul tartalmi kinézete.
 

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

 

 
A középső modul fejléc kinézete. A CSS kódban így hat rá: .column_main_td .module .modtitle
 

.column_main_td .module .modtitle {
font-family: Trebuchet MS;
text-align: center;
font-size: 12px;
color: #f2f2f2;
letter-spacing: 2px;
text-transform: uppercase;
background: #272727;
padding: 8px;
}

 
A középső modulok lábléc része. A CSS kódban így hat rá: .column_main_td .module .modbottom
Adhattok a középső modul láblécének háttérképet is.
 

.column_main_td .module .modbottom {
background: url(http://);
}

 
A modul kinézetének CSS kódjába azért került a .column_main után még ez a kódrész is ( _td .module ), mert e nélkül a .sitetop azaz a szerkeszthető fejléc modulját hiába próbálnátok például átlátszóvá tenni a CSS kódban, nem lehetne, hanem felvenné azt a színt, amit a .column_main .modbody-nak adnátok. De mivel mi a kódhoz hozzátesszük a _td .module-t is, így  ez a probléma fel sem fog merülni :)
 
A középső modulban a link kinézete: .column_main a:link, .column_main a:visited
Ha ezt a kódot használjátok, akkor a középső modulban a linkekre nem lesz hatással.
 

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

 
A középső modulban a linkelt képek kinézete:
 
.column_main a:link img, .column_main a:visited img
Csak a középső modulban lévő képekre lesz hatással a kód.
 

.column_main a:link img, .column_main a:visited img {
border: 1px solid #d8d8d8;
background: #ebebeb;
padding: 6px;
filter: alpha(opacity=80);
opacity: .8;
}
.column_main 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_main strong, .column_main B { /* vastag */
color: #9C7697;
font-weight: bold;
}
.column_main U { /* aláhúzott */
color: #7A9898;
text-decoration: none;
border-bottom: 0px dotted #000000;
text-shadow: none !important;
}
.column_main EM, .column_main I { /* dőlt */
color: #000000;
}

 
Idézetblokk a középső modulban: .column_main_td blockquote
 

.column_main_td blockquote {
background: #F5F5F5;
font-family: Arial;
font-size: 13px;
color: #666666;
line-height: 20px;
text-align: justify;
padding: 10px;
margin-left: 0px;
margin-right: 0px;
border-left: 5px solid #9C7697;
border-bottom: 5px solid #9C7697;
border-top: 5px solid #7a9898;
border-right: 5px solid #7a9898;
}

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

 

Kapcsolódó bejegyzések

lindadesign
1 195 megtekintés

Előző, következő cikk

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

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

Katy Perry .psd fejléc és .png képek

Elkészült egy újabb Photoshop formátumú fejléc :) A képek, amiket használtam a fejléc készítéséhez, fel lettek töltve a Galéria PNG képek kategóriájába is. Ezen a linken tudjátok letölteni a fejlécet: PSD – Photoshop fejlécek Itt pedig meg lehet tekinteni

 

Hozzászólások