Jump to content
Agent Solutions

Scroll Bar - Change Color

Recommended Posts

Hey Naomi!

 

I've noticed that on your sites you have colored the scroll bar on the right hand side. I don't see this very often, I think it adds a little something extra to the site. Do you mind me asking how you did this?

 

B)

 

Jennifer

Share this post


Link to post
Share on other sites

Here is the code within a cascading style sheet

 

BODY {

scrollbar-face-color:#cc0066;

scrollbar-highlight-color:#cccccc;

scrollbar-3dlight-color:#ff99cc;

scrollbar-darkshadow-color:#ff99cc;

scrollbar-shadow-color:#ff99cc;

scrollbar-arrow-color:#ff99cc;

scrollbar-track-color:#ff99cc;

}

 

Tawnya


vainsiders.jpg

Share this post


Link to post
Share on other sites

Jennifer:

 

You can also use the rgb color code, instead of the hex code, whichever you feel most comfortable using.

 

BODY{

scrollbar-arrow-color:rgb(205,200,147);

scrollbar-3dlight-color:rgb(186,33,34);

scrollbar-highlight-color:rgb(186,33,34);

scrollbar-face-color:rgb(143,28,29);

scrollbar-shadow-color:rgb(79,8,9);

scrollbar-darkshadow-color:rgb(79,8,9);

scrollbar-track-color:rgb(195,189,127);

}

 

You would put this on your CSS (Cascading Style Sheet) so you would only have to make changes in one place, and not on every sheet.

 

P.S. My VisiBone chart states the following, "[X]HTML can use hexadecimal codes for colors, such as <font color="#D2AB4D"> . . . W3C suggests designers no longer use color codes in HTML, in favor of CSS alternatives that are nearly universal such as <span style="color:rgb(210,171,77)"> . . .

Share this post


Link to post
Share on other sites

Great info Naomi thanks!

 

I'm still trying to wrap my brain around some of this stuff, but it's very exciting when things start to really make sense. :P

 

Jennifer

Share this post


Link to post
Share on other sites

A Special Note About Using Colours on the Web:

Although modern computers are capable of displaying millions of colours on the screen, Web design is limited to only 216 colours. The reason for this is that Mac computers and PC's both use completely different colour palettes. However, they have 216 colours that are common to both. These 216 colours are considered "Web safe". Using the 216 Web safe colours means that your Web site colours will look fairly consistent on different computers (Mac or PC), different operating systems (Windows or Mac), as well as different browsers (Internet Explorer and Netscape Navigator, to name two).

 

Try to use websafe colours so that the colours are the same in all browsers and on all platforms.

 

There is a small color chart on my website at http://www.mediamage.com/DesignArticles/co...color/index.htm

 

A secret tip however is that if you always use the numbers 00, 33, 66, 99 in any combination, typically if I recall, they will be websafe colours.

 

Tawnya


vainsiders.jpg

Share this post


Link to post
Share on other sites

Adding even more to Tawnya's note, hey we have a real converation going here! :D

 

I do not worry as much about the web safe colors because I work with Adobe Photoshop. It has a great feature where you can preview the template you designed, as it would appear in a Mac environment. Go to View, Proof Setup, and select Macintosh. In most cases, what will happen, is the site will appear much lighter than it appears in Windows, or your monitor set up.

 

I also test the template on IE, Netscape, and Mozilla.

 

Between the PhotoShop and the browsers, I get the color I am comfortable with, and use those. I am opposite of Tawnya, I would use web safe colors only if the client insisted. In most cases, since I have checked the site in various modes, the clients have been happy with the colors, thus far.

Share this post


Link to post
Share on other sites

Great info ladies :thumbup:

 

I love learning something new everyday. Today I think I have learned half a dozen different things thanks to this forum and its members.

 

Thanks everyone!

 

B)

 

Jennifer

Share this post


Link to post
Share on other sites
I love learning something new everyday.

Me too! I never knew of this feature through photoshop! I happen to be lucky enough that my beau runs a MAC so I have access to the MAC now in my office as well. Now however, I can just view it through photoshop.

 

So I went to test it on a website I'm working on that shows colours a bit different on my PC versus my beau's MAC. It appears to work although the colours are still a bit brighter on his MAC, however this could just be some settings on his monitor as well.

 

Thanks for the tip Naomi!

 

Tawnya


vainsiders.jpg

Share this post


Link to post
Share on other sites

Here's a question about javascripts while on the topic of learning something new....is there a way to call them in the head (seperate text file) so that all the javascript is hidden in this file instead of in the HTML?

 

I know for my navigation I call it like this:

 

</script>

<script type='text/javascript' src='js/menusp_var.js'>

</script>

 

 

Tawnya


vainsiders.jpg

Share this post


Link to post
Share on other sites
P.S.  My VisiBone chart states the following, "[X]HTML can use hexadecimal codes for colors, such as <font color="#D2AB4D"> . . . W3C suggests designers no longer use color codes in HTML, in favor of CSS alternatives that are nearly universal such as <span style="color:rgb(210,171,77)"> . . .

I’m late, but I want to comment anyway. ;)

Visibone could have definitely worded that statement better, so let me clarify it a bit. The W3C formally deprecated the use of HTML elements and attributes for specifying color in 1997; authors are encouraged to use CSS. Deprecated tags like <body bgcolor="#ffffff"> or <font color="#006633"> are certainly valid in HTML 4.01 Transitional documents, but you’re not supposed to use these tags in HTML 4.01 Strict documents or in any flavor of XHTML.

 

The W3C’s latest recommendation for color values and units states that colors can be expressed as keywords or in numerical RGB format. RGB numerical values can be noted in hexadecimal format (#ff0000 or #f00) or in a functional format like rgb(255,0,0). The W3C has not indicated a preference for any particular color unit or numerical RGB notation format.

http://www.w3.org/TR/2004/CR-CSS21-2004022...tml#color-units

 

HTH,

Carol

Share this post


Link to post
Share on other sites

LOL, you are right Carol. That is a heck of a lot better explanation than my VisiBone chart. :D

 

Tawnya: I'm not sure of the answer on your question. If you find out, please let us know.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Want to Become a VA?
    Invest in The VAC!
    How Do YOU Startup A

    Virtual Assistant Organization Association
    Upgrade Your FREE Account & Receive Today...
    * Access to Our Bus JOB Board *
    * Group Coaching & Training*
    *Training Tracks*
    * Private Mastermind Area *
    * Business Templates *
    * Contracts & Forms*
    * Plus VAinsider Perks! *
    UPGRADE HERE


    Virtual Assistant Organization Association

    Virtual Assistant Organization Association











×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.