Jump to content

I Can See Images But Not Colour Palettes In My "visually Impaired Custom Css"


optical10

Recommended Posts

Due to a visual impairment I cannot tolerate the standard white background, dark text of 99.9% of website's. After years of putting up with windows DOS like "high contrast black accessibility theme", I have decided to embrace the aero peck of windows 7 and custom CSS's.I use Opera web browser and I have been a kindly given permission to use a dark theme which is very close to a finished article for me but I need help on the above issue.The examples below show the frustrating the issue:http://www.colorhunter.com/tag/5C5A46/1colourhunter.com%20image%201%20-%20author%20mode.jpg_thumb.jpgcolourhunter.com%20image%202%20-%20Night%20mod.css%20mode.jpg_thumb.jpghttp://www.seoconsultants.com/css/colors/rgb.aspseoconsultants.com%20image%201%20-%20author%20mode.jpg_thumb.jpgseoconsultants.com%20image%202%20-%20Night%20mod.css%20mode.jpg_thumb.jpgUnfortunately I have not been able to ascertain with an editor (Style Master or Stylizer), mainly because I'm not skilled enough, which item needs to be transparent and why are the colored images visible and not the colour palette square's?I would really like to know why they are treated the same as an image of the future reference what they are called, sprites or something else?Even though some Web pages seem to be predominantly white background on the images like this one below, I think it's a small price to pay if the majority of a themselves with this CSS. However if you feel that there is a fundamental issue with this CSS and an open to suggestions. Any help gratefully is received. Code below last image.IGN.com%20Image5%20Night%20MOD%20-%20Toppage.jpg_thumb.jpg

@charset "utf-8";/* Name: Night Modified */ html {	background:#333 !important;	}html * { 	background-color: transparent!important;	color:#bbb !important;	font-family: "Sansation Bold", "Sansation Light", "Sansation Regular"!important;	border-color:#333 !important;	border-width:0 !important;	} html a, html a * {	color:#5c8599 !important; 	text-decoration:underline !important	}html a:visited, html a:visited *, html a:active,html a:active * {	color:#525f66 !important	}  html input, html select, html button,html textarea {  	border: 1px solid #5c5a46 !important;	border-top-color: #474531 !important;	border-bottom-color: #7a7967 !important;	}html input[type=button], html input[type=submit], html input[type=reset], html input[type=image], html button {	border-top-color: #7a7967 !important;	border-bottom-color: #474531 !important;		} html input:focus, html select:focus,html option:focus,html button:focus,html textarea:focus {	background:#5c5b3e !important;	color:#fff !important;	border-color: #474100 #665d00 #7a7849 !important;	/*border-top-color: #5c5400 !important;*/	outline: 2px solid #041d29 !important;	} html input[type=button]:focus, html input[type=submit]:focus, html input[type=reset]:focus, html input[type=image]:focus, html button:focus {	border-color: #7a7849 #665d00 #474100 !important;	}	 html input[type=radio] {	background:none !important;	border-color:#333 !important;	border-width:0 !important;	}   html, html body { 	scrollbar-base-color: #4d4c40 !important;	scrollbar-face-color: #5c5b3e !important;	scrollbar-shadow-color: #5c5b3e !important;	scrollbar-highlight-color: #5c5b3e !important;	scrollbar-dlight-color: #5c5b3e !important;	scrollbar-darkshadow-color: #474531 !important;	scrollbar-track-color: #4d4c40 !important;	scrollbar-arrow-color: #000 !important;	scrollbar-3dlight-color: #7a7967 !important;	} /* Link shadows *//*@media screen and (min-width: 128px) {	html a:hover,	html a:hover * {		background-color: #333 !important; 		text-shadow: 0 0 1em #023 !important; 		}}*/ /* Webkit */@media all and (-webkit-min-device-pixel-ratio:<img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> {		html body * {		-webkit-transition: color 1s ease-in, background-color 2s ease-out !important;		}	html a,	html textarea,	html input,	html select {		-webkit-transition: color .4s ease-in, background-color .4s ease-out !important;		}	html img[src],	html input[type=image] {			-webkit-transition: opacity .4s ease-in !important;		}	html input:focus, 	html select:focus,	html option:focus,	html button:focus,	html textarea:focus {		outline-style: outset !important;	}} /* Something ugly *//*html textarea, html select, html input {	scrollbar-base-color: #4d4c40 !important;	scrollbar-face-color: #4d4c40 !important;	scrollbar-shadow-color: #4d4c40 !important;	scrollbar-highlight-color: #474531 !important;	scrollbar-dlight-color: #7a7967 !important;	scrollbar-darkshadow-color: #7a7967 !important;	scrollbar-track-color: #4d4c40 !important;	scrollbar-arrow-color: #000 !important;	scrollbar-3dlight-color: #5c5a46 !important;	}

Link to comment
Share on other sites

I think the images are showing because images show (you are not removing background images). I'm suspecting the colour palette squares are NOT using an image, but merely a background colour, which you are removing from everyone here:html * {background-color: transparent!important;
I now that the above line in the code is the issue so my question is does any one think a code is able to discriminate and target white background colours, not coloured palette swatchs, to turn these elements to white on black or darker?I was advised that a jQuery was the way to go but until now know one has offered this advanced code skill ifI understand correctly?I'm sure many other visually impaired users would also benefit if this issue was progress.Thanks for reading.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...