Cikkajánló
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
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).
Ú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
Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák Maisie Williams G-Portálos téma
2016. május. 07.
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

Kapcsolódó bejegyzések

lindadesign
645 megtekintés

Előző, következő cikk

.png képek a galériában – 284 darab

Nagyon-nagyon régen nem hoztam érdemi frisst (most sem fogok sajnos), de azért legalább a .png képeket feltöltöttem már a galériába, amiket készítettem egy ideje. Összeszoktam várni őket, hogy több legyen, mire feltöltöm mindet. Most elég sokat vártam velük, így

Új design és három képváltó kód

Hat hónap után végre kicsit felfrissítettem az oldalam kinézetét. Eltartott egy darabig mire megálmodtam, hogy hogyan nézzen ki. Eléggé egyszerűre sikeredett, de nekem tetszik. Ez által megismertem kettő darab új bővítményt WordPress-hez, amiket hamarosan megmutatok nektek is. Jobban szeretek

 

Hozzászólások