Cikkajánló
Joseph Morgan Matthew Goode Norman Reedus Ian Fansite Selena Gomez Miley Cyrus Fansite Ashley Tisdale Demi Lovato Fansite   Hoztam egy képeffektet, amit például nagyon jól lehet használni elit
Hoztam még kettő darab Sosugary galéria témát, hogy ne csak egy darabból tudjatok válogatni, hanem mindjárt háromból :) A CSS kód átírása egyébként nagyon egyszerű. Kiírtam minden fontos kód
Sosugary galériához készítettem egy sablont, ami szabadon felhasználható :) Beyoncé díszeleg rajta, de a fejlécet módosíthatjátok nyugodtan. A teljes témát monicandesign készítette. Én csak módosítottam a CSS kódját. A
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
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
140 megtekintés

Hozzászólások