GARRYS WITTY WITTY forum
March 29, 2024, 01:15:17 am
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Welcome to SMF For Free
 
  Home Help Search Arcade Gallery Links Staff List Login Register  

How to Make, a Color Scheme option

Pages: [1]
  Print  
Author Topic: How to Make, a Color Scheme option  (Read 1731 times)
0 Members and 1 Guest are viewing this topic.
GarryRicketson
Admin
Administrator
Full Member
*****
Posts: 105



View Profile WWW
« on: May 17, 2011, 10:32:01 pm »

This is the html/css code, that I used to make the options, of 2 color schemes, on my web site: http://www.garryspages.webs.com
Code:
 <html><!--  Created with the CoffeeCup HTML Editor 2008  --><!-- Tweaked by YankiKiwi October 2-9, 2010 --><head><!-- ==== line below can be removed - used just to draw images etc from your site ==== --><base href="http://garryspages.webs.com/"> <!-- === line above may be removed === -->  <title>MAIN PAGE</title>    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">  <meta name="generator" content="CoffeeCup Free HTML Editor -  www.coffeecup.com">  <meta name="description" content="">  <meta name="keywords" content=""><style type="text/css">body {background:#a0a0a0 url(http://yankiwi.us/onyx_bricks.jpg) repeat fixed; color:#FFFF00;}body {font-family:arial;}a:link {color:#00ff00;}a:visited {color:#ccffff;}a:active {color:#ccffcc;}a:hover {background-color:gold; color:navy;}/*a {font-family:'Times new Roman';*/ #box1{ position: relative    margin-left:auto;     margin-right:auto;     border:2px solid navy;     padding: 0 1em 0 1em;     background-color:#1030c0;     text-align:left;            top: 20px; left: 50px; width: 780px; color: #ffff00; }        /*style="width:780px; margin-left:auto; margin-right:auto; border:2px solid navy; padding: 0 1em 0 1em; background-color:#1030c0; text-align:left;"*/ </style> <script language="JavaScript"> function change(){ document.getElementById("box1").style.borderColor = "#0000ff"; document.getElementById("box1").style.backgroundColor = "#ffffff"; document.getElementById("box1").style.color = "#000000"; } function change_back(){ document.getElementById("box1").style.borderColor = "#aaaaff"; document.getElementById("box1").style.backgroundColor = "#1030c0"; document.getElementById("box1").style.color = "#ffff00"; } </script></head><!-- ===========REWORK-3============= --><!-- Javascript code from CodePunk's JS tutorials adapted to switch background color --><!-- =============ORIGINAL CHANGES================  --><!-- ==== I used a alightly darker blue to improve contrast while keeping to your preference ==== --><!-- ==== Body color chosen as contrasting background to 'container' area **** REWORK version - added an image background hosted on my site, but feel free to copy it to yours *** ==== --><!-- ==== to keep the text from being too spread out on large monitors, my preference is to use a "container" division. I have used in-line styling to define it below but usually the coding would be put into the <style></style> sub-section in the head section or into an external stylesheet ==== --><div align="center"><input value="Change" onclick="change()" name="button" style="border: 2px solid black; background-color: yellow;" type="button" /> . . . . <input value="Back" onclick="change_back()"" name="button" style="border: 2px solid black; background-color: yellow;" type="button" /><div id="box1"  style="width:780px; margin-left:auto; margin-right:auto; border:2px solid navy; padding: 0 1em 0 1em; background-color:#1030c0; text-align:left;">
<body> This is Just a test </body>
</html>
You can paste this into note pad, and save it as a .html
Then try it in your browser, to see how it works,it also loads the Bricks, (border),
but that can be removed or changed to suit your tastes,needs.
Or if you prefer here it is as a .txt, just change it to .html, to see how it works.
from Garry

* ColorSchemeChoices.txt (2.92 KB - downloaded 245 times.)
« Last Edit: May 17, 2011, 10:49:30 pm by GarryRicketson » Report Spam   Logged

Share on Facebook Share on Twitter

EGMono
Newbie
*
Posts: 3


View Profile
« Reply #1 on: August 18, 2011, 08:28:00 am »

I prefer to keep everything organized and not bury style settings within javascript functions so I took your idea and rewrote it to switch style classes. All styles stay together, and javascript functions are much shorter.

An even better example:
http://www.ezineasp.net/post/Javascript-Change-Style-Class-of-Div-tag.aspx
Report Spam   Logged
GarryRicketson
Admin
Administrator
Full Member
*****
Posts: 105



View Profile WWW
« Reply #2 on: August 19, 2011, 10:39:56 pm »

EGmono,
 Thanks on this, and it looks like a good stie for more info too (the link),
 I guess I should have mentioned it, Well actually it is in the html code, but just to give credit where it is due, Yanki Kiwi, did the script, so it is not really my idea,..
 It was cause, on my first web site, http://www.garryspages.webs.com
It got real "cotroversial",...some people liked the colors, others said for reasons of color blindness,..they couldn't read it well, others just did not like the colors,. so it occured to me a good solution, would be to offer the reader the option,to switch to just plain Black and white,..scheme,...if that is what they want,...
 Now on my new site, I have not yet used this, but it will be a good oppurtunity to try yours too,...thanks
from Garry
Report Spam   Logged

Pages: [1]
  Print  
 
Jump to:  

Bookmark this site! | Upgrade This Forum
Free SMF Hosting - Create your own Forum

Powered by SMF | SMF © 2016, Simple Machines
Privacy Policy