Announcement

Collapse
No announcement yet.

Possible to vary css for frame and/or category

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Possible to vary css for frame and/or category

    I apologize in advance for this being more of a coding question than 3dCart, but I am trying to figure out whether it is even feasible to hire someone to accomplish this.

    For one of my store I am hoping to create a structure where the choice of a category or brand triggers changes to the css design elements of the frame and / or category page. For example, from the landing page, selecting Category 1 might change some or all of the background image, logo, color scheme, etc. Category 2, etc would have their own styles.

    In a sense this would need to be like 5 or 6 stores in one (all related)... obviously trying to keep it under one roof versus having a discrete store/domain for each. Thanks in advance!

  • #2
    Off the top of my head this is possible. You could load a replacement CSS file within the header of each individual category, and have the rules in that file over-ride the rules for the main site.

    Comment


    • #3
      This is possible with some structure and planing.

      This would be my approach, off the top of my head, using 2 layouts as an example:
      1) I would make a folder for each layout/design eg. style-1, style2.
      Put your images in the folder accordingly to the layout you want to use.
      2) make 2 CSS files and point the images to the correct folder, change color etc. eg. style-1.css, style-2.css
      3) In the Category Template page make a button and assign an "id" to it eg. <a href="#" id="changer">Click to change style</a>
      4) with a little jQuery magic have it swap the CSS file in your head section then have it look for all <img> tags and swap the folder location.

      NOTE: If you need to swap a lot of images keep in mind that this will slow your site down and use up a lot of bandwidth. Always optimize you images.

      I dont have time to write some code for you but here are some links to teach you and get you started.

      stackoverflow.com
      jquery.com
      https://www.google.com/search?q=swap...ient=firefox-a

      Hope this gets you started in the right direction.

      good luck and post your updates :)
      - Peace
      www.ifilters.net

      Comment


      • #4
        I just wanted to post back and share my progress. It took quite a bit of tinkering but in the end I managed to get everything to work pretty smoothly.

        The key for me was to set a cookie so that the user's selection would be applied across the entire site (not just the current page) and for future visits. See attached script to put in your template JS folder.

        Then just add a little bit of code in the frame header to pull in the CSS file chosen by the user:

        Code:
        <script type="text/javascript" src="assets/templates/[template]/js/jquery.cookie.js"></script>
        <script>
              if($.cookie("css")) {
                 $("link").attr("href",$.cookie("css"));
              }
           $(document).ready(function() { 
              $("#nav li a").click(function() { 
                 $("link").attr("href",$(this).attr('rel'));
                 $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
              });
           });
        </script>
        And put the choices wherever you want (I have in rough format in the Header section of my Home Page... will circle back on styling now that I have provedconcept). Note that I actually want to have the user's click both set CSS and send them to a product category... if you want to have them stay on the page just set href="#" instead.

        Code:
        Choose your brand:<BR>
        <ul id="nav" type="none">
        <li><A rel="assets/templates/[template]/css/OptionA.css" href="OptionA">Option A</A></li>
        <li><A rel="assets/templates/[template]/css/OptionB.css" href="OptionB">Option B</A></li>
        <li><A rel="assets/templates/[template]/css/OptionC.css" href="OptionC">Option C</A></li></ul>
        I hope that helps someone else... I needed this for a specific branding purpose, but you could do some pretty cool effects with minimal effort.
        Attached Files

        Comment

        Working...
        X