0

I have started to convert my static page to WordPress theme. While I am doing this I have a place where the position of the background image of a section has to be set with values like background-position:0 80%;.

When I add the CSS to my custom CSS file which is main.css I found out there an internal CSS which is overriding my CSS like background-postion:center !important.

Then I changed my CSS to background-position:0 80%; !important

But it still doesn't work and I found out my CSS file is included before the internal CSS in the head ( by view page source code).

Now what I want to know is how can I change the order or how can I import my custom CSS (main.css) file after the internal CSS code?

closed as off-topic by Michael, Krzysiek Dróżdż, Jacob Peattie, bosco, Howdy_McGee May 26 '18 at 19:01

This question appears to be off-topic. The users who voted to close gave these specific reasons:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • First of all you should fix the main theme. There is no logical reason to use !important in a theme, if it is built all by the theme creator itself. Maybe try using a theme by someone who actually understands his/her job ;) – marvinpoo May 14 '18 at 11:09
  • WordPress themes use the style.css file so make sure your declaration is at the bottom of that first of all, and also that you're editing a child of a theme, not the theme itself (unless this theme is custom that you built yourself, of course) – Nathaniel Flick May 15 '18 at 9:24
1

First of all it should be: background-position:0 80% !important; You said this style is applied to sections. How? If you just add another selector, like instead using:

article{
background-position:0 80% !important;
}

use:

body article{
background-position:0 80% !important;
}

it may just work without any hacks.

  • I already tried it. But it's adding some internal css and overriding my custom css file. Actually what I want to know is how can I add my custom css file after the internal css styles.I tried the priority things too.It didn't work – Ramesh May 15 '18 at 14:02
  • It is only overriding it because it has a more specific selector. If your css were to have a more specific selector (meaning more things in the selector than the internal file, like: html body div#main .main-container article), then it would override the internal css no matter where it is on the page. You could also register a css file with just the fix for the article, not enqueue it, and then enqueue it just before the wp_footer();, then it would load that file in the footer. – D. Dan May 15 '18 at 14:26
  • It worked. Thank you so much for your time and information – Ramesh May 15 '18 at 17:30
0

Style blocks that aren't from the stylesheet stink. I truly despise it when theme developers put them in their theme. The only thing worse is inline styles (ie ). Those are virtually impossible to overcome.

In your case, there's a couple of hack-tastic way to overcome this hacky issue.

In your child theme's functions.php file, you can use the following (Admittedly hacky) solution:

// We're adding a HIGH priority of 9999 which should cause this to be output AFTER the theme's bad styles.

add_action('wp_head', 'fix_bad_theme_styles', 9999);

function fix_bad_theme_styles() { ?>
    <style type="text/css" data-type="vc_custom-css">
            #site-header:not(.shrink) .site-title { padding: 1px 0 !important; }
    </style>
<?php }

If that doesn't work, an even hackier way would be to put the style in the footer. It'll work, but it's not best-practice (as if any of this solution is!):

add_action('wp_footer', 'fix_bad_theme_styles');
  • Is this the only way that I overcome this issue. Is it impossible to add my custom css file after the css styles which are written by the WordPress it self? – Ramesh May 15 '18 at 14:05

Not the answer you're looking for? Browse other questions tagged or ask your own question.