change colour of text boxes

  • Unknown's avatar
    mclarenleisure · Member ·

    i want to change the colour of the text boxes to match the background colour – can someone tell me how to do this? upgrade already active

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

  • Unknown's avatar
    timethief · Member ·

    Hi there,
    This thread will be moved to the CSS Forum for you. Please do not create a duplicate thread.

  • Unknown's avatar
    designsimply · Member ·

    I checked http://mclarenleisure.wordpress.com/ and I see that you are currently using the Standard theme. That theme uses a white background for several content areas. As a starting point, here is an example that will remove the white background color from the main elements where the theme sets them:

    .custom-background #sidebar .widget,
.post,
#comments,
#pings,
#no-comments,
#comment-form {
	background: none;
}

    As you can see if you preview that example, there would be several other text colors, borders, and possibly widget content that you would also need to adjust manually. It would take a bit of work but we could go through them one by one. Before continuing though, is that what you had in mind and is Standard your final theme choice?

  • Unknown's avatar
    mclarenleisure · Member ·

    Hi, thanks for the reply. Yes, we do want to go for the standard theme- we like the layout and the two menu option. I would like the text box areas to be the same colour as whatever background colour we choose (most likely navy). I really dont know about coding though so the examples mean nothing to me, sorry.
    Emma

  • Unknown's avatar
    thesacredpath · Member ·

    Emma, in your dashboard go to Appearance > Custom Design and click on the CSS tab, then delete the informational text from the CSS area and paste in the code that @designsimply gave above and you can preview the result and then let us know if you want to proceed with the other changes @designsimply mentioned.

  • Unknown's avatar
    mclarenleisure · Member ·

    Thanks, managed that- we would like to go ahead with the other changes- can you send me codes for this? (our IT person can help if i cant do!)
    Emma

  • Unknown's avatar
    designsimply · Member ·

    This forum is for helping you get started learning CSS and to help you with any issues you may have with the Custom Design upgrade itself. Staff and volunteers both are around to offer help with CSS examples, but in-depth custom spec design work should go through a designer that you hire: http://en.support.wordpress.com/customize-my-site/request-theme-customization/

    It all depends on what you need help with and how much time it will take, but we can totally help you here in the forums if you’re willing to dive in and work on it yourself!! It’s on of the things the custom CSS editor is there for. :)

    To continue the example from above, I looked at the classes page:
    http://mclarenleisure.wordpress.com/classes/

    To get started, you could change the body text color and the link colors like this:

    body,
.post-header-meta {
	color: #eee;
}

a {
	color: #83B3BD;
}

a:hover {
	color: #3F6D85;
}

    This rule changes all titles that don’t have any specific CSS rules applied to them to white:

    h1, h2, h3, h4, h5, h6 {
	  color: #fff;
}

    These rules will change the link colors in the widgets in the sidebar:

    .widget ul li a,
.widget h3.widget-title a,
.widget h4.widget-title a {
	color: #eee;
}

.widget ul li a:hover {
	color: #bbb;
}

    Now, I think this is a lot to take in, so if you want to step back at any point, I would recommend starting with a basic CSS tutorial like this one:
    http://www.htmldog.com/guides/cssbeginner/

    You can also start experimenting by changing out the color codes such as #fff for white or #83B3BD for light blue to different color codes:
    http://en.wikipedia.org/wiki/Web_colors#X11_color_names

    Looking at the classes page again, there’s a breadcrumb at the top that has a white background. That wasn’t covered by the first CSS example I posted above because there aren’t any breadcrumbs on the home page and that’s where I was looking when I made the first example. To get rid of the white background for breadcrumbs, you could add this:

    .breadcrumb {
	background: none;
	border: none;
	box-shadow: none;
}

    For the home page, the linked post titles should probably be a lighter color, here’s how to turn them white:

    .post-title a,
.post-title a:visited {
	color: #fff;
}

    Now, one of the past rules we added before has made the calendar text too light to read because the calendar still has a white background. To set that back, you could use CSS rules like these:

    #wp-calendar {
	color: #333;
}

table#wp-calendar caption {
	color: #eee;
}

    If you put all of those rules together, that will get you a pretty good start. However, I do see that you are new to CSS and what you’re asking about is advanced, so be patient when trying to put it together :) do check out the CSS tutorials and dive in and start experimenting to see what changes when you add new CSS code to the Appearance > Customize > CSS panel.

  • The topic ‘change colour of text boxes’ is closed to new replies.