Question 203787 in CSS Question posted in
Some basic documentation can be found here.

CSS – Block or revert theme background style

I have a div from a plugin and it’s components with their own CSS styles set. Unfortunately, it does not use any type of query that speciying the components inside it, neither any !important. So when I put the plugin inside a page with a theme with it’s own CSS styles set, the theme’s styles affects the components.

I think this is general CSS problem I’m facing. But in my case, it’s the background. The plugin was set the background before the theme overrides it.

Plugin settings :

background: transparent url(background.png);
background-position: 0 50px;

The background-position in my example is vary between components.

Theme settings :

background: grey;

The problem is when I change the background to get the plugin settings back, it also overrides the background-position. The same goes with initial and revert, neiter works.

So I’m still looking for the solution to add a CSS to revert or block the theme CSS without doing anything to the plugin or the theme. TYIA.

Tags:

2

Answers


  1. 0

    If you want to override the theme CSS without doing anything to either the plugin or the theme, one way I can think of is to create a separate CSS file with the selector class that you want to modify, and then write your style in that also indicate its parent selector to increase specificity. Something like this…

    selectorsParent .selectorYouWantToOverride {
    background: transparent url(background.png) !important;
}

    Import the new stylesheet after the theme and plugin’s style sheets.

    Login or Signup to reply.
  2. 0

    Hi,

    if I correctly understood your problem is using the background property to override plugins settings which is a shorthand property for all the CSS background properties.

    The problem is when I change the background to get the plugin settings back, it also overrides the background-position.

    This is a normal behaviour of the CSS property background.

    What is the problem?

    As you wrote, your plugin set background and background-position and then your theme once again background. Second use of background property cause overriding all background settings include it’s position too.

    Solution

    In my opinion you should set background properties separatly for each property, e.g. background-color, background-image. In this case you change just this properties which you want to, and another like background-position stay the same.

    Knowledge

    The definition of CSS background property is described at this W3Schools page.

    Cheers

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search