Custom CSS – Adding box-shade to page elements.

I am having trouble adding a box shadow around all the elements in my theme. I have added the following css class to my child-style.css file in my bp-fun-child theme and applied it to the appropriate div tags.

.shad {

-webkit-box-shadow: 0 3px 4px 1px #222 !important;

-moz-box-shadow: 0 3px 4px 1px #222 !important;

box-shadow: 0 3px 4px 1px #222 !important;

}

In most cases it works beautifully, but I can't seem to get it to work on the main content box or the welcome message box (see screenshot here ) unless I go in and add to the box-shadow code directly to the parent theme's base.css file as follows:

On line 88: #call-action {margin: 5px 0px; padding: 15px 2%; float: left; width: 100%; background: #FFFFFF; -webkit-box-shadow: 0 3px 4px 1px #222 !important; -moz-box-shadow: 0 3px 4px 1px #222 !important; box-shadow: 0 3px 4px 1px #222 !important;}

On line 106: #post-entry {margin: 0px; padding: 15px 15px 3em; float: left; width: 620px; background: #FFFFFF; -webkit-box-shadow: 0 3px 4px 1px #222 !important; -moz-box-shadow: 0 3px 4px 1px #222 !important; box-shadow: 0 3px 4px 1px #222 !important;}

It works when I do it this way, but it kind of defeats the purpose of doing it with CSS since if I wanted to change it I would now have to change it in these two places in addition to the class I created.

Any ideas on why I can't get it to work on those two areas?

  • Jeff
    • Design Lord, Child of Thor

    Also, if it was just those two places that I had to change it it would not be such a big deal, but it turns out that I would have to do the same thing for the profile, group, and forum pages as well as the box-shadow doesn’t show up there either.

  • Timothy
    • Chief Pigeon

    Hey there, hope you are well.

    I can’t really see from your image very well, it seems low detail.

    I’m guessing here though that some CSS is over-ruling your changes.

    If you are using Chrome you can open Developer tools and then look at the code and CSS. You will then see what is crossed out and what is active. That way you should be able to find the conflict there.

    Take care.

  • Jeff
    • Design Lord, Child of Thor

    Hi Timothy!

    Thanks for the reply. I have done what you suggested and the CSS rules that I am trying to assign don’t show up there – not even as crossed out rules. I’m guessing that means that I haven’t been able to find the proper div tag to add the class to, but I don’t know where else to look for it. There is no “default” template file anywhere in either the child or parent theme. Could it be in the default template under the “BuddyPress Default” theme? (I’m using BuddyPress Fun Child theme.)

    Thanks again for your time.

  • Richie_KS
    • HummingBird

    hi

    check if the .shad class applied correctly in child theme. it should be like this

    <div id=”post-entry”>

    to

    <div id=”post-entry” class=”shad”>

    but a more effective method would be adding something like this to your child-style.css

    #custom #post-entry, #custom #sidebar-column {
    -webkit-box-shadow: 0 3px 4px 1px #222 !important;
    -moz-box-shadow: 0 3px 4px 1px #222 !important;
    box-shadow: 0 3px 4px 1px #222 !important;
    }
    #custom #call-action {
    margin: 10px 0 0;
    -webkit-box-shadow: 0 3px 4px 1px #222 !important;
    -moz-box-shadow: 0 3px 4px 1px #222 !important;
    box-shadow: 0 3px 4px 1px #222 !important;
    }

    so theres no need to add class shad to each post-entry div

    cheers

  • Jeff
    • Design Lord, Child of Thor

    Hi Richie!

    That worked for all the blog post pages, but the My Account, Group, and Forum pages are all still missing the shadow around the main post area. Is that something that would be in buddypress instead of the blog theme?

  • ThePath
    • The Bug Hunter

    Hi, Did you sort this?

    I had a quick look at your site and it seems you have most of the shadows working on the Group page except the main content area.

    To fix:

    /blog/wp-content/themes/bp-fun/_inc/css/bp-css.css

    edit css at line 25 and add you box shadow code:

    #content {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 0 3px 4px 1px #222222;
    float: left;
    width: 655px;
    }

  • Jeff
    • Design Lord, Child of Thor

    Thanks! That worked, but I’d really like to have this in the child theme so that id doesn’t get overwritten every time I update the parent theme. I tried copying the bp-css.css file to the child theme but it didn’t work. What else do I need to do to get it to be called from the bp-css.css file in the child theme?

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.