@husdom
http://www.w3schools.com/css/default.asp
Try looking at the html of the webpage using the developer tools in Chrome, Safari or Internet Explorer, or use Firebug with Firefox, or Opera’s Dragonfly…
Aces,
Would you please invest a few minutes and teach a man how to fish?
I open the page in Chrome web developers tools… I highlight every line on the left and change every color on the right that is light gray or white to a darker color.
Would the result show up on the page as the changes are made? I didnt see any changes.
Once I find what it is that I need to change how do I make the appropriate changes in the theme?
Regards,
Mr Fox
@husdom
Select the developer tools window.
In the bottom left corner of the developer tools window you should see a magnifying glass icon. If you hover over it you get the message: select an element in the page to select it
Once selected if you hover over items on the page it will show you extra details.
Click on an item, such as a page title and the developer tools window finds the html on the left side of the Elements tab.
On the right side you will see all the css rules relating to that particular html item.
Look down the list until you find a colour property that isn’t crossed out ( crossing out means the property has been over-ridden. )
Click on the colour and a selector should appear to allow you to change it. You should see the results straight away
If you deselect/untick the colour other colours that were previously crossed out may then be used.
Once you know which css rule is being affected, you then need to add it to your child theme.
So for instance to change the text colour and background of your theme you may be able to add something like
body {
background-color:#30F
color:#F00;
}
Some simple colours are recognised by css, such as red.
You may need to add other selectors with body to increase the importance ( ability to over-write ) of the rule.
Hope that helps….
Aces,
Thank you for teaching me to help myself… Much appreciated…
http://littlekaninchen.com/members-3/
I did what you said and used the magnifying glass to highlight the top section of the white members box. It is located just below the ALL Members tag. I locate the code on the right.
media=”all”
#buddypress div.item-list-tabs#subnav {
margin: 0;
overflow: hidden;
background: #0E0C0C;
padding: 10px;
border-bottom: 2px solid #c2c2c2;
}
I changed the background color to the black color. I then cut and pasted this directly into my theme css box. No changes were made to the page.
What am I missing?
Your help is very much appreciated.
Mr Fox
@husdom
You don’t need the media="all" bit.
Also it is better not to repeat properties that stay the same so:
#buddypress div.item-list-tabs#subnav {
background: #0E0C0C;
}
Should work.
It certainly works in chrome on your website. Do you see it in chrome?
I don’t know what you mean by your ‘theme css box’? If you mean that your theme has an option to add ‘raw’ css then it may be added before other style sheets / rules and therefore over-ridden, but I can’t diagnose that from here.
This should go at the end of your child theme’s style.css file – To over-rule earlier properties. If your theme doesn’t enable child theme’s then it should go at the end of the theme’s style.css but that is sub-optimal.
Unless it has been disabled you should be able to add this in the editor area of your WordPress’ admin’s appearance section although it would be better done in a text editor and the style.css uploaded via ftp.
Aces,
I absolutely see it in Chrome…
Thank you for teaching me how to make these changes for myself.
Yes my theme has an option for adding over riding css attributes.
I did not create my child theme so I believe that I will go back and do that before I continue formatting my website.
A sincere thank you for your time and knowledge today.
Best Wishes,
Mr Fox
