Community Forums › Forums › Archived Forums › Design Tips and Tricks › changing color, fonts, and background
Tagged: background color, Primary Navigation Menu, widget
- This topic has 11 replies, 4 voices, and was last updated 11 years ago by WISR.
-
AuthorPosts
-
April 18, 2013 at 8:34 am #36142WISRMember
can someone show me where I change the following on my site. http://www.WiSR.ca
1. font size and font style of primary navigation menu
2.change 'Featured Communities" widget background color (white to black) and font color(black to white)
http://www.wisr.caApril 18, 2013 at 10:51 am #36161wmwebdesMemberHi
This is the CSS for your primary nav#nav {
color: #fff;
font-size: 13px;
}Looks as though it picks up font-family from the CSS below.
body, h1, h2, h2 a, h2 a:visited, h3, h4, h5, h6, p, input, select, textarea {
font-family: 'Droid Serif', arial, serif;
font-weight: normal;
line-height: 22px;
}Change the font size under #nav and add the font you want under #nav.
Let me know if you are OK with that.
April 18, 2013 at 11:01 am #36162wmwebdesMemberFor the Featured Communities add the background colour to .communities as shown below:
.communities {
border-bottom: 3px double #000;
clear: both;
margin: 0 auto 25px;
overflow: hidden;
padding: 0 0 15px;
width: 930px;
background-color: #000000;
}April 18, 2013 at 2:25 pm #36212WISRMemberGot it to work but now can't figure out how to change the font color in the "Featured Properties" widget.
Would like the background to be black but it washed out the font so I'll leave it for now.
Thanks for your help ๐
April 18, 2013 at 2:46 pm #36220wmwebdesMemberFont colour in “Featured Properties” widget is black (slightly off black) so you can't see it with a dark background.
Add
color: #333;
to .communities and change the colour to whatever you like.#333 is almost black.
Free colour picker here... http://www.iconico.com/colorpic/
April 18, 2013 at 4:21 pm #36234WISRMemberTried adding a color to the .communities (Featured Communities) but it wouldn't take.
Below is how it looks and I tried adding, color: #fff, (not shown below), directly below .communities { , but it didn't change the color of any fonts.
.communities {
border-bottom: 3px double #000;
clear: both;
margin: 0 auto 25px;
overflow: hidden;
padding: 0 0 15px;
width: 930px;
background-color: #000;
}.communities p {
font-size: 13px;
line-height: 20px;
padding: 0;I'm thinking it must be changed elsewhere, maybe under my "red theme" in .css?
April 18, 2013 at 8:01 pm #36268AnitaKeymasterEach home is a Featured Post, so the settings are there - but because a lot of elements are now combined, if you change 1 element, they change something else. You need to break it down so here's what to do:
For the black background, do this. Look for this code and change the background color to #000000 for black.
.communities { background-color: #DDDDDD; border-bottom: 3px double #000000; clear: both; margin: 0 auto 25px; overflow: hidden; padding: 0 0 15px; width: 930px; }
Then, copy and paste this at the bottom of your style.css sheet. I added the color in there - change the color to what you want.
.communities h2, .communities h2 a, .communities h2 a:visited { font-family: 'Droid Serif',arial,serif; font-size: 14px; color: #cc9900; line-height: 22px; margin: 0; text-align: center; text-transform: uppercase; }
Love coffee, chocolate and my Bella!
April 18, 2013 at 8:08 pm #36269ramseypMemberIf you want the whole widget background to be black, this should work (in your style.css):
`.widget.featured-listings { background: #000; }`
To turn the widget's font to white, this should work (also placed in style.css):
`.featured-listings .listing { color: #fff; }`
Community โข Work โข Conversations
April 18, 2013 at 8:12 pm #36270AnitaKeymasterOpen up your style... you added the at the beginning and end of the style sheet. Remove that code.
Love coffee, chocolate and my Bella!
April 18, 2013 at 9:01 pm #36284WISRMemberI was able to make the color change for the font below the images in "Featured Communities", and make the background black too.
The problem I'm having is when I change the color of the word " Featured Communities" to white, (so its visible with the black background), it also changes the headlines in my "From the Blog" section and the lower part of my slider text to white as well and they become invisible unless I hover over them with my mouse.
How can I change the color ofย the word "Featured Communities" to white and have the other 2 sections (stay black) not be affected?
Thanks for all your suggestions! This is quite a learning experience ๐
April 18, 2013 at 9:21 pm #36289AnitaKeymasterAdd this to the bottom of your style sheet:
.communities h4 { color: #ffffff; }
Love coffee, chocolate and my Bella!
April 18, 2013 at 9:29 pm #36294WISRMemberWOOHOOO!!!ย ย Thank you ๐
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.