Jump to content
Sign in to follow this  
Ferguson230

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

Recommended Posts

I would like to change the default blue color in foundation skin that highlights buttons and product titles, is there a way to do that? I am using CubeCart Version 6.2.2. Thank you.

Share this post


Link to post
Share on other sites

Posted (edited)

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.

Edited by bsmither

Share this post


Link to post
Share on other sites

Thanks @bsmither, I did follow the steps above, but when I change any of the color codes in cubecart.red.css, the front end still shows the default button color of blue.

Share this post


Link to post
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.)

 

Share this post


Link to post
Share on other sites
Posted (edited)

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.

Edited by keat

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.

Sign in to follow this  

×
×
  • Create New...