Responsive WordPress theme CSS rettelser

css-responsive-wp-theme-aendringBenytter du det populære ‘Responsive’ WordPress theme? Så har jeg lidt CSS hjælp til at ændre baggrundsfarve og tekst.

Det gratis WordPress theme kan i øvrigt findes i WordPress.org tema bibliotek her.

Er der for meget bøvl med med CSS og manuelle ændringer, så kan du finde billige kommercielle og gode themes hos Themeforest. Der har du oftest mulighed for at lave den slags ændringer meget nemt.

Forudsætninger: hvis du installerer responsive er der nogle layout muligheder indbygget. Dem finder du nemt i den specifikke Responsive menu. Som udgangspunkt virker det her ved standard, standard, standard instillinger (for layoutets vedkommende).

Det det handler om i nedenstående tilfælde er: gør baggrund sort. Helt sort. Ingen border / rammer på widgets og den slags – og så selvfølgelig ændre tekst til hvid, således det ikke går i et med baggrunden. Jeg rører ikke menuen, da den ser nogenlunde fornuftig ud i forhold til både sort og hvid. Men det kan selvfølgelig også nemt laves om…

Min fremgangsmåde: Jeg bruger Firebug, en tilføjelse til Firefox (og andre browsere) til at lokalisere områder jeg vil lave om. Og hvilke navne de har (class og ids i CSSen). Gennem Firebug er det ‘gratis’ at lege på siden. Når jeg har fundet de forskellige, så kopierer jeg dem over i det dertil hørende felt(er) i Temafunktioner -> CSS-styles (dansk indstillet sprog.

CSS eksempler – ændr baggrund og tekst + det løse

Indsæt dette som beskrevet ovenfor (temafunktioner -> CSS-styles):

body {
    background: none repeat scroll 0 0 #000000;
    color: white;
}
.site-name a {
    color: white;
}
.widget-wrapper {
    background-color: #000000;
border: 0 solid #000000;
}
#wrapper {
    background-color: #000000;
border: 0 solid #000000;
}
blockquote {
    background: none repeat scroll 0 0 #000000;
}
#respond {
    background-color: #000000;
}
a {
    color: #ffffff;
}
#respond {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #000000;
    background-image: none;
    border-color: #000000 #000000 #000000;
    border-image: none;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    clear: both;
    margin-top: 15px;
    padding: 10px 20px 50px;
}
#footer a {
    color: #ffffff;
}
Bare lige for god ordens skyld:  #FFFFFF er lig sort – #000000; er lig hvid.
Der er selvfølgelig tusindvis af bedre muligheder for at lave om på sit temas udseende. Men skal du bare hurtigt fra start, så er det her fint. Sletter du ovenstående CSS (cascading style sheet) så kommer du bare tilbage til det oprindelige udgangspunkt. Der er ikke noget farligt ved det; intet slettes eller laves om på voldsom vis.

, ,

No comments yet.

Skriv et svar