skip to Main Content

Lav og indsæt en "CSS-class"

Hvis du vil have 99% styr på det visuelle udtryk i WordPress, så skal du style i CSS!

CSS er en forkortelse for Cascading Style Sheet, på dansk ofte oversat til "typografi-ark".

Men du kan styre meget andet end typografi via CSS!

I det følgende viser vi eksempel på, hvordan du opretter din egen "class-selector" og efterfølgende bruger den.

De indledende trin

Opret et "Child Stylesheet"
Inden du går igang med at style i CSS skal du have et "Child Theme".

Nogle temaer har et indbygget Child Theme. Hvis ikke så kan du oprette et child theme med det gratis plugin Orbisius Child Theme Creator. Se guide!

childtheme
find-stylesheet

Åbn dit Child Theme
Klik på Udseende | Editor.

STYLE LØS!

TRIN-FOR-TRIN eksempel

GRÅ RAMME

.graaramme{

 }

GRÅ RAMME

.graaramme{
    text-align: center;
 }

GRÅ RAMME

.graaramme{
    text-align: center;
    font-size: 55px;
 }

GRÅ RAMME

.graaramme{
    text-align: center;
    font-size: 55px;
    font-family: 'impact', sans-serif;
 }

GRÅ RAMME

.graaramme{
    text-align: center;
    font-size: 55px;
    font-family: 'impact', sans-serif;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
 }

GRÅ RAMME

.graaramme{
    text-align: center;
    font-size: 55px;
    font-family: 'impact', sans-serif;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
    color: white;
 }

GRÅ RAMME

.graaramme{
    text-align: center;
    font-size: 55px;
    font-family: 'impact', sans-serif;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
    color: white;
    background-color: #ccc;
 }

GRÅ RAMME

.graaramme{
    text-align: center;
    font-size: 55px;
    font-family: 'impact', sans-serif;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
    color: white;
    background-color: #ccc;
    border: 5px solid grey;
 }

GRÅ RAMME

.graaramme{
    text-align: center;
    font-size: 55px;
    font-family: 'impact', sans-serif;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
    color: white;
    background-color: #ccc;
    border: 5px solid grey;
    border-radius: 10px 10px 10px 10px;    
 }

GRÅ RAMME

.graaramme{
    text-align: center;
    font-size: 55px;
    font-family: 'impact', sans-serif;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
    color: white;
    background-color: #ccc;
    border: 5px solid grey;
    border-radius: 10px 10px 10px 10px;  
    padding: 10px;  
 }

Start med at bygge skelettet:

punktum | CSS klassens navn | Tuborg-klamme START | Tuborg-klamme SLUT

Vi skriver den første property og value ind:

property (text-align) | kolon | value (center) | semicolon

.class-selector {
    property: value(s);
}

Vi har lavet en masse css-eksempler, hvorfra du kan kopiere "property" og "value(s)", og teste dem i dit eget stylesheet:

frustration

Det virker IKKE!!!

Tjek at skelettet er bygget rigtig op.
Hvis du fx glemmer at afslutte med et simikolon, så går det i fisk!

Der er ingen regler for, hvor "pænt" dit stylesheet er bygget op.
Du behøver ikke at lave linjeskift efter et aflutnings-simikolon, men det hjælper på overskueligheden, – især når man skal finde fejl!!!

Kommentarer i stylesheet:

/* Dette er en kommentar */

Alt der står imellem /* og */ bliver sprunget over af browseren.

Du kan også bruge kommentar-indramningen til at deaktivere CSS.

Eksempel:

.klasse{
/*border: 1px solid black; --- border er deaktiveret*/
padding: 20px
}

Indsæt klassen .mingraaramme

I tekst-editoren/ fanen TEKST

texteditor-tekst

I tekst-editor: Klik på fanen Tekst.

Herefter skal du "hånd-kode" en lille smule.

Fælles for de tre eksempler herunder er, at klassen "mingraaramme" tilføjes ved at skrive: class= "mingraaramme"

h2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

SPAN Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

DIV

Lorem ipsum

Fanen Tekst:

<h2 class="mingraaramme">H2</h2>Lorem ipsum

Her har vi tilføjet klassen "mingraaramme" på et "standard HTML-element": h2 (Overskrift 2).
I "master style sheetet" har h2 nogle egenskaber der nedarves: fx er der margin i toppen af h2.

Mellem <h2> og <p>teksten "Lorem ipsum" er der automatisk et linjeskift, hvorfor "Lorem ipsum"  er på en ny linje.

Fanen Tekst:

<span class="mingraaramme">SPAN</span> lorem ipsum

Et <span> er ligesom når du med TinyMCE (formaterings-knapperne i WordPress' tekst-editor) klikker på fx knapperne fedkursiv, og så bliver den markerede tekst sat med fed kursiv.

<span> forholder sig også til nedarvede de egenskaber fra "master stylesheetet", og er i eksemplet herover "bare en brødtekst", der så klasker uskønt sammen med med klassen mingraaramme.

Fanen Tekst:

<div class="mingraaramme">DIV</div>Lorem ipsum

En <div> er en ramme selvstændig ramme, hvor man kan bestemme fx højde/bredde og hvordan den skal forholde sig til øvrige elementer.

Se eksempeler herunder:

<div>eksempler

DIV

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

DIV

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

DIV

Lorem ipsum: centreret div

<div class="mingraaramme" style="width: 110px; height: 110px; float: left; margin-right: 10px;">DIV</div>Lorem ipsum
<div class="mingraaramme" style="width: 110px; height: 110px; float: right; margin-left: 10px;">DIV</div>
Lorem ipsum
<div class="mingraaramme" style="width: 110px; height: 110px; margin: 0px auto 10px auto;">DIV</div>
Lorem ipsum: centreret div

I frontend-redigeringsplugin Visual Composer (Themify Builder etc.)

Bruger du frontend-redigeringsplugins kan du - uden håndkode - tilknytte din klasse til enten et helt Row, en Column eller en Text Block.
Eksemplet herunder er fra Visual Composer.

vc-row-column-textblok
css-VisualEditor-row-settings

Det eneste du skal gøre er, at skrive navnet på din class i feltet Extra class name.

EKSEMPLER til at eksperimentere videre med:

Neonagtig

lorem ipsum

Kopiér til tekst-editor, fanen Tekst:

<div class="neon">
<h2>Neonagtig</h2>
lorem ipsum
</div>

Kopiér til style sheet:

.neon p{
 text-align: center; 
 font-family: 'impact', sans-serif;
 font-size: 2em;
 letter-spacing: 1em;
 color: lightgrey;
}
.neon h2{ 
 color: rgb(255,140,0); 
 font-family: 'Satisfy', cursive;
 font-size: 140px; 
 text-shadow:0px 0px 15px rgb(255,140,0);
 text-transform: none;
}

Aktivér Google-font:

Satisfy
32 FEB

Linje 1

Linje 2

Kopiér til tekst-editor, fanen Tekst:

<div class="date">32 <span style="color: yellow;">FEB</span></div>
<h1>Linje 1</h1>
<h1>Linje 2</h1>

Kopiér til style sheet:

.date{
    background: DeepPink;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    float: left;
    margin: 5px 30px 0px 0px ;
    padding:14px 0 0;
    color:white;
    font-size: 24px;
    font-weight: 900;
    text-align: center;
    line-height: 100%;
    font-family: 'Open sans', sans-serif;
}

.date span{
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 400;
    display: block;
}

Aktivér Google-font:

Open Sans
Back To Top
Search