Jump to content
Sign in to follow this  
mhelenek

How can i override dynamic.css from a .css file?

Recommended Posts

mhelenek

WordPress version 3.1.2 Theme: PlatformPro version: 1.3.2 Custom Child Theme. Summary of Problems: Making site narrower than 800 pixels (like 763). Making columns arbitrary widths (like the main content column 583). Dynamic.css gets loaded after base.css, so base.css cannot override dynamic.css items. @import directive in Custom CSS rules (in dynamic.css) won??™t import a .css file. Background: I want to make a site 763 pixels wide, with the main content area 583 and the single right sidebar 180. I cannot set the site that narrow in the Layout editor Also, I cannot set the content area to 583 (yes, to 582 or 584, but not 583). If I attempt to override such things in base.css, they don't have an effect, because dynamic.css is loaded after style.css (which loads base.css). I can add a bunch of style rules to the CSS Rules of the Custom Code in PlatformPro Settings, but that means having to maintain THOSE styles separately from the version control of my other .css and markup. I tried using an @import directive in those custom rules, to import a .css of mine to do final style changes, but the @import statement in dynamic.css doesn??™t load my file for reasons I cannot figure out. Questions: 1. Is there a hook that gets executed after dynamic.css gets loaded, where I can call a function to link my ???final??? .css file? 2. Is there a known reason why an apparently valid @import directive in dynamic.css won??™t work? 3. If neither of the above can provide a solution, what do other people do in a custom child theme to override settings in dynamic.css using a version-controlled custom .css file(s)?

Share this post


Link to post
Share on other sites
catrina

Have you already tried adding the CSS to the base.css file? This file overrides other CSS, including dynamic.css.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
mhelenek

Yes, i did try putting what I wanted to do in base.css. Unfortunately, as I mentioned above, dynamic.css actually gets loaded after base.css. if you look at the source of a generated page, you will find that the load order of .css is: 1. pro.css 2. style.css (in the child theme, which in turn loads 3. base.css) 4. dynamic.css So style rules in dynamic.css come AFTER base.css

Share this post


Link to post
Share on other sites
Simon

Put your new rules into the custom css box in the main settings, they get added to the bottom of dynamic.css and such is actually loaded last.

Share this post


Link to post
Share on other sites
mhelenek

That works, but as I mentioned above it doesn't solve the problem of readily maintaining those style rules in version control with the rest of the .css files, nor of being able to deliver changes to the site via simply delivering a new collection of files via ftp. Instead it requires mixing that with manually uploading new rules via the custom rules area, the doing of which is prone to human error or omission.

Share this post


Link to post
Share on other sites
Simon

ok in that case add an action to your base functions file, like: ` add_action('wp_print_styles', 'add_my_stylesheet'); function add_my_stylesheet(){ wp_enqueue_style('my_styles', get_stylesheet_directory_uri() . '/my_style.css', 999 ); } `

Share this post


Link to post
Share on other sites
mhelenek

add_action of wp_enqueue_stylesheet at the 'wp_print_styles' hook point still writes the stylesheet link statement before where the link to dynamic.css is written.

Share this post


Link to post
Share on other sites
Simon

Use `wp_head` then maybe? You will have to print your stylesheet info directly because it will be too late to use enqueue..

Share this post


Link to post
Share on other sites
mhelenek

I found this in themes/platformpro/core/library/actions.site.php: ` /** * Do dynamic CSS last in the wp_head stack * * @since 4.0.0 */ add_action('wp_head', 'do_dynamic_css'); ` I used Simon's proposed code, but changed the hookpoint from wp_print_styles to wp_head, and the good news is that my add_action is getting called after the one in the platform, so my "final custom css" file is now loaded after the dynamic.css file. Thanks, all! Karma goes to Simon...

Share this post


Link to post
Share on other sites
mhelenek

Simon, Thanks for all the help. 1. are you still surprised that it worked with enqueue when i hooked it at wp_head? it seems to work fine. If you still advise me to do so, I could change the action to write it directly. Thoughts? 2. What is the 999 in your proposed code? That third parameter is documented as an optional array of dependencies

Share this post


Link to post
Share on other sites
Simon

Im not supprised, enqueue_styles gets fired by wordpress during wp_head. ;) The third param is the priority default for all actions is 10 so by making it 999, it gets called very late. `<?php add_action( $tag, $function_to_add, $priority, $accepted_args ); ?>` Glad you got it sorted!

Share this post


Link to post
Share on other sites
mhelenek

Thanks. But in your example, 999 isn't the third param of add_action, it is the 3rd parameter of wp_enqueue_style. Should i leave it there, or delete the 3rd param?

Share this post


Link to post
Share on other sites
Simon

Ahh right, see what you mean there ;) Yes its a typo alright! Sorry about that Should have been: ` add_action('wp_print_styles', 'add_my_stylesheet', 999); function add_my_stylesheet(){ wp_enqueue_style('my_styles', get_stylesheet_directory_uri() . '/my_style.css' ); } `

Share this post


Link to post
Share on other sites
mhelenek

and to make the custom "final" my_style.css get listed *after* dynamic.css, it would be: ` add_action('wp_head', 'add_my_stylesheet', 999); function add_my_stylesheet(){ wp_enqueue_style('my_styles', get_stylesheet_directory_uri() . '/my_style.css' ); } `

Share this post


Link to post
Share on other sites
sheloha

This is exactly what I need to do however I cannot get the function to call my css file. Just to check I am doing this correctly the add_action is placed in my platformbase functions.php the my_style.css is in the same directory as functions.php any help with this is appreciated

Share this post


Link to post
Share on other sites
[Deleted User]

Tried this: ` add_action('wp_print_styles', 'add_my_stylesheet', 999); function add_my_stylesheet(){ wp_enqueue_style('my_styles', STYLESHEETPATH . '/my_style.css' ); } ` That works.... my_styles resides in /platformbase/ (where I like it to be), but it gets inserted way to early... 'wp_head' hook does not seem to work... Regards, Jackey

Share this post


Link to post
Share on other sites
[Deleted User]

@Guy Shelton Hi Guy, Did you get this add_my_stylesheet function to actually work? Regards, Jackey

Share this post


Link to post
Share on other sites
sheloha

Unfortunately not. I have been keeping an eye on this thread hoping someone can help. I'm guessing you didn't have any luck?

Share this post


Link to post
Share on other sites
[Deleted User]

The wp_print_styles hook works perfect, but as I said, it injects the file way to early. I don't know why the wp_head hook does not work, it is probably out of scope. I really prefer a override.css file instead of the style.css (to early, can't override plugin css or dynamic.css) or custom css (to clumsy editor).. That way I can make the modifications online through FTP with BBEdit/Transmit, fast and easy. Also noticed that when I replace platformpro with a newer version, all kind of settings get lost. Must be because the dynamic.css file is overwritten. I'm surprised that that file does not reside in the platformbase directory. Even more easyer if pagelines Added a line of code that insterted a THEMEBASE . base.css if it exists just before the </head>.

Share this post


Link to post
Share on other sites
[Deleted User]

O.K. this works! ` add_action('wp_head', 'add_my_stylesheet' , 999 ); function add_my_stylesheet(){ ?> <?php } `

Share this post


Link to post
Share on other sites
sheloha

Brilliant! Thanks a lot for that Jackey.

Share this post


Link to post
Share on other sites
sheloha

I actually had to use

add_action('wp_head', 'add_my_stylesheet' , 999 );
		function add_my_stylesheet(){
			?><link rel="stylesheet" id="my_styles"  href="<?php echo get_bloginfo('wpurl')?>/wp-content/themes/platformbase/my_style.css" type="text/css" media='all' />
			<?php
		}

to get things to work properly. Good solution though Jackey.

Share this post


Link to post
Share on other sites
[Deleted User]

Thanks Guy, Lets make it even more universal: ` add_action('wp_head', 'add_custom_stylesheet' , 999 ); function add_custom_stylesheet(){ ?> <?php } ` Regards, Jackey

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×