Cikkajánló
Hoztam egy hozzászólás űrlapot a WordPress használóknak :) Ha unnátok az alap űrlapot, akkor cseréljétek le erre. Kicsivel több mindent tud. Lehet avatart beállítani, nekem kinézetre is szimpatikusabb, és
Mostanában egy csomó dolgot át akarok változtatni a galériában, így mindig vannak új ötleteim, amiről írhatok :) Ez is egy olyan dolog, ami már hosszú ideje idegesített, csak eddig
Általában soha nem szoktam a véleményemet leírni, vagy kimondani, ha nem muszáj, mert túl őszinte vagyok, és vannak olyan emberek, akik nagyon nehezen viselik az igazságot. Vagyis általában a
Sosugary Gallery | Jennifer Lawrence téma 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ó
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
764 megtekintés

Hozzászólások