[FlawlessWeb]

So there is no way of permanently changing it in the child theme? i.e. I would have to change a line in the main functions.php after every theme update?

[FlawlessWeb]

This reply has been marked as private.

[FlawlessWeb]

Tried that and doesn’t seem to do anything.

[FlawlessWeb]

This reply has been marked as private.

[FlawlessWeb]

No use, 15 loads the stylesheet even higher up in the header.

[FlawlessWeb]

Tried this with no luck unfortunately.

Using your code it loads the stylesheet just below responsive.css.

So that means WooCoommerce, customizer code, custom css etc is all loaded after it.

For testing, I changed the snippet from 100 to 1000 and it made little difference… just moved it down a few lines below redux-google-fonts-css

Any ideas?

[FlawlessWeb]

Didn’t see that reply. I’ll try that how.

[FlawlessWeb]

I found this link:

WooCommerce & Genesis: An !Important Style Tip For You

Would it be possible to add a code snippet that would load the child theme css after the customizer and custom css outputs in the header?

In theory that should solve a lot of my issues or would it?

[FlawlessWeb]

Hi Ed

Thanks for the feedback.

Can you elaborate a bit further on that last paragraph?.

I have around 2000 lines of custom css code. Managing that in the custom css box is a nightmare.

With your suggestion, would all the styles be loaded after the customizer code and the custom css code?

Would this not introduce a slight delay in the css code being applied… I.e. Load the page and you can see the layouts before the css you want is applied?

[FlawlessWeb]

Ok thanks.

[FlawlessWeb]

Cleared my cache and seems to be working ok now.

Is the jquery snipped you added to my custom js box going to be included in the next update?

jQuery('ul.nav-tabs li a, .spb_accordion_section > h4 a').on('click', '', function(){
    var thisTab = jQuery(this),
     asset = thisTab.parents('.spb_content_element').first();
     
     if (asset.find('.map-canvas').length > 0) {     
         setTimeout(function() {
             jQuery(window).trigger('resize');
             var map = asset.find('.map-canvas');
             SWIFT.map.init();
        }, 100);
     }
   });

[FlawlessWeb]

This reply has been marked as private.

[FlawlessWeb]

Hi,

Re-opening this topic as I am struggling to comprehend how the current setup is optimal.

Here is what I am trying to do:

I have a lot of custom css rules for Cardinal – best practice in WordPress is to setup a child theme stylesheet and load the rules that way. That is what I have done.

However, with Cardinal, that does not work well at all, i.e.

#1. A lot of the time, the rules in the child theme stylesheet do not work unless you use the !important declaration. It’s not css best practice to be using !important the whole time.

#2. In some cases, using the !important declaration does not work. For example, the customizer outputs the following code by default when Cardinal is installed:

.article-share label {
background-color: #fe504f!important;
color: #ffffff!important;
}

Because the child theme stylesheet is loaded before the customizer rules are output, it is not possible to change that rule in the child theme.

#3. Putting all the rules in Cardinals custom css box resolves this issue but that is not the optimal way imo. – 1. It slows down the loading on the admin page. 2. You may not want your client to see all those css rules and/or change any of them. 3. Its easier to move that child theme stylesheet across different websites. 4. If something goes wrong with the theme and all the options are wiped, that won’t be a major issue if the rules are stored in the stylesheet. 5. It easier to manage the stylesheet with a huge amount of rules in an off-line editor. Copy and pasting back and forth between the custom css box is not ideal. 6. Finally, performance wise, I would guess that loading 2000 or so lines of custom code in an external stylesheet is better than loading it dynamically on every page?

==============================

What are the solutions to this?

1. Is it possible to stop the customizer from outputting its rules using !important – thus allowing all rules to be changed in the child theme?

2. Would it be possible to load the child theme css file after the customizer rules are output in the header?. Similar to the above, that would solve the !important issue.

[FlawlessWeb]

Ok thanks,

Ill give it a try.

[FlawlessWeb]

This reply has been marked as private.