css coding for text headings

  • Unknown's avatar
    mmojogold · Member ·

    Hi,

    Having some issues with text colours when I customise. I wish to have a black background for my blog and standard pages with white text but also wish to have an image as the very background of the whole site. When I use the standard customise colour to get a dark background with white text you can’t see some of my headings because the stays theme has a light grey background for the header and side bars that the white text does not work on. (have a look at my current sight to see my issue with the labels etc)

    jeremeylduvall provided some css code to change the colour of the menu headings.eg.

    .navigation-main a {
    color: red;
    }

    Can you please provide the css coding to change the colour for the following (I have hex codes) so please just put in blue as example:
    1) headings
    2) site title
    3) site description
    4) main body text
    5) links
    6) Any others that I will have an issue with for white on light grey?
    7) blog background to black
    8) page background to black

    Sorry to be such a newbie – I really appreciate your help as I have wasted so much time on this already and really want a black background with the white text but of course need the headings/links/site info to be able to be read (just can’t get it to work with standard colour customize options with stay theme). Once this is up and running I will have more time to be able to look more closely at this css stuff but my launch date is getting closer and I really appreciate the codes please.

    Thank-you, thank-you and thank-you.

    Mariska.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    6) Any others that I will have an issue with for white on light grey?

    This alone could be a lot of things. :)

    I think the best way to approach this would be to use the Appearance > Customize > Colors tool to set the text and link colors (the two circles available there) to a very light gray and then figure out how to copy the CSS for those colors. Then you can just set the content container background to black manually (something you cannot do with the Colors panel). Figuring out the changes, either way, is a lot to update. I will provide and example to get you started, but when it comes to finding every single element that might have an issue, I’m going to ask you to help test and look out for things and when you find some then I will show you how to change them on your own from that point.

    To figure this out, I activated the Stay theme on my own blog and used the Appearance > Customize > Colors panel to set the text and link colors each to #eee. Then I saved changes, viewed the blog home page, and copied the “custom-colors-css” styles from that page. I added a rule to the top to make the background black for a few major content container areas, and I also made a few other minor adjustments. Here is the result:

    #page,
.hentry,
#home-widgets {
	background-color: #000 !important;
}
.sticky {
	border: none;
}
.hotels-listing {
	background-color: #F6F6F6;
}
.social-links a {
	background-color: #000;
}
.social-links a:before {
	color: #eee;
}
.featured h2 {
	background-color: #FFFFFF;
}
#home-widgets {
	background-color: #FFFFFF;
}
.navigation-main a:hover {
	background-color: #FFFFFF;
}
.navigation-main ul ul {
	background-color: #FFFFFF;
}
.navigation-main li:hover > a {
	background-color: #FFFFFF;
}
.navigation-main ul ul a:hover {
	background-color: #FBFBFB;
}
#site-navigation h1.menu-toggle.toggled-on {
	background-color: #FFFFFF;
}
#site-navigation.main-small-navigation .menu, #site-navigation.main-small-navigation .menu-primary-container, #site-navigation.main-small-navigation .menu-secondary-container {
	background-color: #FFFFFF;
}
.hentry {
	background-color: #FFFFFF;
}
.bypostauthor {
	background-color: #FFFFFF;
}
.widget_reservations {
	background-color: #FFFFFF;
}
#masthead .widget_reservations .contact-form, .widget_reservations .contact-form {
	background-color: #FFFFFF;
}
.widget_search input[type="search"] {
	background-color: #FFFFFF;
}
.widget_nav_menu a:hover {
	background-color: #FFFFFF;
}
.widget_calendar table {
	background-color: #FFFFFF;
}
.social-links li a:hover {
	background-color: #000;
}
.navigation-main, .widget-title, #colophon, #calendar_wrap {
	border-color: #FFFFFF;
}
.wp-caption {
	border-color: #FFFFFF;
}
.sticky {
	border-color: #DBDBDB;
}
a {
	color: #AFAFAF;
}
a:visited {
	color: #AFAFAF;
}
.navigation-main a {
	color: #AFAFAF;
}
body, button, input, select, textarea {
	color: #AFAFAF;
}
a img {
	border-color: #AFAFAF;
}
hr {
	border-color: #AFAFAF;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
	color: #AFAFAF;
}
button::-moz-focus-inner, input::-moz-focus-inner {
	border-color: #AFAFAF;
}
.comment-meta a:hover {
	color: #AFAFAF;
}
.site-title a {
	color: #AFAFAF;
}
.widget_search input[type="search"] {
	color: #AFAFAF;
}

    Each theme is unique, and some color changes take a lot more effort in one theme compared to another. For example, the Twenty Eleven theme has a dark theme option built right in that will change the background to black with one click.

    If you want to stick with the Stay theme and continue to make modifications, try adjusting the example above to your liking. If you find something you want to update that hasn’t changed colors yet, try using this method to find the right selector:
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    Note that some embedded things cannot be changed with CSS directly, such as the Facebook Like Box widget. In the case of that particular widget though, there is a dark color scheme available in the widget itself which you can modify from the Appearance > Widgets page.

  • Unknown's avatar
    mmojogold · Member ·

    Hi designsimply,

    Thank-you so much for all your time and effort to help me here. I really appreciate it.

    To be very honest I think I am in over my head with the css stuff at the moment (I am such a newbie – and a bit of a technophob!).

    I have decided that I will keep the stay theme but for the moment just have a light coloured background and can then use the customise – colours – selections. I need to get this website/blog fully functional by 5th of March as I have an advertisement in a magazine coming out on that day. I still have lots of elements to get into the website before then. I figure that once the initial setup rush is over I can spend some more time learning about css and look at the desired setup then.

    Once again thank-you for taking the time to help a new person. I will definitely keep and revisit all your notes above once I am able to give css the time it needs.

    Warmest regards

    Mariska

  • Unknown's avatar
    designsimply · Member ·

    Some themes are indeed harder than others to adjust! You just happened to pick a really hard change for the theme you happen to be using. :)

    Good luck with the magazine listing! That sounds awesome.

  • The topic ‘css coding for text headings’ is closed to new replies.