Skip to:
Content
Pages
Categories
Search
Top
Bottom

CSS mystery…

  • @pcwriter

    Participant

    14 years, 2 months ago

    Hi all, I need a hand with something that’s bugging me.

    I’m working on a theme with a bunch of cool (imho) features, including widgetized front page/footer, and a fully-commented custom.css file with several color/border properties that can be customized.

    The problem I’ve run into is that I can’t, for the life of me, get the background colors of certain divs (#container, #content) to change through custom.css, nor can I modify the border-radius of custom divs that I’ve defined in style.css. Other properties can be changed in custom.css no problem; like .widget or .widget h3.widgettitle. I’ve got the call for custom.css in the theme header just after the call to the theme stylesheet, like so
    `<link rel="stylesheet" type="text/css" href="/custom.css” />`

    I thought maybe properties could only be defined twice so, as an experiment, I commented out the ruleset for div#container in bp-default/_inc/css/default, so it was only defined in the theme’s style.css. But, that didn’t change anything: I still can’t modify that property in custom.css

    Can anyone clue me in on a possible why some properties can be changed in custom.css while others cannot?

Viewing 9 replies - 1 through 9 (of 9 total)

  • @anonymized-96400

    Inactive

    14 years, 2 months ago

    In CSS a lot depends on when a style for a selector is defined. If .example is defined as having a black background, but later .example is defined again as having a red background, then the background is gonna be red. But if you add an !important rule to the first style, then the background is gonna be black. Adding the !important rule to the second style makes the background red again. Might be what’s missing here.

    Also, delete your browser cache to make sure you don’t get a cached version of the page.

    @bowromir

    Participant

    14 years, 2 months ago

    edit: never mind. solve it yourself

    @pcwriter

    Participant

    14 years, 2 months ago

    @travel-junkie

    Thanks for a quick reply! But alas, your suggestion is to no avail…

    I removed the background property from div#container in style.css so it defaults to bp-default/_inc/css/default. Then added background:#eeeeee !important; to div#container in custom.css. Doesn’t change.

    I even tried zeroing in on the div from the highest level: body#bp-default #container, but that didn’t work either.

    I’m stumped. I really don’t want folks to have to edit style.css

    @pcwriter

    Participant

    14 years, 2 months ago

    @Bowromir

    Thanks for your suggestion too, but I also tried on my local install with no plugins activated except Buddypress.
    I’ll try again tomorrow with a fresh look.

    @rogercoathup

    Participant

    14 years, 2 months ago

    @pcwriter –

    Is this in a child theme from bp-default?

    Have you checked the file path is correct to your custom.css file? Do an inspect element in your browser and check the path bloginfo is generating – is it the one you expect?

    Also, not sure what you mean by it “it defaults to bp-default/_inc/css/default” … is this a child theme, or have you just tried modifying style.css in the bp-default theme itself?

    If you have made a child theme, and followed the standard bp css structure – then style.css will include the default.css in your child theme’s _inc/css folder – not to the default.css in the bp-default theme.

    If you clarify these questions, it might help explain which css files are actually being used.

    @pcwriter

    Participant

    14 years, 2 months ago

    @rogercoathup

    Yes: child-theme of bp-default.
    child-theme/header calls child-theme/style.css and child-theme/custom.css
    child-theme/style.css imports bp-default/style.css

    So if I remove the background property from, say div#container in child-theme/style.css, it gets that background from bp-default. Then if I add the background property to child-theme/custom.css, nothing changes, even with !important added.

    Like I say, I’m stumped :-(

    @rogercoathup

    Participant

    14 years, 2 months ago

    Crank open inspect element in your browser.. I take it you are using firefox, safari or chrome.. And take a look at the chain of CSS files that are leading to the definition for container etc in your site.

    That will tell you which files are being used, and which are taking preference? Are you seeing the chain you expect? Is your custom.CSS in there?

    Are you sure bloginfo is returning the path you expect – did you check this in your web inspector?

    @rogercoathup

    Participant

    14 years, 2 months ago

    Ps also look in your web inspector for any file not found messages relating to your CSS files

    @rogercoathup

    Participant

    14 years, 2 months ago

    Finally – if your custom.CSS is getting called, and is last in the cascade as you want – have a look at the specifity of your selectors – the most specific one is the one that will be used.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘CSS mystery…’ is closed to new replies.

Topic Info

Topic Tags

Skip to toolbar