Question

My Question help text is shown with white font and small characters. I am not sure why (perhaps due to recent css changes I did on the site) and wish to change this.

Could you advise the css code for changing the font color and font size?

Answer 1

Here is the current CSS definition that is controlling the formatting.

#sidebar .module.newuser {
    background:none repeat scroll 0 0 #E4E4E4; 
}

---

On a side-note, it is really easy to discover this information without driving yourself crazy coming over here asking for help each time.

In the spirit of "teach a man to fish...", I'm going to offer the simplest possible way to explore the CSS properties for your site. If you continue to have trouble, we're more than happy to help. But try this out to see if it is an easier way to reach your goals.

Side Note: If you use (or want to try) the Chrome browser, CSS inspection is built-in. You simply navigate to your site and right-click the page element you want to inspect and click "Inspect Element." It looks really slick and gives you everything you want. Feel free to try this...

...But, I don't have a lot of experience using Chrome so I am going to describe the way most people inspect CSS... Using Firefox.

• Download Firefox: http://www.firefox.com
• Run Firefox as your browser and come back here to continue.
• From within Firefox, click on this link (the FireBug add-on page).
• Click on the big, green "add to Firefox" button.

To "inspect" the HTML/CSS on your web pages:

• Click here to go to your site's Question Help page.
• Press F12.
• Press Shift-Ctrl-C.
• Point your mouse cursor to the page element you want to inspect.

Cool, huh? On the left is the HTML of what you are pointing to. To the right is the CSS definition controlling the formatting.

Even if you are not a super-ninja CSS guru, this technique makes it really easy to answer those "how do I change this color" -type questions.

Note: I want to "document" this procedure in a screen cast I have been putting together (maybe as a series) but I haven't had the chance to finish it. Soon.

In the meantime, I hope this helps. Enjoy.

Answer 2

You're seeing this because the CSS selector I suggested in this answer is also matching the Question help text. You can partially remedy this by adding a wrapping div round one or other of the modules so you can identify it by id. The problem with setting the background this is that the inner div may then have a border around it and look a little odd.

For example, setting the content for the Question help as follows:

<div id=question-help>
  <h2>How to Ask</h2>
  <!--etc...-->
</div>

Then set the CSS for the content as follows:

<!-- don't set this if it will cause the background to look odd -->
#question-help  {
	background: #FFFF00;
}
#question-help a, #question-help h1, #question-help p{
	color: #FF0000;
}

Will match the div's contents and make the text red and background yellow. Omit the first selector to inherit the background.