2017. 11. 20.Képes project szövegdoboz 32.
2017. 11. 18.Videó beágyazása Coppermine galériába 2.0
2017. 11. 16.Coppermine themes
2017. 11. 16.WordPress themes
2017. 11. 15.Új design a LindaDesign-on
png-keszites.flv

PNG kép készítése

demi-lovato.png

Sosugary Gallery themes

lindadesign-fantasy.png

Coppermine Gallery themes

vanessa-marano.png

G-Portál themes

Szélső modulnak egyedi modulstílus

FONTOS, ha a szélső modult feljebb szeretnéd helyezni:


Ha elkészítetted a fejlécedet, akkor NE töltsd fel a Stílus és Felületben a fejléc részhez!!! Töltsd fel a képet rendesen egy képtárba az oldaladon. Mondjuk egy olyan képtárba, amit alapból a design kellékeidnek hoztál létre. Ha feltöltötted akkor a CSS kód body részébe kell beilleszteni ugyanoda, ahova a rendes hátteret is szoktad tenni. A body rész kb. így nézzen ki:
 

<style type="text/css">
body {
    background-attachment: scroll !important;
    overflow: -moz-scrollbars-vertical;
    overflow-x: hidden;
    background-image:
    url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1393355368_69.png),
    url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1393528647_74.png);
    background-color: #e8e9e8;
    background-position: center top, center top;
    background-repeat: no-repeat, repeat-y;
}
--></style>


A body részben a hátterek elrendezése leírásáról itt olvashatsz: Több háttér oldaladnak CSS-el. Egy kicsivel ezzel a kóddal leegyszerűsítjük az egyedi modulok használatát G-Portálon. Eddig is lehetett használni egyedi modulstílusokat itt, csak eddig ezt táblázattal oldottuk meg. Ezentúl táblázatkód nélkül is simán megoldható méghozzá úgy, hogy a szélső és középső moduloknak is más-más egyedi modulstílust állítunk be. Ebben a leírásban most a szélső egyedi modulstílus használatát írom le.
 


Kattints a képre a teljes mérethez!


Ha meg van a három rész a modulstílusból (fejléc, tartalom, lábléc) akkor töltsd fel egy képtárba a G-Portálon a képeket vagy egy olyan tárhelyre, ami neked szimpatikus. A három kép url címét pedig a CSS kódban a megfelelő url címnél le kell cserélni. Ez egyértelműen kitűnik a kódban.
 

CSS kód leírása


Ez a rész akkor kell csak, ha azt szeretnéd, hogy a modulok a lap tetejéről induljanak. Lásd a képen. Ha nálad marad minden a régiben, akkor erre a kódrészre nincsen szükséged.
 

td.sitecol:nth-child(1) {
    position: relative;
    top: 10px;
}


Itt kell megadni a modul szélességét. Ez mindig nagyobb érték legyen, mint az egyedi modulod (amit megcsináltál képszerkesztőben) szélessége! A háttér ilyenkor értelemszerűen átlátszó legyen, az-az transparent.
 

.column_side {
    width: 350px;
    background-color: transparent !important;
}



 

És innen jön maga a modulstílus. Először a fejléc képet kellene beilleszteni a kódban az URL címben a zárójelek közé. A width és height értékeket is töltsd ki a biztonság kedvéért. A width a modulfejléc képed szélessége, a height pedig a magassága. A padding-nál tudod beállítani a modulcímek helyzetét.
 

.column_side td.modtitle {
    font-family: book antiqua;
    font-weight: normal;
    text-align: left;
    font-size: 24px;
    color: #000000;
    background-color: transparent;
    background-image:
    url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1405355273_09.png);
    background-repeat: no-repeat;
    width: 330px !important;
    height: 234px;
    padding: 0 0 88px 30px;
}



 

A következő a tartalmi rész. Ide jön a háttér képed, ahova a tartalmat írod majd. Itt is cseréld az URL címet. A padding beállítással tudod azt állítani, hogy a tartalom mennyivel dobódjon el befelé a háttér szélétől. Itt igazából ennyi. Persze a tartalom kinézetét is megváltoztathatod benne, ha ez nem megy a te modulodhoz.
 

.column_side td.modbody {
    background-color: transparent;
    background-image:
    url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1405355266_21.png);
    background-repeat: repeat-y;
    font-family: book antiqua;
    font-size: 16px;
    color: #ffffff;
    line-height: 17px;
    text-align: justify;
    padding: 0 20px 0 15px;
}



 

És végül kell egy lábléc is. Ahhoz erre a kódra lesz szükség. Itt is írd át az URL címet és a lábléced szélességét és magasságát is add meg inkább. A padding-bottom arra való, hogy az egymás alatti két modul között mennyi legyen a távolság. Mindig nagyobb értéket kell megadni, mint a lábléced magassága!
 

.column_side td.modbottom {
    background-color: transparent;
    background-image:
    url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1405355258_89.png);
    background-repeat: no-repeat;
    width: 330px !important;
    height: 224px;
    padding-bottom: 254px;
}


A background-repeat-oknál és a background-color-oknál nem kell semmit sem megváltoztatnod. Az mindenhol maradjon úgy, ahogy ebben a kódban is van.


CSS kód
 

<style type="text/css">
td.sitecol:nth-child(1) {
    position: relative;
    top: 10px;
}
.column_side {
    width: 350px;
    background-color: transparent !important;
}
.column_side td.modtitle { /* modulfejléc */
    font-family: book antiqua;
    font-weight: normal;
    text-align: left;
    font-size: 24px;
    color: #000000;
    background-color: transparent;
    background-image:
    url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1405355273_09.png);
    background-repeat: no-repeat;
    width: 330px !important;
    height: 234px;
    padding: 0 0 88px 30px;
}
.column_side td.modbody { /* tartalom */
    border-bottom: 0px solid #dfb598;
    background-color: transparent;
    background-image:
    url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1405355266_21.png);
    background-repeat: repeat-y;
    font-family: book antiqua;
    font-size: 16px;
    color: #ffffff;
    line-height: 17px;
    text-align: justify;
    padding: 0 20px 0 15px;
}
.column_side td.modbottom { /* modullábléc */
    background-color: transparent;
    background-image:
    url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1405355258_89.png);
    background-repeat: no-repeat;
    width: 330px !important;
    height: 224px;
    padding-bottom: 254px;
}
--></style>


1 023 megtekintés

Hozzászólások