Cikkajánló
A Bővebben link átnevezését már elég sokan tudjátok, nem is ez a legfontosabb része ennek a cikknek. Inkább arról van szó, ahogy az ikont használjátok előtte. Mindenhol úgy látom,
9. rész   Hoztam egy újabb G-Portálos CSS kódot. Ez még meleg, olyan új :) Igaz, hogy írtam már egy olyan CSS kódról, amivel a hozzászólásokat lehet átalakítani, de
Kérdeztétek már jó sokan, hogy van-e rá valami megoldás, hogy KrazyJokes, Chazz és hasonló nevű egyének vagy robotok (ki tudja), ne firkálják tele a Chat-et. A válasz pedig, hogy
Emma Roberts G-Portálos téma 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
Friss hírek vagy cikkajánló elé ikonok

Most azt írom le, amit a képen is láttok. Hogyan kerülhet a friss hírek elé ikon, ami manapság nagyon népszerű mindenki körében. Mármint az ikonok :) Én a cikkajánlóm kódjával mutatom ezt be, de ez a lényegen nem változtat. Ugyanez az eljárás, ha a legfrissebb hírek elé szeretnétek ikonokat.

 

 

Ha még nem használtatok ikonokat, akkor ezt a kódot is be kell másolnotok az oldalatokra a header.php fájlba.

 

<script src="https://use.fontawesome.com/9f3339f954.js"></script>

 

A cikkajánlóm kódja ez lenne. Kiemeltem a fontos részt benne. Ezzel hivatkozunk ugyebár a CSS-ben a kinézetére.

 

<?php
$args = array( 'numberposts' => 5, 'orderby' => 'rand', 'post_status' => 'publish', 'offset' => 1);
$rand_posts = get_posts( $args );
foreach( $rand_posts as $post ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="random_post"><?php the_title(); ?></a>
<?php //the_excerpt(); ?></p>
</p>
<?php endforeach; ?>

 

Ez meg a hozzá tartozó CSS kód. Ahol szintén kiemeltem a lényegeket.

 

a.random_post {
display: block;
width: 335px;
font-family: 'Arimo', sans-serif;
font-size: 12px;
line-height: 16px;
text-align: left;
color: #5E6B79 !important;
background: transparent;
padding: 6px 0 6px 25px;
border-bottom: 1px solid #D3D3D3;
text-decoration: none !important;
-webkit-transition: .5s ease-in;
-moz-transition: .5s ease-in;
-o-transition: .5s ease-in;
}
a.random_post:before { /* ez a rész felel az ikonért és elhelyezkedéséért */
color: #000000;
font-size: 15px;
font-weight: normal !important;
font-style: normal !important;
font-family: FontAwesome; /* ikon betűtípus */
content: "\f0c1"; /* a kiválasztott ikon Unicode kódja */
margin: 0px 0px 0px -20px !important; /* ikon elhelyezkedése */
position: absolute;  /* ez marad */
}
a.random_post:hover {
text-decoration: none !important;
color: #DABA9B !important;
}

 

A kód, amit a content-hez kell írni, az megtalálható ezen az oldalon az aktuális kód kiválasztása után.

lindadesign Hozzászólások
161 megtekintés

Hozzászólások