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.
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:
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?
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.
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:
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?
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.
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.
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.)
Also, here is a better screenshot if that helps. Your system wouldn't let me upload it full size so I had to resize it which caused the low image quality.
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?
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?
hi bravegirlsclub
no need to copy paste the bp-css..just rename _inc/css/child-style-sample to child-style.css and add the added/extra css there...should be working ok.
Responses (12)
Member — 27th January 2012 #
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.
Support Chimp — 28th January 2012 #
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.
Member — 30th January 2012 #
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.
Member — 30th January 2012 #
Also, here is a better screenshot if that helps. Your system wouldn't let me upload it full size so I had to resize it which caused the low image quality.
http://screencast.com/t/b2EXzuOE
Member — 31st January 2012 #
bump
Geeky Developer — 1st February 2012 #
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
so theres no need to add class shad to each post-entry div
cheers
Member — 1st February 2012 #
Ok that is how I had been doing it, but it didn't seem to make a difference. I will try your second suggestion and let you know how it goes.
Thanks so much for your help.
Member — 1st February 2012 #
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?
Ach Crivvens — 2nd February 2012 #
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:
Member — 2nd February 2012 #
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?
Geeky Developer — 3rd February 2012 #
hi bravegirlsclub
no need to copy paste the bp-css..just rename _inc/css/child-style-sample to child-style.css and add the added/extra css there...should be working ok.
Member — 4th February 2012 #
Awesome! Thanks Richie!
Become a member