Work continues on getting the theme working well with BP.
This is the page I’m struggling with. I was able to adjust the avatar margin-top and the form#whatisnew … but can’t get activity-inner to adjust.
http://www.thechembook.com/chemistrycircle
The bp.css from the template pack is loading but I want to be able to adjust
`
What are you trying to do with ‘activity-inner’ ?
`#activity-stream .activity-content .activity-inner {background: red;}` should work
At the moment I can see no styles applied for your ‘activity-inner’ element.
Correct. activity-inner was not even being applied. The theme allows the customization to occur through the control panel – rather than modifying a theme file. Therefore, the activity-inner was not being added ;because I wasn’t sure what css to apply
I’ll try the code you suggest and see what happens.
Thanks!
Update: Well, drats. That didn’t work. I added that to the theme and the css didn’t load. Firebug still doesn’t show the css activity.
Cool! I’d like to try the code too. Thanks for the info.
Edit – no spam links please. – Mercime
@LPH20005 I would strongly suggest not adding CSS in this manner, it may seem convenient but adding styles in the head of a document is bad practise for anything but the simplest adjustments, adding styles to the head is only used for particular and precise reasons where an external stylesheet is not able to help. Your head section of the page breaks a basic rule of keeping to an absolute essential minimum entries and in fact contains twice or three times as many lines as your actual content and search engines will probably never get to your content to start indexing (may not be a concern though) Head styles are not cached, a particular point of external files is that they are cached as separate objects speeding up page requests.
These frameworks are naughty in encouraging this level of customisation in this manner, with a little more work and advanced coding it ought to be possible to write the changes out to a file.
Try and edit your style file directly adding the rules to the bottom to see if you can effect the change desired, other than that there is too little technical info to go on to puzzle why the style rules are not being applied.
for the record I have just done this with your page and it works as expected!
`
/*
WOO CUSTOM STYLESHEET
Instructions:
Add your custom styles here instead of style.css so it
is easier to update the theme. Simply copy an existing
style from style.css to this file, and modify it to
your liking.
*/
#activity-stream .activity-content .activity-inner {background: red;}
`
Use this stylesheet they provide for most of your customisations rather than squirting them into the head.
@hnla – as always – you are the champion of css. I totally misunderstood the custom.css file and was adding the css into the dialog box on the Sealight control panel labeled custom css: “Quickly add some CSS to your theme by adding it to this block.” Without even looking, I just figured it was building that custom.css file. Plus, if I didn’t add it into that box then the styling wouldn’t work. Silly me.
Now, in terms of the activity-inner styling … I’ve now added it all to the custom.css and still can’t get activity-inner to work. Sigh. I’ve left that code in the custom.css and it doesn’t show in firebug either.
http://www.thechembook.com/chemistrycircle
I was going to work on getting the styling of the bubble like I did here: http://www.thechembook.com/groups/advanced-placement-chemistry-learners/forum/topic/the-atom-fast-facts-a-summary-sheet/
There is a conflict somewhere but the trouble with these module/plugin based applications is that there starts to become far too many conflicting styles floating around, CSS is a precise and fiddly language having to do far more complex operations with the DOM than at first is apparent, and the structuring of CSS is very crticle, the more styles that are being applied ( there are 17 stylesheets at work here unheard of or acceptable a few years ago) the harder it is to debug what’s happening.
If I remove the styles that you have applied to custom.css and add back my test example it does work so is suggestive that there is a syntaxical error in the rules somewhere but trying to debug minified styles is not really possible.
Check over that style sheet carefully in it’s unminified state and look for missing ‘;’ or ‘}’ also the habit that minifying has of removing all white space is actually bad practice and shouldn’t be done there should be white space between properties and values and selectors and opening ‘{‘ especially given there were tricky bugs that crashed parsing of styles in earlier browsers.
Thank you for the suggestions. I’ll be working on that page in a couple hours and will go through the custom.css style sheet that was created by copying the style.css and adding in the new css for customization.
I believe that the minify is done by cloudflare – so that is a setting that I can change.
Again – thank you for the advice and help. You are the best.
Quick update: I looked at the custom.css file and there are tons of places without the spacing. I’ll add those in quickly … but I noticed this … what is this?
`.nav li ul ul li a { }
.nav li ul li ul li a { }`
Weird
Well they’re empty for starters By the looks of it those are dropdown rulesets. The selector sets resemble classic Suckerfish css rules. They’re descendant selectors along the lines of an anchor that has a parent or antecedent li that has a parent or antecedent ul that has a parent or antecedent li etc etc if all matches then apply ruleset – it would be a set of properties for an anchor that is nested at approx 3 levels deep in a dropdown.
It works !
There were 5 places without semicolons and one place with a ) rather than } ….
The code now loads with your suggestion and I’ll add in the css code to make the gradient now but wanted to thank you again for the help.
I’ll have to dissect your last response over time