Cikkajánló
Valamivel meg kell tölteni a főoldal bejegyzéseit, hogy ne legyen olyan üres, amíg vissza nem térek a frissítésekhez, így leírok pár dolgot, hogy mik változtak most, hogy új oldalon
Elérkeztünk a Honlapverseny első fordulójának a végéhez. Itt azokra a honlapokra lehetett szavazni, akik nem kerültek be az első 10 közé, ami már csak 9, mert azóta egy oldal
Új szavazást készítettem, amit már ki is tettem az oldalsávba de itt ebben a modulban is lehet szavazni. Azért írok róla külön bejegyzést is, mert nagyon kíváncsi vagyok a
Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló

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 ;)

lindadesign Hozzászólások
1 054 megtekintés
Egyéb

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 olvasom

lindadesign Hozzászólások
1 351 megtekintés
Egyéb

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 olvasom

lindadesign Hozzászólások
1 780 megtekintés
Egyéb

2015. május. 08.

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.

lindadesign Hozzászólások
854 megtekintés

2015. május. 01.

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

 

      

lindadesign Hozzászólások
852 megtekintés

2015. május. 01.

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

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

2015. április. 26.

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

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

Ú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

 

     

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

2015. április. 25.

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

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

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

lindadesign Hozzászólások
860 megtekintés

2015. április. 19.

Készítettem egy új modult a G-Portálon belül, ahova ezentúl teljes G-Portálos kinézetek kerülnek majd fel. Csak CSS témákat mostanában nem fogok már készíteni, mert nincsen hozzá kedvem. Ezért született meg ez a modul. Valahogy több kedvem van olyan kinézeteket készíteni, ami nem csak fél munka. A CSS kód kinézeteknél mindig azt éreztem, hogy az csak fél meló. Meg azért is készítek inkább teljes kinézeteket G-Portálra, hogy ne jöjjek ki a gyakorlatból, mivel most már ugye sokkal kevesebbet használom a GP-t. 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

 


megnézem // letöltöm

lindadesign Hozzászólások
947 megtekintés