2017. 11. 27.Coppermine | Egérre felugró ablak tartalmának megváltoztatása
2017. 11. 26.GIF készítése egy pillanat alatt
2017. 11. 26.FREE theme | Dakota Johnson WordPress theme
2017. 11. 25.WordPress alapvető használata
2017. 11. 24.Ingyenes | Eliza Taylor G-Portálos téma
009.png

Eliza Taylor

001.png

Little Mix

040.png

Gal Gadot

008.png

Girls' Generation

Háttérképek bejegyzésekhez blog modulban
773 megtekintés

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




Előző, következő cikk



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

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