Cikkajánló
Hoztam kettő darab WordPress-es leírást,  ahogy a címből is kiderül. Mind a kettő a kiemelt képekkel kapcsolatos és mind a kettő eléggé hasznos is szerintem.   1. leírás: Kiemelt képek
Jaj, de nagyon régen nem hoztam már új bejegyzést. Na, de ma megírtam hármat is. Mostanában nem sok időm van erre. A hétvégén a sok-sok e-mailre is válaszolok majd.
Ez egy leírás arról, hogyan tudsz a Coppermine Galéria fejlécébe ugyan úgy egyedi menüt tenni, mint pl. a weboldalad fejlécébe. Szóval nem a megszokott hagyományos két soros menü lesz
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
DIV kódolású modulstílus részletes leírása
Egyedi szövegdoboz

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis lobortis est, eget molestie eros pharetra a. Nullam fermentum, nisl vel sodales dapibus, felis augue aliquam sem, eget pharetra dui risus sed massa. Aenean egestas quis urna sit amet laoreet. Aliquam venenatis eu urna porta mollis. Donec vitae augue varius, posuere arcu in, feugiat purus. Donec adipiscing enim vitae diam lacinia scelerisque. Nullam aliquet dui odio, nec tempus eros aliquam in. Sed pretium commodo sapien quis adipiscing. Proin ut vulputate ipsum. Nulla vestibulum tellus in lorem feugiat lobortis. Vivamus at nisl faucibus, aliquam mauris at, vestibulum sapien. Etiam placerat pellentesque nibh. Aenean quis pulvinar nisi. Morbi sit amet ornare urna.

2015.


Úgy hiszem, hogy a DIV-es kódolás sokkal egyértelműbb és könnyebb, mint a táblázatos megoldás. Elsőre lehet majd nem így látjátok, de ha használjátok és megszokjátok rájöttök, hogy ezzel sokkal könnyebb bánni, mintha táblázatos kódot használnátok. 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. A CSS kódban kell a modulod szélességét és magasságát is megadnod. Az a biztos, ha mindhárom css részben (fejléc, tartalom, lábléc) megadod az értékeket. A DIV kóddal nem is kell bajlódni semmit. Ha beállítottad a képeket, akkor már csak a szöveget kell átírni és készen is vagy. Egyedül a CSS kódban kell dolgoznod amíg a modulod tökéletes nem lesz. A CSS kódot külön-külön is leírtam és mellé írtam, hogy mi micsoda benne.
 

CSS kód leírása
 

.centerDiv { /* ezzel lesz a modul pont középen a honlapodon */
    width: 83%; /* százalékban tudod megadni, hogy pontosan hol helyezkedjen el a modul */
    margin: 0 auto; /* ezt nem kell bántani!! */

#modulfejlec {
   background-color:transparent;
   background: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1404547028_90.png) no-repeat; /* a fejléced url képe. a no-repeat-on ne változtass!!! */
   font-family: book antiqua; /* cím betűtípusa */
   font-size: 24px; /* cím betűmérete */
   font-weight: normal; /* cím félkövér-e vagy normál */
   font-style: italic; /* cím dőlt */
   height: 205px; /* fejléc kép magassága */
   width: 529px; /* fejléc kép szélessége */
   color: #F48F9A; /* cím betűszíne */
   text-align: center; /* cím középen van */
   line-height: 143px; /* ennyivel dobja el fentről a címet, hogy pont a rubrikában legyen. Padding helyett alkalmazzukl ezt!!!! */

#tartalom {
   background-color: transparent;
   background: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1404546066_04.png) repeat-y; /* a tartalmi rész képének az url címe */
   font-family: Trebuchet MS; /* tartalom betűtípusa */
   color: #F6E0E2; /* tartalom betűszíne */
   font-size: 14px; /* szöveg betűmérete */
   font-weight: normal;
   text-align: justify; /* szöveg sorkizárt, de lehet jobbra, balra vagy középre igazított is */
   text-shadow: 1px 1px 1px #EC4257; /* szövegnek árnyék */
   height: 100%; /* magasság százalékban megadva. Maradjon így!!! */
   width: 529px; /* a háttérképed szélessége */
   padding-left: 24px; /* ezzel tudod állítani, hogy a szöveg pont középen helyezkedjen el a modul bal és jobb széléhez képest. */

#tartalom-szelessege { /* itt magának a tartalomnak amit írsz, annak a szélességét kell beállítani */
   width: 480px;

#modullablec {
   background-color:transparent;
   background: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1404547020_84.png) no-repeat; /* a lábléced képének url címe */
   width: 529px; /* a kép szélessége */
   height: 208px; /* a kép magassága */
   line-height:295px; /* fentről ennyivel dobja le a szöveget, hogy pont a kör közepén helyezkedhessen el. Padding helyett használatos!!! */
   padding-left: 60px; /* ennyivel dobja befelé a szöveget */
   color: #F06A7B; /* szöveg színe */


És akkor használd fel a kódokat és készíts te is egyedi modulstílust smiley
 

DIV modulstílus kódja
 

<div class="centerDiv">
    <div id="modulfejlec">
        Friss bejegyzésed címe</div>
    <div id="tartalom">
        <div id="tartalom-szelessege">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis lobortis est, eget molestie eros pharetra a. Nullam fermentum, nisl vel sodales dapibus, felis augue aliquam sem, eget pharetra dui risus sed massa. Aenean egestas quis urna sit amet laoreet. Aliquam venenatis eu urna porta mollis. Donec vitae augue varius, posuere arcu in, feugiat purus. Donec adipiscing enim vitae diam lacinia scelerisque. Nullam aliquet dui odio, nec tempus eros aliquam in. Sed pretium commodo sapien quis adipiscing. Proin ut vulputate ipsum. Nulla vestibulum tellus in lorem feugiat lobortis. Vivamus at nisl faucibus, aliquam mauris at, vestibulum sapien. Etiam placerat pellentesque nibh. Aenean quis pulvinar nisi. Morbi sit amet ornare urna.</div>
    </div>
    <div id="modullablec">
        Dátum</div>
</div>


CSS kód
 

<style type="text/css">
.centerDiv
{
    width: 83%;
    margin: 0 auto;
}
#modulfejlec {
   background-color:transparent;
   background: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1404547028_90.png) no-repeat;
   font-family: book antiqua;
   font-size: 24px;
   font-weight: normal;
   font-style: italic;
   height: 205px;
   width: 529px;
   color: #F48F9A;
   text-align: center;
   line-height: 143px;
}
#tartalom {
   background-color: transparent;
   background: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1404546066_04.png) repeat-y;
   font-family: Trebuchet MS;
   color: #F6E0E2;
   font-size: 14px;
   font-weight: normal;
   text-align: justify;
   text-shadow: 1px 1px 1px #EC4257;
   height: 100%;
   width: 529px;
   padding-left: 24px;
}
#tartalom-szelessege {
   width: 480px;
}
#modullablec {
   background-color:transparent;
   background: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1404547020_84.png) no-repeat;
   width: 529px;
   height: 208px;
   line-height:295px;
   padding-left: 60px;
   color: #F06A7B;
}    
-->    </style>

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

Hozzászólások