"how to" redefine styles within posts text - e.g. switch sidebar on / off .....

(1 post) (1 voice)

1. 

   HeliR
   Member

   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 that contains just following lines:

   body {    background-color: yellow;}
   

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

   

   Attachments

   1. screencut0027.jpg (120.4 KB, 0 downloads) 8 months old

   Posted 8 months ago #

RSS feed for this topic

Reply

You must log in to post.