Cikkajánló
Készítettem egy új modult a G-Portálon belül, ahova ezentúl teljes G-Portálos kinézetek kerülnek majd fel. Csak CSS témákat mostanában nem fogok már készíteni, mert nincsen hozzá kedvem. Ezért született
Kérésre hoztam egy újabb szövegdobozt, ahol ha a képre viszed az egeret, akkor jelenik meg az üdvözlő szöveg. De szöveg helyett más is lehet a doboz tartalma. Pl.:  
De most őszintén: bántottalak én valaha? Szóltam rólad bármikor is rosszat? Kibeszéltelek, szidtalak vagy mi a f*sz? Ki a fene vagy te, és mit képzelsz egyáltalán magadról, hogy csak
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
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
729 megtekintés

Hozzászólások