StartAdministrationCMStest post for demonstration of css-redesign from within the text

test post for demonstration of css-redesign from within the text


Redesigning CSS with a WordPress Shortcode from within the body-text


[backyellow]   [*backyellow*]


 metabolic balance KochkursGesunde KücheTolle Ergebnisse


I found a trick how to get the themes CSS redesigned individually just from the posts text, there is not even any html necessary.

The Problem

Problem: CSS style-sheets are usually read in the header part of a webpage, indivudual style-changes within the posts text does only affect the styles within scope of the re-definition.

So I cannot simply decide when typing in some posts text “use orange template” or “better dont show the footer section in this post”. I was not aware of any trick to change general CSS definitions of style-files from within a html-text. Searching the web for “redesigning CSS” or “changing CSS from HTML BODY” and others didnt give me any clue. So I thought maybe some jquery function could be used to redesign css but I am neither a jquery programmer nor a php programmer and just understand html / css on a beginner-level.


Now I have found the trick that is even extrem simple

1. create a wordpress shortcode

2. use this shortcode to read a special dedicated CSS file


now this works sooo simple I cannot belief that this is not more often in use.


here I show a shortcode that re-colors the back of the website into yellow.


Shortcode definition 

function load_yellow_function($atts , $content=null){
     return '<style type="text/css">@import url("http://.... /heliyellowstyle.css");</style>'; 


this shortcode [*backyellow*] from within of the text of the post reads now a css-file named “heliyellowstyle.css” into the css-parser of the browser. 

As all the themes css-files are alredy in mem of the recipient browser they are now over-written / redesigned.

Using this trick I can now create a set of shortcodes to be able easily to give certain parts of my site certain layouts, or I extend the shortcode to be “generic” so that I can use it with a pointer to a certain file like e.g.

 [* CSS file=”backyellow” *]


to demonstrate that I have setup a side that redesigns with above cited function the background of the whole website to yellow.

test post for demonstration of css-redesign from within the text



here is the shortcode to switch the sidebar off from within the text plus the appropriate CSS definitions, they refer to my theme DEJAVU


function remove_sidebar_shortcode($atts , $content=null){
return '<style type="text/css">@import url("");</style>';
body div#body_inner div#content div#content_inner div#sidebar {display:none;}
body div#body_inner div#content div#content_inner div#main {width:930px;}
body div#body_inner div#content div#content_inner {background-image:none;}
body div.post_comments_bubble {display:none;

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein