BigCommerce - Hosted Ecommerce Software by Interspire

Interspire Forum

 
Go Back   Interspire Forum > Interspire Shopping Cart Community Forum > Customization and Integration > Code Modification and Addon Releases

Reply
 
Thread Tools Display Modes
  #1  
Old 05-13-2009, 12:06 PM
Paul + Paul is offline
Interspire Customer
 
Join Date: Jan 2009
Location: Dublin
Posts: 19
Default Simple FIR H2 for SideCategoryList

Hi everybody,

Heres a simple piece of css Im using to replace the H2 heading on the Left menu (usually called Categories)

Locate and edit your Panels/SideCategoryList.html file, it should look like this:

Code:
                <div class="Block CategoryList Moveable" id="SideCategoryList">
                    <h2>%%LNG_ProductsByCategory%%</h2>
                    <div class="BlockContent">
                        <ul>
                            %%SNIPPET_SideCategoryList%%
                        </ul>
                    </div>
                </div>
Replace this code with the following:

Code:
                <div class="Block CategoryList Moveable" id="SideCategoryList">
                    <h2 id="MyFirSideCatHeader"><span>%%LNG_ProductsByCategory%%</span></h2>
                    <div class="BlockContent">
                        <ul>
                            %%SNIPPET_SideCategoryList%%
                        </ul>
                    </div>
                </div>
Upload, check that it works and inspect with firebug. Now for the fun part, add the following css to one of your stylesheets (your theme.css stylesheet should do)

Code:
/* MyFirSideCatHeader css */

#MyFirSideCatHeader {
    width: 100px;
    height: 50px;
    background-image: url(../images/categories.gif);
    }

#MyFirSideCatHeader span {
    display: none;
    }
Thats all, now the h2 heading will disappear with display:none and be replaced with your categories.gif, youll have to adjust the dimensions and padding to suit your site.

Code is referenced from this website:
http://www.mezzoblue.com/tests/revis...e-replacement/

I guess you could use SFIR (where a swf flash object replaces the graphic if you wanted to get fancy) + you could use this trick on some of the other panel headings.

Cya
Reply With Quote
  #2  
Old 05-13-2009, 05:15 PM
AnimalMakers + AnimalMakers is offline
Interspire Customer
 
Join Date: Mar 2009
Posts: 171
Default

Can we get a screenshot or url of this in action? I am not sure what is being resolved here.

Last edited by AnimalMakers; 05-15-2009 at 04:24 PM..
Reply With Quote
  #3  
Old 05-14-2009, 12:47 PM
Paul + Paul is offline
Interspire Customer
 
Join Date: Jan 2009
Location: Dublin
Posts: 19
Default

It's just a way to replace the title that normally reads "Categories" in a H2 font with a gif called categories.gif

Its a trick Im using because I found it much better that inserting an image tag into that panel.

It means you can change the filename, images dimensions, padding, float etc using your stylesheet instead of editing the html.

I used the easiest FIR method above, check the mezzoblue link for more examples.
Reply With Quote
  #4  
Old 05-15-2009, 04:25 PM
AnimalMakers + AnimalMakers is offline
Interspire Customer
 
Join Date: Mar 2009
Posts: 171
Default

OK, I have not need for this, but thank you.
Reply With Quote
Reply

Tags
classic fir, fir, image replacment

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump