2017. 11. 20.Képes project szövegdoboz 32.
2017. 11. 18.Videó beágyazása Coppermine galériába 2.0
2017. 11. 16.Coppermine themes
2017. 11. 16.WordPress themes
2017. 11. 15.Új design a LindaDesign-on
png-keszites.flv

PNG kép készítése

demi-lovato.png

Sosugary Gallery themes

lindadesign-fantasy.png

Coppermine Gallery themes

vanessa-marano.png

G-Portál themes

Link “title” rész kinézetének megváltoztatása

A kóddal, amit itt találtok meg lehet változtatni annak a felugró kisablaknak a kinézetét, ami úgy általában megjelenik egy link vagy egy linkelt kép felett, ha van hozzá némi leírás a title részben. Használható bármilyen linkhez, képhez vagy akár a Coppermine Galériához is a még jobb testreszabás érdekében. A kód kettő fájlból áll: van egy javascript kódja, amit az oldalatok header fájljába kell bemásolni Worpress esetén és van a CSS kód része, amit pedig a CSS kódodhoz kell hozzá adni. A kódok alatt azt is leírom, hogyan kell a Coppermine Galériába is beletenni ezt a script-et. LindaDesign


A bekeretezett felugró ablak változik meg a kóddal


A title rész az a rész, ami akkor jelenik meg, ha a linkhez ez be van állítva. Kódban így néz ki:
 

<a href="http://lindadesign-nonstop.hu" title="Ez a kis felugró ablak kinézetileg megváltoztatható :)">LindaDesign</a>


Kép róla


Első lépésben töltsétek le ezt a .js fájlt: qTip.js
Html oldalon: töltsétek fel a .js fájlt a tárhelyetekre oda, ahova általában menni szokott az ilyesmi. Akár külön js mappába vagy simán a gyökér könyvtárba. Csak tudd az elérési útját.
G-Portálon: a .js fájlt a G-Portár-ba töltsétek fel
 

A kód beillesztése:
Html oldalon: a lejjebb látható kódot illlesszétek be a header.php fájlba WordPress esetén. Az elérési útvonalat írjátok át a sajátotokra.
 

<script src="/js/kqTip.js"></script>


G-Portálon: a lejjebb látható kódot illesszétek oldalatok jobb vagy bal oldalába egy egyszerű modulba
 

<script src="ide jön a G-Portárba feltöltött .js fájl url címe"></script>


CSS kód
 

div#qTip {
    background-color:#322827;
    padding: 3px;
    border: 1px solid #2f2828;
    display: none;
    color: #e8e7e4;
    font: 10px arial;
    text-align: center;
    width: 200px;
    position: absolute;
    z-index: 1000;
    -moz-opacity:.95;
    filter:alpha(opacity=95);
    opacity:.95;
}


Coppermine Galériánál: Ha azt szeretnétek, hogy a Coppermine Galériában is cserélődjön le a felugró ablak, ha egy kép fölé viszitek az egeret, akkor így csináljátok: a .js fájlt biztos, ami biztos a galéria éppen használt témájába töltsétek fel és a galéria themplate.html fájljába illesszétek be az elérési út kódját (a script-es kódot). A CSS kódot pedig a Galéria CSS kódjába illesszétek be, ezután formázhatjátok és kész is :)


Ha valami nem lenne egyértelmű, akkor kérdezzetek :)


911 megtekintés

Hozzászólások