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

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

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.

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("https://ganzemedizin.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;