Dear all, there is a good article at CS-Cart knowledge base regarding “Full- and Custom-Width Layouting with 960.gs”, can any one let me know how to achieve this in CS-Cart Version 4.0.1, any help is much appreciated, thanks in advance.
Note: I tried to apply the guide to the file that reside at www.example.com/store/design/backend/css/lib/960/960.css but in vain.
My dear friends, now there is a good article that is applicable for CS-Cart version 4.0.x at CS-Cart knowledge base regarding “Full-, Custom-Width, and Responsive Layouting with Bootstrap”.
However in my personal opinion it is some what incomplete due to following reasons:
Note No: 1. The article states:
Full-Width Layout
To set the full-width layout:
Replace container with container-fluid in the file:
design/themes/basic/templates/views/block_manager/render/container.tpl
Replace row with row-fluid in the file:
design/themes/basic/templates/views/block_manager/render/grid.tpl
Now, the page will have the full-width layout.
Now I edited the following lines in the file “design/themes/basic/templates/views/block_manager/render/container.tpl”
{$content nofilter}
to this
{$content nofilter}
and
Now I edited the following lines in the file design/themes/basic/templates/views/block_manager/render/grid.tpl
{if $grid.alpha}
{/if}
{if $grid.status == "A" && $content}
{$content nofilter}
{/if}
{if $grid.omega}
{/if}{if $grid.status == "A" && $content}
{$content nofilter}
{/if}
{if $grid.omega}
to this
{if $grid.alpha}
{/if}
{if $grid.status == "A" && $content}
{$content nofilter}
{/if}
{if $grid.omega}
{/if}{if $grid.status == "A" && $content}
{$content nofilter}
{/if}
{if $grid.omega}
but no success, then I tried this
{$content nofilter}
to this
{$content nofilter}
however, no success
Note No: 2. The article states:
Setting the Fixed Width of the Page
To set the fixed width of the page (1200px, for example:)
Set the page layout for the full-screen size, as described above.
Find the line 107 in the file bootstrap_grid_16.min.css. The path to this file:
design/themes/basic/css/lib/bootstrap/bootstrap_grid_16.min.css
To the container-fluid class in this file add:
max-width: 1200px;
min-width: 1200px;
margin: 0 auto;
As a result, your line 107 will look similar to this:
container-fluid{...;max-width: 1200px;min-width: 1200px;margin: 0 auto;}...}
Now this is the default line 107 found in design/themes/basic/css/lib/bootstrap/bootstrap_grid_16.min.css:
.container-fluid{padding-right:15px;padding-left:15px;*zoom:1;}.container-fluid:before,.container-fluid:after{display:table;content:"";line-height:0;}
Now where in the middle shall I add the above code.
Any help with Note No:1 and Note No:2 is very much appreciated.
Are you clearing the cache after doing the edits?
[quote name='NairdaCart' timestamp='1373617724' post='165231']
Are you clearing the cache after doing the edits?
[/quote]
My dear NairdaCart, thanks for the reply. Before testing the new changes I cleared the cache in following ways.
- In 'Address Bar' of 'Firefox' browser I typed “admin_home.php?cc”
- Administration → Storage → Clear cache
- Administration → Storage → Cleanup generated thumbnails
Also I cleared all of the 'Firefox' browser cache.
For note 1 your second settings should work. I've just tried it on mine changing class = “container” and class = “row” to the fluid versions and it worked perfectly.
I'll be trying the responsive changes later today as I'm very interested in them.
My dear NairdaCart, thanks for the reply. My apologizes I couldn't get your statement
[quote name='NairdaCart' timestamp='1373626463' post='165238']
For note 1 your second settings should work. I've just tried it on mine changing class = “container” and class = “row” to the fluid versions and it worked perfectly.
[/quote]
can you elaborate your statement, also can you post the line of the code where you made changes.
All you have to do is to change the container class to container-fluid and the row class to the row-fluid in the two files specified.
Don't change the container references within the braces (Smarty tags) just the part where it says [color=#282828][font=arial, verdana, tahoma, sans-serif]
My dear NairdaCart, thanks for replying my thread, you have been a real help. As you told I made changes to two files and have pasted the edited code that reside in the file for your reference.
File: design/themes/basic/templates/views/block_manager/render/container.tpl
{$content nofilter}
File: design/themes/basic/templates/views/block_manager/render/grid.tpl
{if $grid.alpha}
{/if}
{if $grid.status == "A" && $content}
{$content nofilter}
{/if}
{if $grid.omega}
{/if}{if $grid.status == "A" && $content}
{$content nofilter}
{/if}
{if $grid.omega}
Usually I set 0644 permission for all file except .php files (0444), however as of now I have set permission 0777 for all files to experiment. In spite of all this effort I'm not getting the desired result. Any help from you is greatly appreciated.
On the CS_Cart dashboard go to Design/Template editor and click the Rebuild Cache Automatically setting to On.
I have that set on my store at the moment as I'm doing other changes and it's the only reason I can think of why you're not seeing the changes take effect.
If it works you can set it to Off afterwards so it won't slow your store down.
My dearest NairdaCart, big big thanks to you. You were right, my problems are solved now.