közösségi élmény

ad (x) (9)
ajánló (657)
aszerk (26)
blogkonyv (1)
Blogszerda (15)
buli (5)
csapat (75)
gépház (39)
Golden Blog (11)
helpdesk (9)
info (52)
interjú (0)
játék (42)
közös (6)
kult (4)
kvíz (1)
marketing (8)
mozi (9)
pályázat (4)
sport (2)
tematikus (10)
tuning (7)
vegyes (1)
Blogroll
Szerző: anyu(ha)
Kategóriák: helpdesk , tuning
 
2010. november 27. 01:38

A pillangós gyári sablon aprólékos szöszmögéssel ugyanúgy a felismerhetetlenségig alakítható, mint az összes többi sablon, de már egészen kevés változtatással is egyedi kinézethez juthatunk, ehhez három ötlet.

1.  Egyszerű képcsere

Nem könnyű feladat megfelelő háttérképet találni a 923x306 pixeles pillangó helyett. Ha megvan a kép (megtaláltuk vagy megcsináltuk vagy megkaptuk karácsonyra ajándékba), akkor a Sablon - Kinézet menüpontnak a Háttérkép rovatában a Választok gombra kattintunk, majd a megjelenő Képizélő ablakban a Feltölt gombra, a Tallózás részben kiválasztjuk a gépünkről a képet, aztán Feltöltöm gomb. Kattintás a Befejeztem gombra, jó eséllyel középre és felülre kell igazítani, ismétlés nélkül, végül Mentés.

Példa: Jeffrey Hsu "Tired-Sketch" című képét a flickr.com-ról letöltöttem, blogszélességűre nyújtottam, abból lett a szép új háttérkép.

2. Komplikált képcsere

A Sablon - Kinézet menüpont legérdekesebb része az Egyebek rovat, ahol Egyéni CSS megadásával felülírhatók a formázások, még a felette lévő adatok is. Ha például az Egyéni CSS-ben piros színt rendelünk a háttérhez, akkor a Háttérszín rovatban hiába választunk zöld színt az eredeti fehér helyett, a háttér piros lesz.

Amit a Kinézet menüben művelünk, az olyan, mintha a CSS nevű sablondarab végére írnánk újabb és újabb sorokat. Elrontani nem tudjuk vele a sablont, legfeljebb ronda lesz. Reménytelen esetekben katt a Gyári kinézet gombra, Mentés, és visszakapjuk az eredeti pillangót.

Példa: Jelene Morris, Easter egg mobile, tök aranyos kép, hozzáillő úttal kiegészítve pont jó lesz sablonnak:

Az a kis probléma van vele, hogy az utat csak keresztben kell ismételni, ilyen lehetőség nincs a háttérkép menüpontban, a nyulat pedig nincs hová kiválasztani. Azt választottam ezért, hogy ne legyen háttérkép, aztán bemásoltam az egyéni CSS-t, ahol a csíkos háttérkép felülre és középre van igazítva, keresztben ismétlődik a képernyő teljes szélességében, az átlátszó hátterű nyuszi a blog tartalmi részének a hátterében van, a blog szélétől balra 0 pixel, felülről 30 pixel távolságra, és nem ismétlődik. A következő kódot kell bemásolni az Egyéni CSS kis ablakába:

body {
background: url("http://kinezet.freeblog.hu/files/pillangos/nyuszibody.jpg") top center repeat-x;
}

#container {
background: url("http://kinezet.freeblog.hu/files/pillangos/nyuszikontener.gif") 0 30px no-repeat;
}

Természetesen az idézőjelek közé bármilyen más megfelelő kép elérési útja is beírható.

3. Egyéni CSS, és még képcsere is

Ez a példa is nagyon óvatos piszkálgatás, csak néhány tulajdonság változik:

pillangós sablon átalakítva

Mamjodh csodás margarétája szétlapítva, kettévágva és elhalványítva került a blog tetejére. Háttérkép nincs, Háttérszín: #fafafa (halványszürke), a többi hozzávaló az Egyéni CSS-ben található. Sorban:

  • A blog tartalmi részében a háttérszín fehér, háttérkép a margarétás kép, nem ismétlődik, és felülre középre igazodik, az újabb böngészőkben halványszürke árnyék látható körülötte, és a teteje 5 pixellel lelóg a képernyőről, vagyis a felső árnyék nem látszik.
  • A fejléc magassága összébb ment, csak 150 pixel, így feljebb került a menü és a bejegyzés oszlopa.
  • A bejegyzés és a menü oszlopa a blog szélétől beljebb került (az eredeti sablonban minden fehér, így nincs jelentőségük a margóknak).
  • A kis RSS-négyzet nem látszik, úgyis ott van a menüben az RSS.
  • A blog címe és az alcíme kikerült baloldalra.
  • A blog címe 36 pixel méretű, felül 70 pixelnyi távolságra van a saját szélétől.
  • Az alcím betűmérete 1,1-szeres, felülről 20 pixel távolságra a képzeletbeli keretétől.
  • A láblécben egy technikai törlés van, hogy a fehér háttérszín mindenképpen leérjen a blog aljáig.

Bemásolandó kódhalmaz:

#container {
background: #fff url("http://kinezet.freeblog.hu/files/pillangos/margaretahead.jpg") no-repeat top center;
-moz-box-shadow: 0 0 5px 5px #eee;
-webkit-box-shadow: 0 0 5px 5px#eee;
box-shadow: 0 0 5px 5px #eee;
margin-top: -5px;
}

.epres #fejlec {
height: 150px;
}

.epres #jobb {
margin-left: 230px;
margin-right: 20px;
}

.epres #sidebar {
width: 200px;
padding-left: 20px;
padding-right: 10px;
}

#rsskep_fent {
display: none;
}

.epres #fejlec h1, #blogleiras {
padding-left: 20px;
}

.epres #fejlec h1 {
padding-top: 70px;
font-size: 36px;
}

#blogleiras {
padding-top: 20px;
font-size: 1.1em;
}

.epres #lablec {
clear: both;
}

A máshonnan származó képet ne felejtsük el kilinkelni a menüben.



Hozzászólások
Eddig 4 hozzászólás érkezett.


1. Marigold

Biztos, hogy tökéletesen béna vagyok.. vagy vaksi.. nem tudom. Mindenesetre én már ott elakadok, hogy nem találom a "Sablon" után a kinézetet pl... Leírná légyszi valaki, hogy hol találom? Köszi.. :-)

2. Marigold

Persze, sikerült... :-))

3. PusiKat

Köszönöm, nagy segítség vagy.:))Most kezdtem a blogolást, és egyenlőre nagyon nehezen megy.Na nem az, hogy mit írjak, mert ötletem az van száz.
A technikai része. Szeretném egyénibbé tenni. Pl. legyen egy főoldal, ott lehessen látni a cikkek főbb címeit, egy kis részlete, aztán legyen ott a "tovább" jelzés, ami átviszi az olvasót egy másik oldalra ahol az irományom teljes egészében látható..Legyenek menüpontok. pl. bejegyzések, kapcsolat. Ha lenne kedved segíteni annak nagyon örülnék. Szeretnék egy vagy több:)) jó kis forgalmas blogokat, honlapot csinálni. Időm van rengeteg, csak tudásom nincs hozzá. :((

4. anyu(ha)

Én is így kezdtem (helyszínen dokumentálva), időm rengeteg volt, tudásom nulla. Mára ez gyökeresen megváltozott, sokkal több tudásom van, mint időm (ez persze nem azt jelenti, hogy időközben nagy tudásra tettem szert). Azért a válasz belefér:
Most is olyan a blogod, hogy van egy főoldala, és van többféle aloldala. Ha a szerkesztőben az ikonok közül a fordított P betűre kattintasz, akkor egy vonallal kettévágod a szöveget, és csak a vonal feletti rész marad a főoldalon, a többi szövegért az "elolvasom" linkre kell kattintani. Kattintás után csak az az egy bejegyzés fog látszódni a hozzá tartozó kommentekkel.
A menüpontokat a "Sablon - Dobozok" menüben tudod létrehozni, kiválasztod a megfelelő dobozt, és csak simán áthúzod a jobboldali részbe a meglévőek közé.

Csak bejelentkezett felhasználók szólhatnak hozzá a bejegyzéshez.