Cikkajánló
Ez örök kérdés már évek óta sok mindenkitől, így azt hiszem itt az ideje, hogy külön bejegyzésben is leírjam, hol lehet a Coppermine galériában beállítani azt, hogy a főoldalon
Na jó, nem teljesen van készen a galéria, de a brush-ok és a .png képek már elérhetőek. A galéria fejlécén Lauren Cohan virít, így készültek .png képek is róla.
Kellemes estét mindenkinek :) Így hétvégére hoztam újabb kettő darab letölthető G-Portálos teljes sablont. Egy Kristen Stewart és egy Troian Bellisario sablon készült el. Úgy, mint az eddigieket, itt
Prémium téma | Ellie Goulding G-Portálos téma WordPress | Bejegyzés nem jelenik meg a főoldalon Gal Gadot G-Portálos téma Emilia Clarke G-Portálos téma Cole Sprouse G-Portálos téma
Egérre nyíló szövegdoboz

Demó
vidd az egeret az egyik szövegdoboz részhez (nem kell kattintani)
 

  • Szerkeszd meg a szövegdoboz tartalmát. Lehet egyből abban a modulban, ahova a doboz kódját másoltad, de elkészítheted külön egy új egyszerű modulban is, és aztán forráskódból kimásolod a megírt tartalmat és beilleszted itt a tartalom helye részhez. Ebbe a dobozba is bármi tehető. Kép, szöveg, menü, stb. Ezen a szövegdobozon nem szép, ha van oldalt görgetősáv, így ne lépje túl a tartalom a szövegdobozod magasságát. Ez csak egy javaslat természetesen. A javascript kódot úgy ahogy van másold be oldalad egyszerű moduljába. Ebben a kódban tudod a doboz magasságát állítani ennél a résznél: {peekw:'30px', fullw:'450px', h:'300px'}
    A h:300px jelöli a magasságot. Azt az egyet átírhatod.


Szerkeszd meg a szövegdoboz tartalmát. Lehet egyből abban a modulban, ahova a doboz kódját másoltad, de elkészítheted külön egy új egyszerű modulban is, és aztán forráskódból kimásolod a megírt tartalmat és beilleszted itt a tartalom helye részhez. Ebbe a dobozba is bármi tehető. Kép, szöveg, menü, stb. Ezen a szövegdobozon nem szép, ha van oldalt görgetősáv, így ne lépje túl a tartalom a szövegdobozod magasságát. Ez csak egy javaslat természetesen. A javascript kódot úgy ahogy van másold be oldalad egyszerű moduljába. Ebben a javascript kódban tudod a doboz magasságát állítani ennél a résznél: {peekw:'30px', fullw:'450px', h:'300px'}
A h:300px jelöli a magasságot. Azt az egyet átírhatod.


Javascript kód
A két .js fájl, ami az én tárhelyemre van feltölve, töltsd le, másold fel a tárhelyedre és az URL címeket cseréld ki a kódomban.
egerre-nyilo-szovegdoboz.js
egerre-nyilo-szovegdoboz-01.js
 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/egerre-nyilo-szovegdoboz.js"></script>
<script type="text/javascript" src="/js/egerre-nyilo-szovegdoboz-01.js"></script>


Szövegdoboz kódja
 

<div class="haccordion" id="hc2">
    <ul>
        <li style="border-right-width:0">
            <div class="hpanel" style="padding:10px; width:400px">
<p>
                    Ide jön a tartalom</p>
            </div>
        </li>
        <li style="border-right-width:0">
            <div class="hpanel" style="padding:10px; width:400px">
<p>
                    Ide jön a tartalom</p>
            </div>
        </li>
        <li style="border-right-width:0">
            <div class="hpanel" style="padding: 10px; width: 400px; text-align: center;">
<p>
                    Ide jön a tartalom</p>

 

</div>
        </li>
        <li>
            <div class="hpanel" style="padding: 10px; width: 400px; text-align: center;">
<p>
                    Ide jön a tartalom</p>

</div>
        </li>
    </ul>
</div>


CSS kód
 

<style type="text/css">
#hc2 li{
   margin:0 0 0 0;
   border: 12px solid #CED495; /* doboz kerete */
}

 

#hc2 li .hpanel{ /* doboz tartalma */
   font-family: Arial, Sans sherif;
   font-size: 13px;
   color: #868651;
   padding: 5px;
   background: #1B1C16;
   text-align: justify;
}

/* innentől semmin sem kell állítani */

.haccordion{
   padding: 0;
}

.haccordion ul{
   margin: 0;
   padding: 0;
   list-style: none;
   overflow: hidden;
}

.haccordion li{
   margin: 0;
   padding: 0;
   display: block;
   width: 100%;
   overflow: hidden;
   float: left;
}

.haccordion li .hpanel{
   width: 100%;
}</style>
 

Forrás

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

Hozzászólások