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

Oldalsávban eltérő modulszínek

Még jó múltkorában írtam meg az egyedi BlogPlusz kinézetéről szóló cikket és kódot, ahol azt is említettem, hogy azzal a technikával akár a G-Portálon minden egyes modul más-más színű és kinézetű lehet. Leírást még nem hoztam eddig róla, így ma leírom, hogyan tudjátok megcsinálni, hogy pl. a szélső modulban minden második modul más-más színű. Akár az összes modul lehet eltérő színű, de én most csak kettesével váltogattam a színeket. Így néznek ki nekem most a szélső modulok:

 

 

Minden egyes modulhoz tartozik egy ID számsor, amiről itt is írtam már. Nekünk most azok a számsorok kellenek. Alapértelmezetten nálam a CSS kódban a bézs szín van beállítva a szélső moduloknak, de én azt szerettem volna, hogy minden második modul kék legyen. Ezt úgy lehet megcsinálni, hogy kijelölitek a kiválasztott modulban a modulcímet, majd jobb egérgombbal rá kell kattintani.

 

 

 

  • Ha Mozilla Firefoxban dolgoztok, akkor jobb egérgomb után az elem vizsgálata opciót kell választani
  • Google Chrome-ban pedig simán csak vizsgálat a neve.

 

Azt keressétek meg, ahol a modulcímetek neve alatt kiadja az id=”module_ocimg_36918865″ részt. Innen kell nekünk csak a számsor, amit a CSS kódba fogunk bemásolni.

 

 

A CSS kód pedig így néz ki
Az egyenlőségjel után az én számsorom helyére kell másolni a ti számsorotokat. Ez mindenkinek más.

 

table[module_id*="36918941"]
.modtitle { /* kiválasztott modulcím kinézete */
background: #637AAB !important;
color: #ffffff !important;
}
table[module_id*="36918941"]
.modbody { /* kiválasztott tartalmi rész kinézete */
background: #D2D9E6 !important;
color: #8093BB !important;

 

Elvileg elég csak a háttérszínt és a betűszínt módosítani, mert az alap szélső modul kódban minden más meg van adva. Az !important szócska kötelező!

 

Ez az alap kód ugye itt lent, és ezen felül készítettük el azt, ami csak bizonyos modulokra hat. Így amin nem szeretnétek változtatni, azt nem kell beleírni a számsoros CSS kódba.

 

.column_side_td .module .modtitle {
background: #B5AB77;
font-family: Century Gothic;
text-align: left;
font-size: 14px;
color: #ffffff;
letter-spacing: 1px;
text-transform: uppercase;
font-style: normal;
font-weight: normal;
padding: 10px;
}
.column_side_td .module .modbody {
background: #F1EFE4;
font-family: Arial;
font-size: 13px !important;
color: #B5AB77;
line-height: 20px;
letter-spacing: 0px;
text-align: justify;
text-shadow: 1px 1px 1px #ffffff;
padding: 10px;
}

 

A teljes téma innen tölthető le: megnézemletöltöm


716 megtekintés

Hozzászólások