Cikkajánló
Joseph Morgan Matthew Goode Norman Reedus Ian Fansite Selena Gomez Miley Cyrus Ashley Tisdale Demi Lovato   Hoztam még ötféle képeffektet, amit nagyon jól lehet használni elit cseréknél (is).
Az én oldalamon is lehet látni a kategóriák sorában, hogy mennyien tekintettek meg már egy adott cikket vagy oldalt. Erről a bővítményről írok pár sort, mert többet nem is
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,
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
Háttérképek bejegyzésekhez blog modulban

Igazából nevezhetnénk ezt is Kiemelt képnek a blog modulban, de mivel a beállításai eltérőek és itt pont arra mentem rá, hogy háttérképeket jelenítsünk meg, aminek nem számít a kép mérete (annyira), így lett Háttérképek bejegyzések fölé blog modulban. A kiemelt képes leíráshoz képest sok mindenben eltér ez a tutorial. Először is tényleg háttérképeket használunk és nem kell őket méretezni a blog modulhoz, másrészt a háttérképeket CSS kóddal állítjuk be tökéletesre. Már persze kinek mi a tökéletes… Szerintem nagyon jól feldob egy blogot vagy egy rajongói oldalt is ez az eljárás. Nekem egyszerűnek tűnik a beállítása, de lehet nektek első olvasása kicsit bonyolult lesz majd. A teljes CSS témát a cikk alatt le tudjátok tölteni. Persze a képek nem fognak megjelenni a portálotokon, csak ha a CSS kódban beírjátok a ti képeitek URL címét majd ;)

 

Ami miatt még ezt a fajta leírást inkább ajánlom az előzőhöz képest, az-az, hogy ha például megunjátok a kiemelt képeket akkor mindegyik bejegyzésből egy pillanat alatt el lehet tüntetni azokat, mert a CSS kódban lesznek az elérési útjaik és ha ott törlitek, akkor mindenhonnan el is fognak tűnni :)

 

 

Az első lépés az legyen, hogy a kiválasztott háttérképeket töltsétek fel a portálotok Képtárába vagy a G-PorTÁR-ba, ha a képtár esetleg nem engedné a mérete miatt. Javaslom, hogy tényleg a portálotok tárhelyére töltsétek fel a képeket, és ne külső tárhelyre. Csak magatoknak lesz kényelmesebb így hosszú távon. A feltöltött képeknek kellenek majd az URL címei, amiket a CSS kódban fogunk megadni, ugyanúgy, mint mikor valamilyen modulnak háttérképet állítotok be. Ha nem tudjátok mi az az URL cím, akkor olvassátok el ezt a cikket: URL cím értelmezése

 

Második lépésben tételezzük fel, hogy mindenkinek van már bejegyzése a blog moduljában. Próbaként valamelyiket válasszátok ki és vigyétek az egeret a címre. Nem kell rákattintani, csak vigyétek az egeret fölé. Böngészőtől függően elvileg a lap alján megjelenik az adott blogbejegyzés URL címe. Az utolsó 7 számjegyre lesz most szükségünk ehhez. Írjátok fel, jegyezzétek meg vagy bármi. Ez után pedig a CSS kódban dolgozunk tovább.

 

 

Azt már ismeritek, hogy a CSS kódban a blogcím CSS-e ez:

 

div[id*="post_"] h2, div[id*="post_"] h2:hover {  /*  blog címének kinézete */
background: #000000;
font-family: Arial;
font-size: 15px!important;
text-align: center;
margin-bottom: 30px !important;
}

 

Ezt egy kicsit módosítjuk úgy, hogy a kiválasztott háttérképetek csak ennél a bejegyzésnél fog megjelenni, a többinél nem. Most lesz szükség arra a 7 számjegyre, amit az előbb megnéztünk.
A div[id*=”post_ után be kell írni a hét karakteres számjegyet. Vigyázzatok!!! Az alul vonás maradjon meg!!! És innentől fogva csak a kiválasztott bejegyzésre fog hatni a cím.

 

div[id*="post_1295874"] h2, div[id*="post_1295874"] h2:hover {  /*  blog címének kinézete */
background: url(ide jön a háttérkép URL címe); /* ide jön a háttérkép URL címe */
background-repeat: no-repeat;
background-position: center center; /* háttérkép pozíciójának beállítása */
height: 300px; /* a kép magassága */
font-size: 0px!important; /* letiltjuk a címet */
}

 

A háttérkép pozícióját sokféleképpen be lehet állítani. Erről példát itt találtok.

 

A CSS kódotok értelemszerűen mindig bővül ezekkel a sorokkal, ahol csak a 7 számjegy változik meg. Így minden bejegyzéshez más-más hátteret lehet hozzáadni :)

 

A címet ugyebár letiltottuk, így a blog címe nem olvasható jelenleg. A blog címét az Alcím helyére is be kellene írnotok és az alcím CSS kódjával igazítani azt. Lehet a kép fölött, alatt vagy akár a képen is a cím.

 

div[id*="post_"] .txtbold {  /*  blog alcíme, jelen esetben a blog címe */
font-family: Arial;
color: #000000;
font-size: 30px;
text-align: center !important;
width: 800px; /* a szélessége a középső modul szélességének értéke legyen. */
background: transparent;
font-weight: normal !important;
font-style: normal !important;
text-transform: uppercase;
border: 0px;
margin: 70px 0 30px 0 !important;
}

 

Nagyjából ennyi az egész. Egyáltalán nem bonyolult és ezzel együtt is, mint a többi CSS-sel akár egyedivé is tehetitek az oldalatokat :)

 

CSS téma letöltése

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

Hozzászólások