Veletek is gyakran előfordul, hogy a kiemelt képre szeretnétek rakni a címet, de mivel nem tudjátok hogy kell, magára a képre szerkesztitek rá, majd ez zavaróvá válik az egyes design cserék után? Emiatt nem kell aggódnotok, hiszen megérkezett a segítség. Egyébként egy kis egyszerű trükkel könnyen orvosolható ez a probléma. A cím kiemelt képre való helyezésével sok helyet megspórolhattok, ráadásul még jól is néz ki. Akkor nézzük, hogyan oldhatjuk meg a dolgot.

 

Most a következő módon fogjuk elkészíteni a dolog megoldását, mint ahogy Iggy-s oldalamon is láthatjátok: a cím a kép alján lesz.

Először is, nyissuk meg az index.php fájlunkat, és abba illesszük be a kódot a következőképpen: (a kód tartalmazza a kiemelt kép fölött megjelenő adatok mezőt is, de természetesen ezt bárhova máshova helyezhetitek.)

<div class="modul">
<div class="datas"><?php the_time('Y. m. d. H:i') ?> by: Brielle, Kategória: <?php the_category(', ') ?></div>
<div class="thumb" align="center">
<div class="newstitle" align="center"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<?php the_post_thumbnail(); ?></div>
<div class="middle2"><?php the_content ('<div class="readmore" align="right" >Tovább >> </div>'); ?>
</div>
</div>
</div>

A kódban kiemelt rész fogja jelenteni a címet. Ugyanis ezt a kódot pontosan a kiemelt kép beillesztési kódja elé kell rakni, hogy a képre kerüljön. Fontos! Valamint láthatjátok azt is, hogy a címemet a CSS-ben “newstitle”-nek fogom elnevezni. Ugyanis most fog következni a CSS megformálása, melynek hasonló lesz a kódja:

.newstitle{
background: url(images/newstitle.png);
font-size: 18px;
text-transform: uppercase;
padding-top: 10px;
text-align: left;
padding-left: 30px;
width: 620px;
margin-left: 25px;
height: 32px;
font-family: calibri;
position: absolute;
margin-top: 190px;
}

A kiemelt sorokat máris magyarázom. Először is, a legfontosabb a következő kód lesz. Hiszen ezzel a kóddal fog a címed a kiemelt képre kerülni. Ne hagyjátok ki, enélkül nem működik a dolog.

position: abosolute;

Aztán jönnek a margin sorok, ami magának a címnek adja meg az elhelyezkedését, vagyis hogy hol helyezkedjen el a kiemelt képen. margin-top-pal a felülről való távolságot, margin-left-el pedig a baloldalról való távolságot adhatod meg. Fontos dolog, hogy ehhez szintén add meg magának a címnek a nagyságát, tehát a dobozt, amiben elhelyezkedi width és height értékekkel a mintakód szerint.

margin-top: px;
margin-left: px;

A paddingokkal pedig a címnek magában a dobozában való elhelyezkedését adhatod meg a margin módszere szerint.

padding-top: px;
padding-left: px;

Összesen ennyi dolgot kell megadnod ahhoz, hogy a címed a kiemelt képre kerüljön. Ez egy nagyon egyszerű dolog, és sokféleképpen lehet variálni, például a kiemelt képre az adatokat is ráteheted a címmel együtt. A lényeg, hogy próbáld megoldani a dolgot, és ne félj attól sem, ha esetleg nem sikerül. A leírás szerint próbálkozz, és akkor sikerülni fog :)


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *