Cikkajánló
A cím kérdésére az őszinte válasz az lenne, hogy akármennyi, mert mindenki saját maga dönti el, hogy mennyi honlapot szeretne szerkeszteni. Ez jogos is, de az én véleményem ettől
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
  Egy újabb hullámos tutorial készült el. Ezzel az eljárással már készítettünk egy hullámos leírást, de itt most az egyenletes hullám készítéséről lesz szó. A leírás a G-portálos aloldalon
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_main
Egyéb

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 226 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