Az oldal menüje
 
Az év weboldala - 2013


Photoshop leírások

Ikonbázis
Galéria
 

 
Címkék

A blogban leggyakrabban használt címkék

 

Neko

CSS kód a G-Portálon
CSS kód a G-Portálon : Szélső modulok teljes átalakítása CSS-sel

Szélső modulok teljes átalakítása CSS-sel


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


Kattints a képre a teljes mérethez!

A CSS kód leírása

Ezzel a résszel tudsz a szélső modulok helyzetén változtatni. Lejjebb, feljebb, jobbra, balra vihető. A display és a position értékek mindig maradnak! Csak a modul helyzetén változtass ebben a részben!

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

Ez a kódrész már ismerős lehet. Itt tudod a szélső modul szélességét beállítani. A háttérszín lehet átlátszó vagy színes. Ezt magad döntöd el.

.column_side  {
    width: 330px;
    background-color: #ffffff !important; }

Ez a szélső modulok fejléce, az-az a modulfejléc. Ugyan úgy lehet állítani, mint eddig a sima td.modtitle-t.

.column_side td.modtitle {
    font-family: tahoma;
    font-weight: normal;
    text-align: left;
    font-size: 11px;
    color: #ffffff;
    text-transform: uppercase;
    background-color: #ae4646;
    padding: 3px 3px 2px 8px;
    text-shadow: 1px 1px 1px #000000; }

Ez pedig a szélső modulok modbody az-az tartalmi része. Ugyan úgy állítható, mint a sima modbody rész eddig.

.column_side td.modbody {
    border-bottom: 0px solid #dfb598;
    background-color: transparent;
    font-family: book antiqua;
    font-size: 16px;
    color: #999898;
    line-height: 17px;
    text-align: justify;
    padding: 5px 0 0 0; }

És, hogy még egy kicsit kreatívkodjunk, leírom azt is, hogy a szélső és középső moduloknak eltérő link és képeffekt kinézetet is lehet adni.

Linkeffekt a szélső modulban

A link színe a szélső modulban

.column_side a:link, .column_side a:visited {
    font-family: tahoma;
    color: #ae4646;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase; }

A link színe a szélső modulban, ha ráviszed az egeret

.column_side a:hover {
    color: #ffffff !important;
    background-color: #ae4646;
    text-shadow: 1px 1px 1px 6f2121;
    cursor: default; }

A következő pedig a szélső modulban a képeffekt. Itt most halvány képből lesz éles képe a képnek ha ráviszed az egeret

Linkelt képeffekt a szélső modulban

Így néz ki a linkelt kép, de csak a szélső modulban

.column_side a:link img, .column_side a:visited img {
    border: 0px; /* képnek keret */
    filter: alpha(opacity=90); /* Kép elhalványítása */
    opacity: .9; /* Kép elhalványítása */
}

Így pedig akkor néz ki, ha ráviszed az egeret

.column_side a:hover img {
    border: 0px; /* képnek keret */
    filter: alpha(opacity=60); /* Kép elhalványítása */
    opacity: .6; /* Kép elhalványítása */
}

Sima képeffekt a szélső modulban

Így néz ki a linkelt kép, de csak a szélső modulban

.column_side img {
    border: 0px; /* képnek keret */
    filter: alpha(opacity=60); /* Kép elhalványítása */
    opacity: .6; /* Kép elhalványítása */
}

Így pedig akkor néz ki, ha ráviszed az egeret

.column_side img:hover {
    border: 0px; /* képnek keret */
    filter: alpha(opacity=90); /* Kép elhalványítása */
     opacity: .9; /* Kép elhalványítása */
}


 

CSS kód

<style type="text/css">

/* szélső modulok */

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

.column_side {
    width: 330px;
    background-color: #ffffff !important;
}

.column_side td.modtitle {
    font-family: tahoma;
    font-weight: normal;
    text-align: left;
    font-size: 11px;
    letter-spacing: 2px;
    color: #ffffff;
    text-transform: uppercase;
    background-color: #ae4646;
    padding: 3px 3px 2px 8px;
    text-shadow: 1px 1px 1px #000000;
}

.column_side td.modbody {
    border-bottom: 0px solid #dfb598;
    background-color: transparent;
    font-family: book antiqua;
    font-size: 16px;
    color: #999898;
    line-height: 17px;
    text-align: justify;
    padding: 5px 0 0 0;
}

.column_side a:link, .column_side a:visited {
    font-family: tahoma;
    color: #ae4646;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
}

.column_side a:hover {
    color: #ffffff !important;
    background-color: #ae4646;
    text-shadow: 1px 1px 1px 6f2121;
    cursor: default;
}

 

.column_side img {
    border: 0px; /* képnek keret */
    filter: alpha(opacity=90); /* Kép elhalványítása */
    opacity: .5; /* Kép elhalványítása */
    -webkit-transition: opacity .5s ease-in; /* Mennyi ideig tartson az átmenet. (Chrome, Opera...-ban) */     
    -moz-transition: opacity .5s ease-in; /* Mennyi ideig tartson az átmenet. (Mozilla Firefoxban) */     
    -o-transition: opacity .5s ease-in; /* Mennyi ideig tartson az átmenet. (Internet Explorerben) */
    -moz-border-radius: 1em; /* Mennyire legyen kerekített kerete a képnek Firefoxban */
    -webkit-border-radius: 1em; /* Mennyire legyen kerekített kerete a képnek Chromeban, Operában */
}

.column_side img:hover {
    border: 0px; /* képnek keret */
    filter: alpha(opacity=90); /* Kép elhalványítása */
     opacity: .5; /* Kép elhalványítása */
    -webkit-transition: opacity .5s ease-in; /* Mennyi ideig tartson az átmenet. (Chrome, Opera...-ban) */     
    -moz-transition: opacity .5s ease-in; /* Mennyi ideig tartson az átmenet. (Mozilla Firefoxban) */     
    -o-transition: opacity .5s ease-in; /* Mennyi ideig tartson az átmenet. (Internet Explorerben) */
     -moz-border-radius: 1em; /* Mennyire legyen kerekített kerete a képnek Firefoxban */
     -webkit-border-radius: 1em; /* Mennyire legyen kerekített kerete a képnek Chromeban, Operában */
}
--></style>

A középső modul teljes átalakításáról pedig itt olvashatsz:
http://aranymeli.gportal.hu/gindex.php?pg=35699533&nid=6527726

Még nincs hozzászólás.
Csak regisztrált felhasználók írhatnak hozzászólást.
 

Nem lehet saját lovad? Nevelj virtuálisan ITT! Nevelj, versenyezz, licitálj szebbnél szebb lovakra!    *****    -Portálépítés és portáldíszítés kezdõknek és haladóknak! Rengetek leírás, JavaScriptek , CSS ,HTML kódok,Naptár,Design!-    *****    The Resident - A kórházi drámasorozat január 21-én indul Matt Czuchry és Emily VanCamp fõszereplésével! Nézzetek be!    *****    Mindenféle kérdésedre õszinte választ kaphatsz a valódi Kérdõasztrológia segítségével.    *****    Részletes személyiség és sors analízis / születési horoszkóp / ajándék 3 év elõrejelzéssel. Most érdemes ide látogatni!!    *****    Ha diplomás asztrológust keresel, aki BECSÜLET KASSZÁS alapon ad tanácsot és INGYEN OKTAT, akkor keress bizalommal!    *****    A BIOTÉRKÉP AZ IGAZI KARMA! MEGMUTATJA PONTOSAN,MILYEN FELADATTAL SZÜLETTÉL.EGY PRÓBÁT MEGÉR. SOK SEGÍTSÉG MINDEN NAP!!!    *****    Megnyitott a madárvendéglõ! Gyertek vendégségbe ti is Mályvához és Pipitérhez! Irány a Mesetár!    *****    Megnyitottam cikkes, véleményes blogomat! Sok-sok érdekes bejegyzéssel várlak naponta, ne hagyd ki! - Alice    *****    Sztárokról és idolokról írok,ajánlókat hozok,tippeket és tageket osztok meg veletek!Nézz be egy blogkóros lány oldalára!    *****    Az igazi karma a horoszkópodban a Felszálló holdcsomópont,a Chiron,a Lilith (Fekete Hold),Rendeld meg most!Várlak, katt!    *****    családi adókedvezmény 2018 nyomtatvány letöltés, feltételek tudnivalók    *****    Rendelj születési horoszkópot és 3 év elõrejelzés ajándékba a tiéd. Ne feledd a horoszkóp a lélek tükre,bele kell nézni!    *****    családi pótlék utalás 2018 - csp utalás - utalás idõpontja 2018 - családi pótlék kifizetések !    *****    Ismerd meg az Olicity párost! Minden a Zöld Íjász címû sikersorozat imádott szerelmespárjáról! Mindennap friss!    *****    SZEREPJÁTÉK! Ha aktív oldalon szeretnél játszani, nézz be és légy része egy egyedi történetnek! Csatlakozz!    *****    Karácsonyi képekkel vár a Mesetár! Kukkants be a két nyuszihoz és Miska macskához! Boldog ünnepeket kíván: Nyuszi Mama    *****    Kellemes Karácsonyi Ünnepet és Békés, Boldog Új Esztendõt Kívánok minden Kedves látogatómnak!    *****    Kellemes Ünnepeket kíván Neked is a Zara Larsson Magyarország! - Kellemes Ünnepeket kíván Neked is a Zara Larsson HU!    *****    The Resident - A FOX kórházi drámasorozata januárban indul Matt Czuchry és Emily VanCamp fõszereplésével! Nézzetek be!