something about styling a wordpress based website

Optisches Aufwerten

Wenn Sie feststellen, ihre Seite entspricht nicht zu 100% Ihrem Wunsch, sollten Sie überlegen, moderne Techniken einzusetzen. Folgende Grundvorrausetzungen sollten Sie einhalten:

  • wählen Sie ein Basis WordPress Theme
  • hängen Sie Ihr eigenes CSS an
  • nutzen Sie SVG Grafiken und Videos
  • Benutzen Sie für Icons font-awesome o.ä.

These hints are targeting on presenting a readable and visual guiding page for your users.
search and implement a theme with custom css field. not the big deal, ai. but editing is a mess, you often get a small editor window and after save and ctrl+r / f5 on the main site you hangle yourself through various tabs hitting evil buttons to reach again the editor inside your back-end.

slt2
here is the solution: write one line to import a css file hosted somewhere easily accessible for (highly recommended) sublimeText2 + sftp plugin.

@import url(‚http://writable.host.org/myfiles/customStyle.css‘);

and in addition you decide to go modern by reading the get started page on font-awesome, include the font on the first line of your customStyle.css, like

@import url(‚//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css‘);

this can look like: me on or at

and is done within your post, by representing the namespace ‚i‘ plus correspondending css classes and tags, and lastly defining colors like:

.blueoverlay{
color:#4099ff;
}
.redoverlay{
color: #cb2027;
}

it’s up to you, check out the icons, they are free to use and made with clean hands, awesome. Now it’s time to visit     The Icons. You will be impressed.

style
.img-reverse
style
.img-clean
style
img

You want to add your custom css classes… just do a hack like

.img-reverse{
border-radius: 6px;
box-shadow: 0 -1px 0 #ccc,
0 -2px 0 #c9c9c9,
0 -3px 0 #bbb,
0 0 1px rgba(0,0,0,.1),
0 -1px 3px rgba(0,0,0,.3),
0 -3px 5px rgba(0,0,0,.2),
0 -5px 10px rgba(0,0,0,.25);
}
img{
border-radius: 6px;
box-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 0 1px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25);
}
.img-clean{
max-width:100%;
border-radius: 0px;
box-shadow: none;
border-top: 0 solid;
}

And what else helped me?

It is the same like FA-Cheatsheet, c+p the Icons into Photoshop (if you need it) after installing the Font…

  • Spicing it up

    If you encounter your page to look not like you wished it does, you might be interested in using modern technics, like:

    • choose a accurate wordpress theme
    • append your custom style sheet (css) to that
    • make use of svg graphics and videos
    • use font-awesome and similar instead of jpg/png icons

    These hints are targeting on presenting a readable and visual guiding page for your users.

    search and implement a theme with custom css field. not the big deal, ai. but editing is a mess, you often get a small editor window and after save and ctrl+r / f5 on the main site you hangle yourself through various tabs hitting evil buttons to reach again the editor inside your back-end.

    slt2
    here is the solution: write one line to import a css file hosted somewhere easily accessible for (highly recommended) sublimeText2 + sftp plugin.

    @import url(‚http://writable.host.org/myfiles/customStyle.css‘);

    and in addition you decide to go modern by reading the get started page on font-awesome, include the font on the first line of your customStyle.css, like

    @import url(‚//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css‘);

    and is done within your post, by representing the namespace ‚i‘ plus correspondending css classes and tags, and lastly defining colors like:

    .blueoverlay{
    color:#4099ff;
    }
    .redoverlay{
    color: #cb2027;
    }

    it’s up to you, check out the icons, they are free to use and made with clean hands, awesome. Now it’s time to visit     The Icons. You will be impressed.

    style
    .img-reverse
    style
    .img-clean
    style
    img

    You want to add your custom css classes… just do a hack like

    .img-reverse{
    border-radius: 6px;
    box-shadow: 0 -1px 0 #ccc,
    0 -2px 0 #c9c9c9,
    0 -3px 0 #bbb,
    0 0 1px rgba(0,0,0,.1),
    0 -1px 3px rgba(0,0,0,.3),
    0 -3px 5px rgba(0,0,0,.2),
    0 -5px 10px rgba(0,0,0,.25);
    }
    img{
    border-radius: 6px;
    box-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 0 1px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25);
    }
    .img-clean{
    max-width:100%;
    border-radius: 0px;
    box-shadow: none;
    border-top: 0 solid;
    }

    And what else helped me?

    It is the same like FA-Cheatsheet, c+p the Icons into Photoshop (if you need it) after installing the Font…