2018. 04. 24.Coppermine | Thumbnails képek méretének változtatása egyszerűen
2018. 04. 18.Videó | PNG készítése Photoshop-ban
2018. 04. 17.Coppermine | Eredeti kép megnyitása új lapon és nem új ablakban
2018. 04. 03.Képről szöveg másolása
2018. 04. 02.Coppermine Galéria költöztetése
Coppermine Gallery themes

Coppermine Gallery themes
81 napja
111 néző

WordPress themes

WordPress themes
82 napja
114 néző

G-Portál themes

G-Portál themes
82 napja
67 néző

Tumblr themes

Tumblr themes
82 napja
101 néző

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>


1 353 megtekintés

Hozzászólások