Cikkajánló
Elkészültem egy WordPress sablonnal, mert már olyan régen nem csináltam ilyet. A sablon ingyenes, bárki letöltheti, nem kell hozzá regisztrálni sem. A sablon kódokkal tartalmazza a következőket, ami azt
Nem is olyan régen volt egy ilyen kérdés, hogy hogyan lehet a Chat-et így egymás mellé helyezni. Nos, bekódoltam a saját Chat-emet és most ezt a kódot elhoztam nektek
Készítettem egy újabb .psd fejlécet, ami szabadon letölthető. A fejlécen Hilary Duff díszeleg :) A nagyon alap kinézetet ez a fejléc ihlette, csak én jobban ki díszítettem plusz inkább
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
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>

lindadesign Hozzászólások
942 megtekintés

Hozzászólások