Cikkajánló
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
A napokban volt egy kevéske időm, így hoztam a listámról egy jó pár leírást és kódot. A listámon mindig van valami csak időm nem mindig van, hogy megosszam veletek.
Még egy Photoshop formátumú fejléc :) A képek, amiket használtam a fejléc készítéséhez, fel lettek töltve a Galéria PNG képek kategóriájába is. Összesen 21 darab .png képet készítettem. Ezen
Prémium téma | Zendaya Coleman G-Portálos téma 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
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
178 megtekintés

Hozzászólások