Cikkajánló
Kaptam egy tippet e-mailben, hogy miről írhatnék még cikket. A felbontásbarát kinézetekről. Pontosabban annak hiányáról fog szólni a cikk, hogy a mai 21. században, amikor a netet böngészők 80%-ának
Sikeresen összedobtam még egy G-Portálos témát, mert most egy pár napig nem nagyon leszek elérhető sajnos. Gondolkodtam, hogy fizetős legyen-e, de aztán a francokat :D Használjátok egészséggel! Azt eddig
Felkerült a legújabb kinézet az oldalra. Most Madonnát választottam a design-hoz, mert nagyon szeretem őt is. Őrá már tényleg azt lehet mondani, hogy egy sztár. Le a kalappal előtte,
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ó Apró tippek weboldal szerkesztőknek

Hoztam még egy .psd fejlécet és a hozzá gyűjtött .png képeket is feltöltöttem a galériába.
A fejléc a szokásos helyen tölthető le: PSD – Photoshop fejlécek
Itt pedig meg lehet tekinteni teljes nagyságában: megnézem
 
Emma Stone .png képek
 

     

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

2015. június. 03.

A változatosság kedvéért hoztam még egy .psd fejlécet, ami szintén ingyenes és letölthető ezen az oldalon: PSD – Photoshop fejlécek
Itt pedig meg lehet tekinteni teljes nagyságában: megnézem
A közeljövőben pedig ezek a frissítések várhatóak:
 

  • WordPress sablon (már félig készen van)
  • WordPress: saját készítésű sablonban beépített widgetek használata
  • Modulcímnek két színű aláhúzás CSS kóddal
  • Eltérő idézetblokk WordPressben a szélső és a fő modulokban
  • Cara Delevingne .png képek

 
Így hirtelen ennyi most a terv. Ha valamit még szeretnétek, de nincsen róla leírás jelezhetitek nyugodtan a Chat-ben vagy e-mail-ben is. :)

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

Még egy Photoshop formátumú fejléc :) A képek, amiket használtam a fejléc készítéséhez, fel lettek töltve a Galéria PNG képek kategóriájába is. Összesen 21 darab .png képet készítettem.
Ezen a linken pedig le tudjátok tölteni a fejlécet: PSD – Photoshop fejlécek
Itt pedig meg lehet tekinteni teljes nagyságában: megnézem

 

Taylor Swift .png képek

 

     

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

Elkészült egy újabb Photoshop formátumú fejléc :) A képek, amiket használtam a fejléc készítéséhez, fel lettek töltve a Galéria PNG képek kategóriájába is.
Ezen a linken tudjátok letölteni a fejlécet: PSD – Photoshop fejlécek
Itt pedig meg lehet tekinteni teljes nagyságában: megnézem

 

Katy Perry .png képek

 

     

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

8. rész

 
Ebben a részben a column_main azaz a G-Portálon lévő középső modullal ismerkedhettek meg. Lásd a cikk alatt a képen a középső világos színű modult. Ezt a modult teljesen át lehet alakítani úgy, hogy egy kicsit sem kell, hogy megegyezzen a szélső modul kinézetével. Minden, amit a középső modulba van (linkek, képek, idézetblokkok, stb.) teljesen eltérhet a szélső modulban lévő kinézetektől. De menjünk szépen sorban:
 
Középső modul színe elhelyezkedése: Ha ennek a modulnak adtok színt, akkor ezen kívül külön a középső modul modbody részének már nem kell háttérszínt is megadni.
 

.column_main {
background: #ffffff !important;
margin-top: 15px;
}

 
Középső modul modbody része, ami a CSS kódban így néz ki:
 
.column_main_td .module .modbody
Ha a sima .column_main résznél adtatok meg háttérszínt, akkor itt már nem kell. Ez a modul egyébként a középső modul tartalmi kinézete.
 

.column_main_td .module .modbody {
background: transparent;
font-family: Arial;
font-size: 13px;
color: #666666;
line-height: 20px;
text-align: justify;
}

 

Tovább olvasom

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

7. rész

 
Ebben a részben a column_side azaz a G-Portálon lévő szélső modullal ismerkedhettek meg. Lásd a cikk alatt a képen a szélső sötét színű modult. Ezt a modult teljesen át lehet alakítani úgy, hogy egy kicsit sem kell, hogy megegyezzen a középső tartalmi modul kinézetével. Minden, amit a szélső modulba tesztek (linkek, képek, idézetblokkok, stb.) teljesen eltérhet a középső modulban lévő kinézetektől. De menjünk szépen sorban:
 
Szélső modul színe, szélessége, elhelyezkedése: Ha ennek a modulnak adtok színt, akkor ezen kívül külön a szélső modul modbody részének már nem kell háttérszínt is megadni. Viszont, ha azt szeretnétek, hogy a szélső modulok ne egybe follyanak, hanem legyen a modulok között távolság, akkor itt ebben a kódban a background transparent legyen és a modbody részben kell háttérszínt megadni.
 

.column_side {
background: #272727 !important;
margin-top: 15px;
width: 384px;
}

 
Szélső modul modbody része, ami a CSS kódban így néz ki:
 
.column_side_td .module .modbody
Ha külön modulokat szeretnétek, akkor a háttérszínt itt adjátok meg. Ha a sima .column_side résznél adtatok meg háttérszínt, akkor itt már nem kell. Ez a modul egyébként a szélső modul tartalmi kinézete.
 

.column_side_td .module .modbody {
background: transparent;
font-family: Arial;
font-size: 13px;
color: #666666;
line-height: 20px;
text-align: justify;
text-shadow: 1px 1px 1px #171717;
}

 

Tovább olvasom

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

2015. május. 30.

Hoztam egy újabb G-Portálos kinézetet. Úgy látom a szavazás állásából, hogy a G-Portálos kinézeteket igénylitek a legtöbben :) De azért majd mást is hozok, de mivel volt már kérés, hogy hozzak egyszerűbb kinézetet is, így  most ez mellett döntöttem. A kinézethez csak CSS kód tartozik, amit itt (is) le tudtok tölteni: G-Portál – G-Portálos teljes kinézetek

 


megnézem // letöltöm

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

6. rész

 
Ebben a részben részletesen bemutatom a BlogPlusz CSS kódját. Idővel lehet, hogy majd frissíteni kell a cikket, mert a G-Portál is folyamatosan frissül, de jelenleg a CSS kód működik és csak a BlogPluszban :) A teljes kód a Tovább mögött olvasható el. A kód alatt pedig részletesebben a kódról.
 

 

Tovább olvasom

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

5. rész

 
Magyarul a sitebottom a szerkeszthető lábléc CSS kódrésze.
 
A .sitebottom használata
 

  • ha használsz CSS kódot, az a legcélszerűbb, ha ide illeszted be
  • egy modulsávos honlapot is létre tudsz hozni. A CSS kód ilyenkor is a fejléc moduljába kerül
  • bármilyen kódot betehetsz ide, ami az egész oldalra vonatkozó
  • ide jöhet pl. az oldal információk (adatvédelem, impresszum, oldaltérkép linkek, stb)
  • design-os kép az oldal aljára. Ebben az esetben a .sitebottom-ban célszerű megadni a szélesség-magasság értéket is. (width-height)

 

.sitebottom { /* lábléc */
background-color: #cccccc;
color: #000000;
font-family: Arial;
font-size: 15px;
}

 
Számtalan másra is biztosan alkalmazhatóak a modulok. Ezek csak pár példák. Ha ti tudtok mást is, ami még fontos lehet, szívesen fogadom ;)

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

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

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

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 052 megtekintés
Egyéb