Transparency problem with CSS and blogs MU

I have created a child style for my website and have been playing around with the style of blogs.mu.

I have had great success by using firebug and just adding the div id's and classes to my child style.css and over riding the parent theme with !important.

I would like to color the background of #intro-content and #wrapper and then give the internal divs a white background.

I was hoping this would enable me to have a black border with the two internal divs
'#intro-content'
'#cbox'
having a white background with my content on, this does not happen.

What is strange is that if I use firebug to temporarily edit the two divs in my browser.
background-color: transparent;
and change it to
background-color:black; I get the desired result.

What appears to be happening is that background color is set to transparent in bp-default.css, thus overriding my custom style sheet, even with !important.

Is there a way in which I can overide bp-default, to get the changes I desire?.

~sorry for the long post
Andy

  • andy_trigg
    • WPMU DEV Initiate

    Update.

    The only work around I've found at the moment is to edit the bp-default.css and change the background color there from transparent to black.

    This changes all elements that have a transparent background on my page to black, obviously giving the desired effect for the divs I want but also the ones I don't, the nav bar being one.

    To fix this on the divs I don't want to have a black background, I have to add a background color to them and color them the color of the background they are placed on, which is obviously not ideal. This especially if I want to change the color scheme at a later date, or have a multi coloured nav bar.

    If I simply remove background transparent from bp-default. Then add the transparent background to the divs I want to be transparent in my style sheet (the nav bar). This again has no effect.

    Is my fix the only way to achieve this?

  • aecnu
    • WP Unicorn

    Greetings Andy,

    Thank you for the great question on top of your input, it is certainly appreciated.

    Lets find out if this is the only way or if there is another that I am not aware of.

    I will see if I can get the lead developer @EnzoMDD in here with his invaluable insight into this plugin for his advice/advise for us.

    Though this may take a bit longer then a normal ticket, I will try to get him in here asap.

    Cheers, Joe

  • EnzoMDD
    • Site Builder, Child of Zeus

    Hey Andy,

    Can you try this:

    div#intro-content, div#wrapper{
    background-color: black !important;
    }

    The more specific your CSS selection is the higher precedence they take.

    e.g. div#wrapper will override #wrapper, as the former targets divs with the id of wrapper.

    You can find more information on CSS selector precedence here:
    http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

    Let me know how you get on.

  • andy_trigg
    • WPMU DEV Initiate

    Thanks for the advice but this still does not work.

    Looking at firebug its still telling me that my site address is over riding my child style,
    even though there is a line through the code, which is really puzzling.

    If I delete the transparent part of the code which its telling me is coming from my site address it works perfectly.

    Ive attached 2 screen grabs, one with the code in and no background changes and one with it deleted and the black background effect I want.

    Many thanks for you support.

  • EnzoMDD
    • Site Builder, Child of Zeus

    Hey,

    Can you confirm you have this line in your child themes CSS?

    div#intro-content{
    background-color: black !important;
    }

    From your screen shot I can see only this rule:

    #intro-content{
    background-color: black;
    }
  • andy_trigg
    • WPMU DEV Initiate

    hey,

    yes this is in my code, I have attached a grab of my childstyle.css.

    The only fix Ive found at the moment is braking my golden rule and directly adding it to the base.css file for the two divs, this appears to work.

    For some elements of this theme my child style do not override. It always seems to be the elements that have been PHP hard coded to enable you to use the wordpress backend theme customiser, where there are a lot of options for changing the look of your page for a less experienced user.

  • EnzoMDD
    • Site Builder, Child of Zeus

    When you inspect the #wrapper or #intro-content divs in firebug, can you see these rules appear?

    I have taken the default blogs-mu theme and added these rules and they take precedence over the other styles. What version of blogs-mu are you running?

    Is your website online so I can take a look?

  • andy_trigg
    • WPMU DEV Initiate

    My website is http://www.thisismycraft.co.uk,

    Like I mentioned before I have achieved the desired effect by editing the base file, Instead of black I went for a shade of grey.

    The rules do appear when they are in my child theme and I inspect the div with firebug,but for some reason they do not take effect. The parent rules also appear with a line through them to suggest they have been overridden.

    At first I thought it may be a caching issue, I am using Chrome as my browser.

  • andy_trigg
    • WPMU DEV Initiate

    Thanks for your great feedback, I have to admit that I have been an utter tool.

    I had to get the base.css file, so I went into the parent theme and pulled it from inc/css with my ftp client.

    Then because I am on auto pilot I have uploaded my child style to that folder instead of heading back to the blogsmu-child/inc/css.

    Once I corrected this issue I got all my problems sorted. Apologies for wasting your time.

    Many thanks for the great support
    Andy

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.