Jump to content

Is it possible to change the blue color in foundation skin?


Ferguson230

Recommended Posts

Certainly. In the Foundation skin folder:

1. In the folder /css/, create the new file cubecart.red.css
2. In the folder /images/, create the new folder red
3. From the folder /images/default/, copy the folder /logo/ and its contents into the folder /images/red/

From the file foundation.css, copy all the button rules (from about line 1150 through about line 1316) and paste them in cubecart.red.css.

From the file foundation.css, copy the default link rule (from about line 3469 through about line 3478) and paste it in cubecart.red.css.

In the file config.xml, make this change:

From:

	<!-- You can have as many subthemes as you want
	<style images="false">
	  <directory>red</directory>
	  <name><![CDATA[Red]]></name>
	  <description><![CDATA[Red style]]></description>
	</style>
	-->

To:

	<!-- You can have as many subthemes as you want -->
	<style images="false">
	  <directory>red</directory>
	  <name><![CDATA[Red]]></name>
	  <description><![CDATA[Red style]]></description>
	</style>
	<!-- -->

You now have a style of "Red" available.

I leave it to you to discover the desired color codes for the button and a rules to get red hues.

The same procedure can be followed for other styles.

Link to comment
Share on other sites

After having edited the config.xml file, you must have CubeCart clear its internal cache. Otherwise, CubeCart will not re-analyze the config file. And now that there is a sub-style, in admin, Store Settings, Layout tab, you can choose to show this. In Skin Settings, "Default front-end skin", choose Red from the second drop-down selector. (Clear the cache.)

The latest version(s) of CubeCart uses a procedure whereby page resource files (javascript, css) are combined and squeezed (respectively). This shortens the download times by a few milliseconds. These squeezed files are cached by CubeCart. Thus, any changes made to them will require that CubeCart clear its internal cache. (Note: if you switch off cache and/or enable debug mode, this squeezing process is bypassed. As such, the individual resource files are downloaded. That means after editing a resource file, you will need to force your browser to fetch fresh copies overwriting what the browser has cached internally.)

 

Link to comment
Share on other sites

A cheat that i've used a few times, which may come on handy for the future.

Take a screen shot of the area you are interested in.

Open the screen shot with Photoshop (other image editors are available)

User the colour picker tool, and click on the colour in question.

You can now distinguish it's hex code, which is searchable in your code editor, plus also,  you can determine the hex code of your new colour and modify accordingly.

 

It may technically not be the correct way to do this, but it's worked for me numerous times.

Link to comment
Share on other sites

  • 4 weeks later...

Archived

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

×
×
  • Create New...