CSS Issue (Style Selector removed, but I require the "light" style instead of dark

Michael James Swan posted this at 10:40 — 13th December 2013.

Joined: May 2008

Hello Everyone,

I have not been around much lately, however today I require some guidence from you lovely lot.

I have a design which I purchased, and I have been making changes to it.

The design came with a Javascript code (inside each page) which would allow "you" to select a different color, stylesheet, etc.

However, I have removed this "style selector" code from within each pages html but want to use the "light" style instead of the default dark.

<span> Version </span>

<select name="version" id="version"><option value="dark">Dark</option>

<option value="light">Light</option></select> "

That is the part of the "code" which allows me to change the style from Dark to Light (by clicking on the "option" light on the box "shown on page".

This is linked to "Customize.js" which shows this...

$('head').append('<link rel="stylesheet" type="text/css" href="styles/light.css" id="light" media="screen" />');
			$('.logo a').html('<   img src="images/logo_light.png" alt="Best and Most Popular Musics">');
		} else if(version == 'dark') {
			$('head #light').remove();
			$('.logo a').html('< img src="images/logo.png" alt="Best and Most Popular Musics">');
		}

The header has this:

<!-- Styles -->
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-responsive.min.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="style.css" id="dark" media="screen" />
		<link rel="stylesheet" type="text/css" href="styles/icons/icons.css" media="screen" />

I have already tried change the "id" to "light" and also tried changing style.css to "Styles/light.css", however it does not work...

I hope you can help.

Megan posted this at 16:12 — 13th December 2013.

She has: 11,421 posts

Joined: Jun 1999

I think what you need to do here is to add the styles/light.css stylesheet file into the linked stylesheet list after the 'style.css' file.

The dark version appears to be the default, and the JavaScript adds the light.css stylessheet to override it with the light version.

I edited your post to put your code in >code< tags, which makes it appear as code

Megan
Connect with us on Facebook!

Michael James Swan posted this at 14:04 — 28th May 2014.

He has: 400 posts

Joined: May 2008

Thanks Megan,

I tried your suggestion but did not work.

It should have done, but I moved on and got support from the author.

Thanks though!

Williamforrest posted this at 07:55 — 7th July 2014.

They have: 5 posts

Joined: Jul 2014

just for info, you cannot unload external css or internal css (within style tag) if you delete its tags. once they are loaded you cannot change them unless you fully overwrite them with the exact declarations as with the previous one..

Internet Marketing