Cikkajánló
A mai napra végre sikeresen bekódoltam kettő darab G-portálra való blogos kinézetet. Előre már vannak készen kinézetek, amiket elképzelek, csak a bekódolásuk várat magára, mert nem mindig van rá
Hoztam kettő darab WordPress-es leírást,  ahogy a címből is kiderül. Mind a kettő a kiemelt képekkel kapcsolatos és mind a kettő eléggé hasznos is szerintem.   1. leírás: Kiemelt képek
Ez is egy olyan szövegdoboz, ha a képre viszed az egeret, akkor jelenik meg a benne lévő tartalom, ami lehet üdvözlő szöveg, Chat, Facebook doboz, stb. Annyi hátránya van
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
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
925 megtekintés

Hozzászólások