Cikkajánló
Leírom, hogy én hogyan szoktam telepíteni és használni egy WordPress bővítményt. Meg kell jegyeznem, hogy ezt ÉN szoktam így, biztos van olyan emberke, akik ezt máshogy oldják meg, mert
Kettő darab WordPress téma került feltöltésre az oldalra. Egyelőre nincs is több, de majd ha időm engedi, akkor készítek még párat. Én inkább a letisztult kinézeteket kedvelem, szóval abból
Kellemes estét :) Hoztam mára még négyféle project szövegdobozt és kilencféle elit csere ikon effektet. Az összes egyesével megnézhető az alábbi linkeken. Válogassatok :) A project dobozoknál és az
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
Oldal info szövegdoboz 3.

 

Oldal info szövegdoboz kódja

 

<div class="infobox-doboz">
<div class="infobox">
<div class="sorok">
<div class="lista"><i class="fa fa-info-circle" aria-hidden="true"></i> Lorem ipsum dolor</div>
<div class="lista"><i class="fa fa-info-circle" aria-hidden="true"></i> Lorem ipsum dolor</div>
</div>
<div class="sorok">
<div class="lista"><i class="fa fa-info-circle" aria-hidden="true"></i> Lorem ipsum dolor</div>
<div class="lista"><i class="fa fa-info-circle" aria-hidden="true"></i> Lorem ipsum dolor</div>
</div>
<div class="sorok">
<div class="lista"><i class="fa fa-info-circle" aria-hidden="true"></i> Lorem ipsum dolor</div>
<div class="lista"><i class="fa fa-info-circle" aria-hidden="true"></i> Lorem ipsum dolor</div>
</div>
</div>
</div>
<div class="info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

 

CSS kód

 

/* oldal info doboz */
.infobox-doboz {
display: table;
width: 100%;
border-collapse: separate;
border-spacing: 3px;
}
.sorok {
display: table-row;
}
.lista .fa { /* ikon kinézete */
font-size:14px !important;
color:#000000 !important;
font-style: normal !important;
}
.lista { /* felsorolás kinézete */
border: 1px solid #dbdbdb;
display: table-cell;
padding: 6px 10px;
}
.info { /* leírás kinézete */
font-size: 13px;
padding: 6px;
}
.infobox {
display: table-row-group;
}

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

Hozzászólások