Jump to content

Foundation skin - changing colours?


vidmarc

Recommended Posts

I made the change from Blueprint to Foundation when v6 was new. I am certainly not someone who does such things easily, but I managed to get what I think is a good approximation of our old pages.

Most of the changes are just color changes, but making the mental change from 12 columns in Blueprint to the column system in Foundation takes a little getting used to.

Take a look at our plushcatalog. You will probably want SemperFiWebServices' Vertical Navigation plugin and perhaps his Site Document Manager mod.

Link to comment
Share on other sites

Make a copy of Foundation with your own folder naming. Edit the config.xml file something like mine:

	<uid>[email protected]</uid>
	<type>skin</type>
	<name><![CDATA[blue]]></name>
	<display><![CDATA[MY Blue]]></display>
	<version>1.0</version>

That will give you a way to play, and when you are satisfied with it, your changes on your skin will NOT be over-written by a CC upgrade. All you would need to do is compare the current version's Foundation files with the upgraded version and adjust YOUR skin code accordingly - so far those have been fairly minor tweaks that were no big deal.

PM me if you want to, and I'll email you my main.php and content.homepage.php files - probably where the most drastic changes are.

Link to comment
Share on other sites

Having made a copy of the /foundation/ folder using a new name (maybe /vidmarc1/), create a file in the /css/ folder named cubecart.child_name.css where child_name might be something like party_time. There is already a file named cubecart.default.css where you can apply some custom styling to the standard skin.

Having told CubeCart to use the Vidmarc1::party_time theme, CubeCart uses the cubecart.party_time.css file for the specific stylings.

Next, in the folder /images/, create a folder named /party_time/. In the /party_time/ folder, create a folder named /logo/. In /logo/, copy the default.png file from /images/common/logo/. In /images/party_time/, place any background and foreground images you want your child theme to have.

Next, in the skin's config.xml file, carefully study the commented section that shows a child-theme. Make a copy of that <style> node for party_time.

Finally, clear the cache so that CubeCart can re-enumerate the skins and each skin's config file.

Link to comment
Share on other sites

When I first started playing with the Blueprint/Foundation change - I went to ZURB and downloaded the CUSTOM Foundation skin, so I could input ALL my color scheme codes before the download. That saved me a lot of time when I created my own version of foundation that I named Blue. If you choose to do that as well, be sure you get the v5.5.1 Foundation.

As for software, I use BeyondCompare3 to load original vs my version of files - but I'm on a PC. There should be file difference software for Mac.

Link to comment
Share on other sites

Thanks for the help - do you know what the background and main text colour are? All I see at Zurb is:

Colors
Primary Color
# 2ba6cb
Secondary Color
# e9e9e9
Alert Color
# c60f13
Success Color
# 5da423
Warning Color
# ffae00
Body Font Color
# 222222
Header Font Color
# 222222
 
Are all the other setting best left as is?
Link to comment
Share on other sites

I made a few other changes after actually seeing what it looked like, but I left a lot of the odds and ends stuff in stock colors. Use FF Developer (wrench on menu) to Inspect Elements on your page to see where a given color is in the code, then you can change individually as needed.

Plushcatalog has an off white background, but estates has an image background.

Link to comment
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.

×
×
  • Create New...