"How to" - put own styles in custom.css

(6 posts) (2 voices)

1. 

   HeliR
   Member

   my changes to preset styles grow longer and longer in the Dejavu Admin-Panel "custom CSS".

   As this part of style changes is transferred with every page again and again I tried to put that out into an extra style - sheet.
   Having tried several approaches to be the last CSS that is parsed by the browser I came up with following solutein

   put into Admin-Panel "Custom CSS" following line

   @import url("http://SITURL/wp-content/themes/dejavu/custom.css") screen;

   now I can put all CSS Changes (after they are final, I try them out in the Admin-Panel) into this custom.css and preserve them through framework updates.

   Following Problems I encountered

   1. Apache didnt deliver my custom.css with an error "resource interpreted as stylesheet but transferred with MIME type text/html"
   Solution: copied style.css into new name custom.css, then updated the content to be my original custom.css (???? why ??? - anyways, it worked)
   this Error was only visible in Chrome Develop-Panel / Resources, by the way a nice to have addition to firebug as it pinpoints all errors easily

   2. Webkit browsers didnt import my file if it didnt carry following line in the first line: @charset “UTF-8″;
   This Problem I encountered some weeks ago when I played with another theme, took me 1 entire day to figure that out

   How to test for dummies:
   put some css code to the end of styles.css like

   #header{background-color:black;}
   body {background-color:black;}

   then put it also into custom.css like

   #header{background-color:yellow;}
   body {background-color:yellow;}

   now you see immediatly if it works.

   Maybe it saves someone new to theme creating (like me) some hours

   Posted 9 months ago #
2. 

   Elliott
   Support

   Hello Heli Retzek,

   You can also add styles to your skin by hitting the "advanced" link. http://mysitemyway.com/docs/index.php?title=Uploading_and_Downloading_Skins

   Posted 9 months ago #
3. 

   HeliR
   Member

   I am not sure if I understand you right

   I suppose you suggest that I edit the "child-style" skin, or I create my own child-style skin and edit this one

   If so I couldnt explain my problem appropriatly:

   If you look into the source code of a webpage that your valuable framework produces you will find:

   <link rel="stylesheet" href="http://www.aerzte4840.at/zoo/wp-content/themes/dejavu/shortcodes.css" type="text/css" media="screen" />
   <link rel="stylesheet" href="http://www.aerzte4840.at/zoo/wp-content/themes/dejavu/style.css" type="text/css" media="screen" />
   

   now in the source follows the part that the plugins put in

   #megaMenu ul li.ss-nav-menu-mega ul.sub-menu-1 > li:hover > a { background-color:lightgray;}

   then follow the scripts and more style from plugins and finally the closing /HEAD

   	</head>   

   So whatever I have put into "my" CSS Files or in the Admin-Panel is overwritten downstreams from the plugins-CSS or styles, not the other way around.

   My CSS Changes to plugins Styles can never come into action because wherever I put them in the framework, they are then overruled by UberMenus default style sheet because that is written behind my changes into the website.

   Is is there a hidden hook to put my stylesheet beneath the plugins style sheets into the website that I overlooked?

   Or do I understand the way CSS is parsed wrong?

   xx Heli

   Posted 9 months ago #
4. 

   Elliott
   Support

   To make sure your plugin CSS does not get overwritten anywhere then you can add a !important rule to the end. http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

   You can check here, http://mysitemyway.com/docs/index.php/Using_Child_Themes#Actions_and_Hooks, for a list of available hooks to use.

   Posted 9 months ago #
5. 

   HeliR
   Member

   super, the !important did the job.

   Still I suggest as a new framework feature that there is a way for Dummies (like me) to put own css-styling ("custom.css") into a Style-file which is read into the page at the end of all stylings.

   Posted 9 months ago #
6. 

   HeliR
   Member

   I have now found an elegant way to handle my own style - sheet which is included AFTER style.css and the inline - styles.

   first I am using my own "functions.php" that I have actually registered as plugin, so I can use that over several themes.
   http://www.doitwithwp.com/create-functions-plugin/

   next I put following code into this plugin (assuming that my own additional style sheet is called helistyle.css and sits in dejavu main theme path)

   if ( !is_admin() ) {
   $theme = get_theme( get_current_theme() );
   wp_register_style( 'helistyle', get_template_directory_uri() . "/helistyle.css", false, false );
   wp_enqueue_style( 'helistyle' );
   }

   now this works great, transparent and also survives framework or theme updates without further patching the template and does not need the !important Tag to overwrite everything.

   look e.g. also
   http://curtismchale.ca/2011/05/17/wordpress-plugins-or-theme-functions-php/
   http://digwp.com/2010/04/wordpress-custom-functions-php-template-part-2/
   http://digwp.com/2010/02/custom-css-per-post/

   Posted 8 months ago #

RSS feed for this topic

Reply

You must log in to post.