Cikkajánló
Az első lépés, ha szeretnétek a Disqus bővítményt, hogy regisztrálni kell az oldalukra és az ott regisztrált felhasználónevet és jelszót kell majd megadni a WordPress bővítményben. Itt tudtok regisztrálni:
Hoztam még egy .psd fejlécet és a hozzá gyűjtött .png képeket is feltöltöttem a galériába. A fejléc a szokásos helyen tölthető le: PSD – Photoshop fejlécek Itt pedig meg
Kérésre hoztam egy újabb szövegdobozt, ahol ha a képre viszed az egeret, akkor jelenik meg az üdvözlő szöveg. De szöveg helyett más is lehet a doboz tartalma. Pl.:  
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
Középső modul teljes átalakítása CSS-sel

Ez a CSS kód csak a középső modulokra hat! Mindent meglehet benne változtatni, mint eddig. Lehet a linkeffekt, képeffekt, modul színe, szöveg színe is teljesen más, mint a szélső modulokban. A jobb és bal oldali modulokra ez a kód nem jó. A szélső modulokra készült CSS kódokat itt találjátok:

 

 

CSS kód leírása

 

Itt tudod beállítani, hogy a középső modul a lap tetejétől mennyivel lejjebb helyezkedjen el. Ha egyszínű modult szeretnél, akkor itt add meg a modul színés is, a modbody pedig legyen transparent, azaz átlátszó.

 

td.sitecol:nth-child(2) {
background-color: #ffffff;}

 

Itt (is) betudod azt állítani, hogy a középső modul például a lap tetejétől mennyivel lejjebb helyezkedjen el.

 

.column_main {
padding-left: 20px;
padding-top: 320px; }

 

Ebben a kódrészben a modulfejlécet tudod állítani. Ugyan úgy kell használni, mint eddig a sima td.modtitle-t.

 

.column_main td.modtitle {
font-family: tahoma;
text-align: left;
font-size: 11px;
letter-spacing: 2px;
color: #ffffff;
padding: 3px 0px 3px 10px;
text-transform: uppercase;
background-color: #000000;
border-bottom: 1px solid #000000;
filter:alpha(opacity=40);
-moz-opacity:0.4;
opacity: 0.4; }

 

A következő kódrész a modbody. Ugyan az, mint eddig a sima td.modbody, csak ez egyedül a középső modulokra hat.

 

.column_main td.modbody {
background-color: #1E1E1E;
font-family: book antiqua;
font-size: 16px;
color: #7A7A7A;
line-height: 18px;
text-align: justify; }

 

Aztán következik a linkeffekt a modulban

 

.column_main a:link, .column_main a:visited {
color: #F9E0BB;
font-family: book antiqua;
text-decoration: none; }

 

.column_main a:hover {
color: #E46F6B;
font-family: book antiqua;
border-bottom: 1px solid #F9E0BB;
text-decoration: none;
cursor: default; }

 

Ez a kód a sima képekre ható, nem a linkelt képekre!

 

.column_main img {
filter: alpha(opacity=70); /* Kép elhalványítása */
opacity: .7; /* Kép elhalványítása */ }

 

.column_main img:hover {
cursor: default;
filter: alpha(opacity=1000); /* Kép elhalványítása */
opacity: 10; /* Kép elhalványítása */ }

 

Végezetül pedig a linkelt képekre ható CSS rész

 

.column_main a:link img, .column_main a:visited img {
background-color: #AE4646;
padding: 8px;
border: 0px; /* képnek keret */
filter: alpha(opacity=90); /* Kép elhalványítása */
opacity: .9; /* Kép elhalványítása */ }

 

.column_main a:hover img {
background-color: #1E1E1E;
padding: 8px;
border: 0px; /* képnek keret */
filter: alpha(opacity=60); /* Kép elhalványítása */
opacity: .6; /* Kép elhalványítása */ }

 

CSS kód

 

<style type="text/css">
td.sitecol:nth-child(2) {
padding-top: 320px;
background-color: #ffffff;
}
.column_main {
}
.column_main td.modtitle {
font-family: tahoma;
text-align: left;
font-size: 11px;
letter-spacing: 2px;
color: #ffffff;
padding: 3px 0px 3px 10px;
text-transform: uppercase;
background-color: #000000;
border-bottom: 1px solid #000000;
filter:alpha(opacity=40);
-moz-opacity:0.4;
opacity: 0.4;
}
.column_main td.modbody {
background-color: #1E1E1E;
font-family: book antiqua;
font-size: 16px;
color: #7A7A7A;
line-height: 18px;
text-align: justify;
}
.column_main a:link, .column_main a:visited {
color: #F9E0BB;
font-family: book antiqua;
background-color: #;
text-decoration: none;
}
.column_main a:hover {
color: #E46F6B;
font-family: book antiqua;
border-bottom: 1px solid #F9E0BB;
text-decoration: none;
cursor: default;
}
.column_main img {
filter: alpha(opacity=70); /* Kép elhalványítása */
opacity: .7; /* Kép elhalványítása */
}
.column_main img:hover {
cursor: default;
filter: alpha(opacity=1000); /* Kép elhalványítása */
opacity: 10; /* Kép elhalványítása */
}
.column_main a:link img, .column_main a:visited img {
background-color: #AE4646;
padding: 8px;
border: 0px; /* képnek keret */
filter: alpha(opacity=90); /* Kép elhalványítása */
opacity: .9; /* Kép elhalványítása */
}
.column_main a:hover img {
background-color: #1E1E1E;
padding: 8px;
border: 0px; /* képnek keret */
filter: alpha(opacity=60); /* Kép elhalványítása */
opacity: .6; /* Kép elhalványítása */
}
-->
</style>

lindadesign Hozzászólások
1 201 megtekintés

Hozzászólások