Cikkajánló
Mostanában nagy divat lett a dupla aláhúzás a modulfejlécekben. Minden aláhúzás más színű általában. A legtöbb helyen ezt .png képpel oldjátok meg, de simán CSS kóddal is meglehet csinálni,
Ez alatt a leírás alatt azt értem, mikor pl. a főoldalon egy adott kategóriára kattintotok, mert az érdekel, hogy milyen hírek, cikkek születtek már benne. Akkor is megjelenik egy
Igaz, mondhatni senki nem használja a címkéket a WordPress-ben, csak a kategóriákat. Pedig ennek a használatával pl. a Google keresőben még előrébb lehetne az oldal a találati listák között.
Prémium téma | Ellie Goulding G-Portálos téma WordPress | Bejegyzés nem jelenik meg a főoldalon Gal Gadot G-Portálos téma Emilia Clarke G-Portálos téma Cole Sprouse G-Portálos téma
Képes project szövegdoboz 16.

 

Ikon kódja

 

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

 

Szövegdoboz kódja
A perjel helyére mennek a linkek. (Hivatalos, Imdb, Képek, stb-nél)

 

<div id="box">
<div class="projects"><img src="IDE JÖN A KÉP URL CÍME" />
<div class="info">
<h1>Taylor Swift</h1>
<i class="fa fa-user" aria-hidden="true"></i> <b>Karaktere: Lorem ipsum</b><br>
<i class="fa fa-calendar" aria-hidden="true"></i> <b>Évad: Lorem ipsum</b><br>
<i class="fa fa-television" aria-hidden="true"></i> <b>TV csatorna: Lorem ipsum</b><br>
IDE JÖN A SZÖVEG
<br>
<center><a class="project-link" href="/"><i class="fa fa-info-circle" aria-hidden="true"></i> IMDB</a> <a class="project-link" href="/" target="_blank"><i class="fa fa-check-circle" aria-hidden="true"></i> Hivatalos</a> <a class="project-link" href="/" target="_blank"><i class="fa fa-picture-o" aria-hidden="true"></i> Képek</a></center>
</div>
</div>
</div>

 

CSS kód

 

<style>
#box {
margin: 0px auto;
width: 350px;
}
.projects img {
padding:0px;
}
.projects .info h1 {
padding: 0 0 10px 0;
text-align: center;
color: #C26C45 !important;
background: transparent !important;
}
.projects .info {
width: 310px;
font-size: 12px;
line-height: 18px !important;
text-alig: justify;
background:#F8F8F8!important;
border: 1px solid #E6E3E3;
padding:10px;
padding-bottom: 10px;
position: relative;
margin-left: 10px;
margin-top: -100px;
}
.projects .info .fa, .projects .info .project-link .fa {
margin-right:4px;
font-size:11px !important;
color:#C26C45 !important;
font-style: normal !important;
}
a.project-link:link, a.project-link:visited { /* linkek a doboz alatt */
background: #FEEEE7 !important;
color: #995233 !important;
padding: 8px 0 8px 0;
margin: 1px;
font-family: Arial;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
border-bottom: 3px solid #EAAF84;
line-height: 10px;
display: inline-block;
width: 90px;
}
a.project-link:hover {
background: #E3E3E3 !important;
color: #C26C45 !important;
text-decoration: none;
border-bottom: 3px solid #5E5F61;
}
</style>

lindadesign Hozzászólások
1 040 megtekintés

Hozzászólások