Jump to content

[Resolved] CC6 Subtheme


bsmither

Recommended Posts

Dirty Butter said:
"Been trying this afternoon to figure out how to add a subtheme, with no luck so far."
 
Let's create a /red/ sub-theme to Foundation. In the /skins/foundation/ folder:

In config.xml, add these lines:

Just above:
  </styles>
 
Add:
    <style images="false">
      <directory>red</directory>
      <name><![CDATA[Red]]></name>
      <description><![CDATA[Red style]]></description>
    </style>

In /images/, create a folder named /red/ and copy the /logo/ folder from /images/default/ into /red/.

Create a file named cubecart.red.css and place it in /foundation/css/.
 
In /foundation/css/cubecart.red.css, add these contents:

/* Use this to add specific CSS for this subtheme */

.top-bar {
    background: none repeat scroll 0 0 #ff0000;
    overflow: visible;
}
.top-bar-section li:not(.has-form) a:not(.button) {
    background: none repeat scroll 0 0 #ff0000;
.panel {
    background: none repeat scroll 0 0 #ff3232;
}

 
Important: In admin, Maintenance, clear the cache -- or in the folder /cache/, manually delete the file ABCDE.info.skins.list.cache.
 
If info.skins.list.cache exists when you install a new skin or subtheme to an existing skin, CC6 will not pick it up automatically.
 
Also, if you make changes to the css file, you may have to tell your browser to force reload the page resources so the latest version of the css file is fetched.

 

Finally, in admin, Store Settings, Layout tab, set the default front-end skin to Foundation - Red, or enable the ability to let the customer select the skin and choose the red subtheme from there.

Link to comment
Share on other sites

Thank You!!! Much more to it than I expected. I had ended up copying all foundation skin files and renaming to my own skin, since I couldn't get subtheme to work. Was able to proceed with that, but will certainly need this at some point to differentiate the look of our two stores.

 

It sounds like subtheme is more appropriate for simple color change type modifications. If I want to eventually re-arrange the grid, would my renamed copy of foundation be more appropriate?

Link to comment
Share on other sites

The CSS files are loaded in this order:

/skins/foundation/css/foundation.min.css

/skins/foundation/css/font-awesome/css/font-awesome.min.css
/skins/foundation/css/cubecart.css
/skins/foundation/css/cubecart.common.css
/skins/foundation/css/cubecart.helpers.css
/skins/foundation/css/cubecart.<problem>.css

 

Knowing that any follow-on css file has greater priority than any previous file, the last file loaded is for the subtheme. (But currently has a problem finding it.)

 

Foundation.css gives the skin the foundation look, and that cubecart.css gives styling to CubeCart features. Common and Helpers style certain things and may have some specific purpose.

 

The last css file is suppose to have the substyle (default, red, etc) which will override any css rule that was loaded previously. Therefore, how far one can take this, I do not know.

Link to comment
Share on other sites

Learning to change grid setup is off in the future for me as I become more familiar with Foundation, but in Blueprint all such changes are made within the templates files by choosing different number of columns for div's.
 
It appears that a similar arrangement is in use in Foundation, although the terminology is unfamiliar to me right now. If that is a correct understanding of structure, then subthemes might be all that is needed to vary the colors of different stores.
 
I've commented every color and text format change I've made so far, so it would be very easy to copy those changes to the /foundation/css/cubecart.subthemename.css file.
 
Any grid arrangement differences would then be accomplished in the templates of the two stores, if I'm correct.

Link to comment
Share on other sites

So the cubecart.default.css becomes the renamed subtheme file?

 

Something surprised me as I used Firebug to edit colors - body color in foundation.css would not allow me to use // for commenting, but did allow /* */ . All other comments I made accepted // without issue. But I changed all to /* */ just to be safe.

Link to comment
Share on other sites

  • 8 months later...
  • 7 months later...

Hi, Newbie here so be gentle.

I've done what it says in this thread but my subtheme seems to not be there.  I've duplicated foundation and added the detail above (called it stsa instead of red) Any ideas?

Part of config.xml:

  <styles>
    <style images="false" default="true">
      <!-- images: TRUE tells the template system that this style has its own image folder. FALSE would use the contents in the root of the images folder. For example with this as false images/image.jpg vs images/default/image.jpg if set to true -->
      <directory>default</directory>
      <name><![CDATA[Default]]></name>
      <description><![CDATA[Default Subtheme]]></description>
      <default />
    </style>
    <!-- You can have as many subthemes as you want
    Added a subtheme to take all the STSA stuff -->
    <style images="false">
      <directory>stsa</directory>
      <name><![CDATA[stsa]]></name>
      <description><![CDATA[stsa style]]></description>
    </style>
    <!-- -->
  </styles>

The file css/cubecart.stsa.css exists in same folder as css/cubecart.default.css and if I make changes in css/cubecart.default.css they are picked up.

Any advice would be appreciated.

 

Cheers

 

Dave

 

 

 

 

Link to comment
Share on other sites

"I've duplicated foundation and added the detail above"

To create a Foundation sub-theme, you do not need to duplicate the /foundation/ folder.

If you did, you should also edit the name of this new skin in this new folder's config.xml file.

So, keeping the edits to the real /foundation/ folder, be sure to clear the cache, then select the sub-theme in Store Settings.

You should also force your browser to reload page resources (typically CTRL-F5).

Also, if you have made a conscious selection of skin and sub-theme from the selector on the storefront, CubeCart remembers that. See if the new sub-theme is shown in the list of the storefront skin selector.

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...