2018. 05. 12.Videó | Kép élénkítése Photoshop-ban
2018. 05. 05.ColorCop színlopó program
2018. 04. 30.Coppermine | Kép és fájlméret megadása az indexképek alatt
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
Coppermine Gallery themes

Coppermine Gallery themes
136 napja
149 néző

WordPress themes

WordPress themes
137 napja
132 néző

G-Portál themes

G-Portál themes
137 napja
79 néző

Tumblr themes

Tumblr themes
137 napja
117 néző

G-Portálos CSS kódok részletezése: sitetop

4. rész

 
Magyarul a sitetop a szerkeszthető fejléc CSS kódrésze. Ha használjátok a szerkeszthető fejlécet pl. menünek vagy igazából bárminek, akkor a CSS kódban be lehet állítani, hogy ne legyen háttérszíne a modulnak, hanem olvadjon bele a fejlécbe vagy a háttérbe, ugyanis ha használjátok a szerkeszthető fejlécet és a CSS kódban nem adjátok meg, hogy átlátszó legyen a háttér alatta, akkor olyan színű lesz az egész fejléc modul, mint amit az alap modulnak megadtok.
 

.sitetop { /* fejléc */
background-color: transparent;
margin-top: -12px !important;
}

 
A .sitetop használata
 

  • vízszintes menü tehető bele, így szépen a fejléc alatt középen helyezkedik el a menü és nem csúszik el
  • fejléckép is tehető bele, például akkor, ha képszerkesztőben olyan fejlécet készítettél, amin már szerepel a menü. Olyankor ajánlatos a fejlécet ide beilleszteni, mert alá egyből mehet a menülink kódja is. Itt találtok leírást, hogyan lehet a fejlécen a menüt belinkelni
  • ha fejlécet tesztek bele, akkor előfordul, hogy nem teljesen passzol össze pl. a fejlécháttérrel de egy kis igazítással ezt orvosolni lehet a margin-top beállítással. Pár pixellel lejjebb vagy feljebb lehet vele állítani a fejlécet, hogy biztosan jó helyen lehessen.
  • ha másra nem is használjátok a szerkeszthető fejlécet, akkor arra, hogy a CSS kódokat ebbe a modulba illesszétek be és ne egy szélső modulba. Így hamarabb felveszi az oldal az egyedi kinézetet, mert általában előbb betölt a szerkeszthető fejléc modul, mint a szélső modulok ;)
  • Részletesebb leírás a szerkeszthető fejlécről itt található: link

 
Ezek a legfontosabbak a .sitetop kódrészben. De ha ti tudtok mást is, ami még fontos lehet, szívesen fogadom ;)


1 132 megtekintés

G-Portálos CSS kódok részletezése: sitecol

3. rész

 
Ebben a részben a td.sitecol-lal ismerkedünk meg. Általában a nagy többség csak arra használja, hogy a modulok alatt másmilyen színű legyen a háttér, mint az oldal többi részén. Ez a kód nagyban hasonlít a .site kódrészre, amiről itt írtam egy leírást. Nagyjából csak annyiban tér el a kettő, hogy az oldalszélességet nem itt kell megadni, hanem a .site kódrészben, de hátteret a modulok alá itt is és ott is tudtok adni. Nem kell a kettőt használni. Ha használod a site kódrészt, akkor a sitecol-t nem kell. (azt hiszem) :)
 

td.sitecol { /* modulok alatt a háttér */
background: #000000;
}

 
A háttér lehet pl. háttérszín vagy háttérkép is. Ha ezt is beállítjátok, akkor a modulok alá (csak a modulok alá) másmilyen színű hátteret tudtok tenni. Ha háttérképet adtok meg, akkor még ezek a beállítások lehetnek fontosak. A háttérre vonatkozó részhez a részletes leírás az első cikkben található itt: G-Portálos CSS kódok részletezése: site
 
background-position:  center;
background-repeat: repeat; – háttérszínnél is ajánlatos használni.
background-attachment: fix;
 
Ezek a legfontosabbak a .td.sitecol kódrészben. De ha ti tudtok mást is, ami még fontos lehet, szívesen fogadom ;)


1 192 megtekintés

G-Portálos CSS kódok részletezése: site

2. rész

 
Ebben a részben a .site kódrészről írok kicsit bővebben. Maga a kód így néz ki
 

.site { /* oldal szélessége */
width: 1018px;
}

 
Általában mást nem is kell itt megadni, csak az oldal szélességét. Azt tudni kell, hogy ha ezt a kódot használjátok és így adjátok meg az oldal szélességét, akkor a Stílus és felületben lévő oldalszélesség felülíródik. Tehát ott mindegy, hogy mire van állítva a szélesség, mert a CSS kódban lévő lesz az alapértelmezett beállítás. Nálam általában a Stílus és felületben mindig automatikusra van állítva az oldal és itt a CSS-ben adom meg a tényleges szélességet.
Amit még esetleg a site-on belül meg lehet adni az a background, ami lehet pl. háttérszín vagy háttérkép is. Ha ezt is beállítjátok, akkor a modulok alá (csak a modulok alá) másmilyen színű hátteret tudtok tenni.
 
background: #cccccc;
vagy
background: url(/images/modul-hatter.png);

 

(tovább…)


1 459 megtekintés

G-Portálos CSS kódok részletezése: body

Elindítom azt a cikksorozatot, amiben külön-külön minden CSS kódrészről leírom, hogy micsoda, mire való és mi mindenre hathat a G-Portálon. Belinkelem mindegyik cikkhez azokat a G-Portálos leírásokat, amik már készen vannak és az adott cikkhez tartozhatnak.
 
Elsőnek a body CSS kódrésszel kezdünk. Itt adható meg például az oldalatok háttérszíne vagy szín helyett háttérkép is beilleszthető. A fejléchátteret is itt kell megadni, ha olyan fejlécet szeretnétek, ami majdnem minden böngészőben végigér. Az alsó gögetősávot is a body-n belül lehet eltüntetni. Betűtípus és betűméret megadása is ajánlatos, mert az olyan betűket, ami netalántán egyik-másik CSS kódrészben sincsen benne a G-Portálon, akkor a body-ban megadott stílust fogja alkalmazni. Na, de nézzük a kódot és a részletes leírást hozzá:
 

body {
background: url(/images/fejlec-hatter.png), url(/images/hatter.png);
background-position: center top, center;
background-repeat: no-repeat, repeat;
background-attachment: fix;
cursor: default;
font-family: Arial;
font-size: 14px;
color: #585858;
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
}

 
A háttérre vonatkozó rész:
 

  • background: url(/images/fejlec-hatter.png), url(/images/hatter.png); – így adjátok meg ha fejléchátteret és háttérképet szeretnétek az oldalon. A sorrend is fontos. A fejlécháttér megy előre, aztán a háttérkép URL címe. Ha csak háttérszínt szeretnétek például, akkor a sor így néz ki: background: #000000;
  • background-position: center top, center; – a háttérképek pozíciója. Ha fejlécháttér is van, akkor az minden esetben a center top, azaz középen és felül helyezkedik el. Ezért nem fog elcsúszni egy böngészőben sem a fejléc. A hátteret én center-re szoktam állítani. Persze attól is függ, hogy milyen háttér van. A background-position rész nem kell akkor, ha csak háttérszínt használsz.
  • background-repeat: no-repeat, repeat; – itt azt állítjátok be, hogy a háttér ismétlődjön-e valahogyan vagy sem. Jelen esetben ez megint úgy van most megírva, hogy az első rész (no-repeat) a fejlécháttérre vonatkozik. Azt ugye nem ismételjük, mert azt akarjuk, hogy csak felül a lap tetején jelenjen meg. A második érték a repeat- ez kellhet akkor, ha pl. csak háttérszínt adtok meg, de akkor is, ha háttérképet. Persze a repeat beállítás itt sem törvényszerű, mert a háttértől is függ, hogy mit fogtok oda írni.
  • A hátteres beállításokról még részletesebben itt olvashattok: Több háttér oldaladnakHáttér nem csúszik el Fejléc vagy mögötte a háttér beállítása
  • background-attachment: fix; – a háttér nem gördül, amikor lefelé böngésztek az oldalon. Ha a scroll-t használjátok a fix helyett, akkor a háttér is gördül böngészés közben.

 

(tovább…)


2 025 megtekintés

Leighton Meester egész sablon

Készítettem a napokban is egy teljes kinézetet, bár most ezt nem kódoltam be, mert ahhoz már nem volt kedvem, így simán Photoshop formátumban tölthető le és használható fel majdnem bármilyen oldalon ;) Akár G-Portálon vagy WordPress sablonak, de sima index.php oldalra is jó. A sablon itt (is) megtalálható: PSD – Photoshop teljes sablonok

 


megnézemletöltöm

 

Más: ha minden jól megy, akkor a napokban elindítok egy olyan G-Portálos tutorialt, amiben a G-Portálra vonatkozó összes CSS kódot egyesével külön-külön kiemelem és leírom, hogy mi mire való magyarázattal együtt.


995 megtekintés

Új kategória a galériában

Új kategóriával bővült a galéria Vectoros grafika címmel. Amikor időm van, vagy kedvem akkor töltögetem fel a design kellékeket is a galériába, amik eddig az aranymeli.gp-n voltak elérhetőek. Persze nem teljesen ugyanazokat hozom át erre az oldalra. Egy csomó képet töröltem a gépemről és újakat mentettem le az internetről, amik szebbek, nagyobb felbontásúak. Ez mindenre igaz. (vectoros képek, hátterek, brush-ok, .png képek, stb.) Az első három album, ami a napokban készült el a vectoros kategóriában:
 

 

      


940 megtekintés

Selena Gomez G-Portálos téma

Egy újabb G-Portálos teljes kinézetet hoztam. Ígérem most már lassan abbahagyon a GP-s design-ok gyártását, csak hát már olyan régen nem hoztam a G-Portálra bármilyen kinézetet vagy CSS kódot, hogy gondoltam amíg van hozzá kedvem addig bepótolom ezt a hiányosságomat :) Ennél a design-nál is érvényes, hogy ha felhasználod akár átalakítva is, akkor a forrást tüntesd fel az oldaladon. Nagyon köszi :)

 


megnézem // letöltöm

 

A téma innen a főoldalról is letölthető, de menübe is betettem ide:
G-Portál – G-Portálos teljes kinézetek


1 164 megtekintés

Szöveg a kép mögött 3.

Ez is egy olyan szövegdoboz, ha a képre viszed az egeret, akkor jelenik meg a benne lévő tartalom, ami lehet üdvözlő szöveg, Chat, Facebook doboz, stb.
Annyi hátránya van ennek a doboznak, hogy csak úgy simán nem lehet középre igazítani sajnos. Legalábbis én nem jöttem erre rá. Egy középre igazított táblázatba tettem bele a kódot és így a modulban középen helyezkedik el :) A táblázat miatt  a G-Portálosoknak a szövegdoboz betűtípusánál kell az !important is a kódsor végére, ahogy a kódban is látjátok!
 
Demó

 

 

Donec lectus sapien, dignissim vitae est non, aliquam suscipit velit. Pellentesque ac ligula tincidunt, elementum tortor eu, mattis dolor. Praesent quis hendrerit odio, sed scelerisque risus. Sed at vulputate velit, eget rutrum est. Duis et elementum libero. Curabitur eu libero sodales eros aliquam sagittis sit amet sit amet odio. Vivamus lorem nisl, varius sit amet vehicula blandit, mattis tempus mi. Donec lectus sapien, dignissim vitae est non, aliquam suscipit velit. Pellentesque ac ligula tincidunt, elementum tortor eu, mattis dolor. Praesent quis hendrerit odio, sed scelerisque risus. Sed at vulputate velit, eget rutrum est. Duis et elementum libero.

Navigáció


 

A szövegdoboz itt található meg: Kódok – Szövegdobozok – Szövegdoboz-016


1 272 megtekintés

Emilia Clarke G-Portálos téma + .png képek

Újabb teljes kinézetet készítettem G-Portál-ra. A design átalakítható, de minden esetben kötelező a forrás feltüntetése linkelve. Ezzel együtt Emilia Clarke-os .png képek is készültek összesen 22 darab, amiket pedig a galériában találtok meg :)

 


megnézem // letöltöm

 

     


1 354 megtekintés

Szöveg a kép mögött

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.:
 

  • menü
  • chat
  • facebook doboz
  • elit cserék
  • stb.

 
Demó

 

 

Donec lectus sapien, dignissim vitae est non, aliquam suscipit velit. Pellentesque ac ligula tincidunt, elementum tortor eu, mattis dolor. Praesent quis hendrerit odio, sed scelerisque risus. Sed at vulputate velit, eget rutrum est. Duis et elementum libero. Curabitur eu libero sodales eros aliquam sagittis sit amet sit amet odio. Vivamus lorem nisl, varius sit amet vehicula blandit, mattis tempus mi. Donec lectus sapien, dignissim vitae est non, aliquam suscipit velit. Pellentesque ac ligula tincidunt, elementum tortor eu, mattis dolor. Praesent quis hendrerit odio, sed scelerisque risus. Sed at vulputate velit, eget rutrum est. Duis et elementum libero.

Navigáció

 

A kód pedig itt található meg:
Kódok – Szövegdobozok – Szövegdoboz-015
A régebbi szövegdoboz, ahol balról-jobbra kúszik be a szöveg az pedig itt található:
Kódok – Szövegdobozok – Szövegdoboz-014


1 142 megtekintés

Eltérő idézetblokk a modulokban G-Portálon

Hoztam kettő darab idézetblokk kódot. Ezek a a kódok arra szolgálnak, hogy a szélső modulban és a fő modulban lévő idézetblokkok a G-Portálon különbözőek lehessenek. Lásd a képen a példát.
 

 
A kódok ezen a linken találhatóak:
 
G-Portál – CSS kódok használata G-Portálon – Eltérő idézetblokkok G-Portálon


948 megtekintés