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

  [*backyellow*]

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>'; 

     }  

add_shortcode("backyellow","load_yellow_function");

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.

http://www.homeopathy.at/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("http://www.homeopathy.at/wp-content/themes/dejavu/heli-nosidebar.css");</style>';
}
add_shortcode("nosidebar","remove_sidebar_shortcode");
 
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;