Trying to insert custom CSS with functions.php

[Mary Anne Harris]

We have one calendar page (single event details) where my users want more padding on the left/right. I can get the server to load additional custom CSS from outreach-pro-child, but the events calendar “tribe-events-full.min.css” continues to rule. See below where I tried to make mine load last. Any tips? (!important has not worked either)

#tribe-events-content{margin-bottom:48px;padding:2px 17px 2px 18px;position:relative}

function my_theme_child_style() {
     $base = get_stylesheet_directory_uri();
     wp_enqueue_style('child-theme-style', get_bloginfo( 'stylesheet_directory' ) . '/outreach-pro-child/child-style.css', array(), CHILD_THEME_VERSION);
}
add_action('wp_enqueue_scripts', 'my_theme_child_style', 25 );

[George]

Hi Mary Anne,

Thanks for reaching out. It seems like this stylesheet is actually NOT loading on your site. For example, try heading to the file location directly: http://www.tulsaunity.com/wp-content/themes/outreach-pro/outreach-pro-child/child-style.css

For me, that’s a 404 and no CSS is actually found.

Just for the sake of testing if you add your actual CSS to the bottom of your Child Theme’s style.css file, do the styles seem to work and add the padding you’re trying to add etc.?

Thank you!
George

[Mary Anne Harris]

Yes, those work well when appended to style.css in the Outreach Pro directory. The PHP I showed you is wrong ’cause the child dir is at the same level as the parent dir not inside it. So I added the following functions.php inside the directory outreach-pro-child. I’m told the first two functions make sure the child CSS cooperates with the parent CSS. This is not working …

<?php

function register_my_theme_styles(){
        if ( ! is_admin() ){
        wp_register_style( 'my-theme-stylesheet', get_stylesheet_uri(), array(), false, 'screen' );
        }
	}
add_action( 'init', 'register_my_theme_styles' );

function use_parent_theme_stylesheet() {
    // Use the parent theme's stylesheet
    return get_template_directory_uri() . '/style.css';
}

function my_theme_child_style() {
   $base = get_stylesheet_directory_uri();
   wp_enqueue_style('child-theme-style', get_bloginfo( 'stylesheet_directory' ) . '/outreach-pro-child/child-style.css', array(), CHILD_THEME_VERSION);
}
add_action('wp_enqueue_scripts', 'my_theme_child_style', 25 );

?>

[George]

Hey Mary Anne,

So it does indeed seem that your own theme and child theme stylesheets are just not loading onto the site correctly—we unfortunately cannot help with theme issues because we only make plugins, and our plugins will not prevent the stylesheets being loaded or anything like that.

I would recommend reaching out to your theme developer’s support team or otherwise Googling/researching your way out of that particular issue if what I’m about to recommend does not help, BUT, even though this is out of scope of our support forums, I do have one recommendation that I am going to make as follows:

Try REPLACING all of the code you posted above with this simpler code:

function mary_anne_theme_styles() {
wp_enqueue_style( 'parent-theme-style', get_template_directory_uri() . '/style.css', array() );
wp_enqueue_style( 'child-theme-style', get_stylesheet_directory_uri() . '/child-style.css', array( 'parent-theme-style' ) );
}

add_action( 'wp_enqueue_scripts', 'mary_anne_theme_styles' );

If this doesn’t help or if you have any further child-theme things to sort out, we unfortunately cannot assist with that, but I hope this simpler code does a better job of loading your parent theme’s style.css file and your child theme’s child-style.css file.

— George

[Mary Anne Harris]

That certainly is a more efficient piece of code.

One of the reasons I posted here is that I was hoping to get clue as to how your plugin style sheets always load after the other sheets. Not sure (other than !important) how to get around that?

[George]

Thanks for the follow-up!

In regards to your next question, there’s unfortunately no straightforward way to get our styles to come after your styles. Using !important is the most simple, effective solution, along with adding more specificity to your CSS selectors to override anything inherited from other style rules (Google these terms if they happen to be ones you’re not familiar with—the website http://css-tricks.com is exceptionally good).

If you’re particularly interested in reorganizing the structure of resource-loading on your pages, you can dive into the code directly and tinker of course, but this is a complex-enough customization to fall outside the scope of the support we can provide here. (https://theeventscalendar.com/knowledgebase/what-support-is-provided-for-license-holders/)

I hope this information helps!
George

[Mary Anne Harris]

I’d much rather work with !important and/or more specificity!
Thanks for the information!

[George]

Glad to help! 🙂

Best of luck with your project,
George

[Author]

Posts