Changing Text Font Color

Dec 14, 2008 at 4:12 PM
Edited Dec 14, 2008 at 4:13 PM
Hi,

Setting up a new blog, some of a theme's text is faint and difficult to read, especially on a bright screen. An especially problematic text color is for the "Save comment" button at the bottom of a add-comment page: so faint it is difficult to notice all together.
(see http://www.elearningprojects.com/blogs/post/2008/12/13/Saturday-AM-Post.aspx#comment)

I have been searching, using an HTML editor, for the script that controls the font color, without success. I've located a number of font color codes, tried changing these, with no success: these must not be the right codes to change.

I would appreciate any suggestions, leads about which script on which stylesheet or other file governs a theme's or overall blog's text font color.

Thanks.

Kind Regards,

saratogacoach
Coordinator
Dec 14, 2008 at 6:16 PM
You probably have a CSS file in your theme folder?  The background color of your Save Comment button is currently being set to white.  The CSS looks something like:

input{
background-color:#FFF;
color:#999999;
border:1px solid #CCC;
font-size:11px;
padding:3px}

You can either delete the "background-color" style or change it to a different color.  Currently it's set at #FFF which is white.  Because this style is being applied to other buttons too, if you change or remove the background-color in this spot, the changes will also effect other input/button fields on your blog (like the Send button on the Contact page, for instance).
Dec 14, 2008 at 7:22 PM
Edited Dec 14, 2008 at 7:41 PM
Hi Ben,

Thanks for your reply.

I found the button in the CommentView.ascx page in User Controls (<input type="button" id="btnSaveAjax" value="<%=Resources.labels.saveComment %>" onclick="if(Page_ClientValidate('AddComment')){AddComment()}" tabindex="7" />) and add the following:

style="color: #666666; font-weight: bold; font-size: 10pt; border: 1px solid #666666". The end result was <input type="button" id="btnSaveAjax" value="<%=Resources.labels.saveComment %>" onclick="if(Page_ClientValidate('AddComment')){AddComment()}" tabindex="7" style="color: #666666; font-weight: bold; font-size: 10pt; border: 1px solid #666666" /> .

This increased the button text's font size, made it bold, changed its color and drew a border around the button, which can be seen at http://www.elearningprojects.com/blogs/post/2008/12/12/Friday-Test-Post.aspx#comment.

Being a newbie at this, my hope is that this way of making the change will not adversely affect the rest of the scripts and cause other problems on the blog.

I can see that one consequence of making the change in User Controls, rather than in the specific Theme's script, is that any new theme chosen will now have this changed "Save button".

As you point out regarding making changes in the Theme's background, that way of making the change can also affect other items. Maybe there is a way to change the Theme's script without adversely affecting other items, other themes.

Please let me know if there is a better way to make the needed changes.

Kind Regards,

saratogacoach
Coordinator
Dec 14, 2008 at 7:43 PM
You can still change the background color if you add another style directly to your input button like you just did by adding those other styles.  If you added background-color: blue; or some other color directly to the input button, this would override the value in the CSS file.

Some would argue (me too probably) that even though you can individually style buttons and other elements on certain pages, the disadvantage of this over changing the CSS file is that you end up with inconsistent styles on your blog.  For instance, now the Save Comment button looks different than the Send button on the Contact page.  It also looks different from the Search button in the upper right corner of your blog.  So pros and cons to each approach.

Pretty much any global changes you make in the CSS file will not cause any major problems with scripts or any other code on your blog.  Generally, the worst case scenario is something might just look bad.
Dec 14, 2008 at 8:44 PM
Hi Ben,

Thanks, again.

I made the changes to the CSS file instead: I changed the Font color and border color to #000000 (black). This made the "Save comment" button more visible and yet preserved consistency for other buttons.

A better option...

Kind Regards,

saratogacoach
Dec 15, 2008 at 3:12 PM
Edited Dec 15, 2008 at 4:01 PM
Hi,

I have one more item that needs changing: after creating a darker border for the "Save comment" button, I noticed that the text next to the checkbox for searching, "Include comments in search", now is touching the checkbox border. And, other text items (labels?) in similar positions (next to a checkbox) are also in need of being moved a space or two.

I searched in the usual places but cannot find where the script resides in order to move the text one space to the right and save the change.

I've tried opening the web page in an HTML editor. This can be done, but after making the change in this way, can't save the change because it is not clear what file/page to save it to. Unfortaunatley, I'm not knowledgeable about CSS, master pages, etc.

On my wishlist: a list of typical items that may need changing and where they are located (file name, identifying label) so they can be easily found, changed and re-saved. 

Any help will be appreciated.

Kind Regards,

saratogacoach


Coordinator
Dec 15, 2008 at 4:38 PM
I guess you're viewing your blog in IE (Internet Explorer)?  I use Firefox, so didn't see the border around the checkbox.  The border around the "Include Comments in Search" checkbox, "Notify me when new comments are added" checkbox, and "Remember me next time" checkbox don't look very good, IMHO.  You can remove the border for this checkboxes in your CSS file by putting the following block of code in there (it may need to be put into the file after the part where you are adding a border to the "input" elements).

input#searchcomments,
input#cbNotify,
input#ctl00_cphBody_Login1_RememberMe
{
  border: none;
}

Incidentally, it would probably be very difficult to have some sort of guide showing where and how to make changes to different elements on a blog.  Each theme is a little different, and everyone seems to have different parts of their blog they want to modify in their own unique way.
Dec 15, 2008 at 4:52 PM
Hi Ben,

Thanks again.

Yes, that script addition (at the end of the section in the CSS file) worked!

I wish a guide for changing these items could be available. It seems there are an endless number of tweaks needing to be done to create an acceptable "look." While this discussion board has a wealth of information, sometimes a specific item is absent or not easy to locate.

Kind Regards,

saratogacoach
Sep 23, 2009 at 12:33 PM

 

 

thanks for sharing this information guys.Its helpful.

regards,

sam - Tax relief

Oct 6, 2009 at 10:51 AM

I was looking for the method to use this fetaure,but i did not find.I will try out your method.


regards,

Salon - Loan modification

Oct 6, 2009 at 8:53 PM

I am beginner and i fell this is very useful information you have given me.

 

regards,

dave - Los Angeles DUI Lawyer

Oct 9, 2009 at 8:35 PM
salon926 wrote:

I was looking for the method to use this fetaure,but i did not find.I will try out your method.


regards,

Salon - Loan modification

just follow the instructions exactly salon.I too did same thing and did find useful.

 


regards,

Mick  - Los Angeles Personal Injury Lawyer

Oct 9, 2009 at 8:38 PM

Your tutorial has been excellent and i advise people to have look at it.It provides required information.

 

regards,

Akhil  - Florida Real Estate

Nov 27, 2009 at 7:28 PM

Hi, yes, I had the same problem, but this solution works.  Just follow the instructions!  Thanks!

John - Eco Products