Gold 10 / Bootstrap questions

For general questions and discussions specific to the AbleCommerce GOLD ASP.Net shopping cart software.
User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1283
Joined: Sun Nov 18, 2007 3:55 pm

Gold 10 / Bootstrap questions

Post by compunerdy » Thu Mar 19, 2015 1:13 pm

Is it safe to modify the boostrap theme to not have a max width?

If you use the whatsnew sidebar control you can set the days, etc for it. But if you use it as a alternate control for the minibasket then I see no way via the admin page to modify the settings for it.

If you use 1 column or 3 column layout for the category pages it will only display one column for the items no matter how wide the cell is. left and right sidebar layouts seem to display 3 columns no matter what setting you use.

During install I did have a couple of issue to note..
There was a error when trying to run install due to the webconfig file pointing to asp.net 4.5 (installing 4.5 fixed the issue)
The permissions test all passed yet when I started changing layout setting I had to change permissions for the layout directory.

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Gold 10 / Bootstrap questions

Post by mazhar » Fri Mar 20, 2015 1:16 am

Is it safe to modify the boostrap theme to not have a max width?
Its very easy to make it fluid. New theme is using LESS to generate css. All you need is to tell boostrap to use fluid container.

Code: Select all

.container();
to

Code: Select all

.container-fluid();
This will compile the CSS to be fluid instead of fixed width. In order to customize the theme with LESS file you need to do the following

1- Download Bootstrap LESS based source code from here https://github.com/twbs/bootstrap/archive/v3.3.4.zip
2- Extract the contents and locate folder name less in it. Then copy that folder to Website/App_Themes/Bootstrap_Responsive
3- Assuming that your are using Visual Studio make sure you have following extension installed. Its called Web Essentials

Code: Select all

http://vswebessentials.com/
This will automatically compile LESS into css as you will change style.less.
If you don't have Visual Studio then there are free less editor available. As Tim mentioned in this thread he is using Crunch!
4- Now you are all set to go. Just edit the style.less file in Visual Studio and locate following code

Code: Select all

.container();
and update it lie

Code: Select all

.container-fluid();
5- Once you save the file in status bar it will show message tell that Web Essentials is compiling your change. It will refresh the style.css and style.min.css files. So just refresh the page and it should be taking full width of page now.

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1283
Joined: Sun Nov 18, 2007 3:55 pm

Re: Gold 10 / Bootstrap questions

Post by compunerdy » Fri Mar 20, 2015 6:37 am

Figured that part out late last night but good info to have posted anyways, thanks. One part I have not figured out is how to have the side panels have a min/max width while keeping the center panel fluid on a 3 column layout.. Any ideas on that?

There is still the issue that one column and 3 column layout for category pages only displays one item wide. You can see a sample here http://69.16.216.57/Clips-Connectors-C37.aspx

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Gold 10 / Bootstrap questions

Post by mazhar » Fri Mar 20, 2015 7:30 am

Well in Bootstrap you work against 12 column grid which I assume you already know. You don't hard code the width you tell the container how much column space it should take. In default currently we give left and right sidebars 3 columns each while content section takes 6 column. That will describe the complete page space. If you want to reduce/increase the size of your sidebars in then update .make-md-column(3); to different value like .make-md-column(2); and then adjust spanning of other sections.

Alternatively you may try creating multiple containers on page but I am not sure about it. Like let header/footer have their own container. Similarly make content area have its own container while leave the sidebar out of any container.

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1283
Joined: Sun Nov 18, 2007 3:55 pm

Re: Gold 10 / Bootstrap questions

Post by compunerdy » Fri Mar 20, 2015 7:42 am

I did learn that much but since the largest size is 1200 and up a widescreen monitor like mine at 2560 leaves too much expansion to look very good. I will look into it more..

Any idea on how to fix the category display issue?

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Gold 10 / Bootstrap questions

Post by mazhar » Fri Mar 20, 2015 7:49 am

I overlooked that! It should be very easy to fix. Locate following code

Code: Select all

.leftSidebarLayout, .rightSidebarLayout {
and then upate it like

Code: Select all

.leftSidebarLayout, .rightSidebarLayout, .threeColumnLayout {
and that will do the trick.

If you want two columns for content area then you can add separate rule for it like

Code: Select all

.threeColumnLayout {
    .itemListing {
        .make-row();
        .tableNode {
            .make-xs-column(6);
            @media screen {
                @media(max-width:@screen-xs) {
                    padding:0 5px;
                }
            }
        }
    }
}

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Gold 10 / Bootstrap questions

Post by mazhar » Fri Mar 20, 2015 7:56 am

compunerdy wrote:I did learn that much but since the largest size is 1200 and up a widescreen monitor like mine at 2560 leaves too much expansion to look very good. I will look into it more..
BTW its good to know you can handle the LESS :) It gives extra confidence in decision of using LESS based approach. It really helped us keep the HTML clean and not specific to Bootstrap which also mean we are compatible with existing themes.

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1283
Joined: Sun Nov 18, 2007 3:55 pm

Re: Gold 10 / Bootstrap questions

Post by compunerdy » Fri Mar 20, 2015 7:58 am

I just downloaded a program called Crunch which is a LESS editor and once I figured out how the basics worked it is pretty easy to pickup.

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Gold 10 / Bootstrap questions

Post by mazhar » Fri Mar 20, 2015 8:02 am

great! I was also wondering to find and recommend some free editor for LESS not every one have Visual Studio. If you find the crunch easy to use then perhaps other can use it too.

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1283
Joined: Sun Nov 18, 2007 3:55 pm

Re: Gold 10 / Bootstrap questions

Post by compunerdy » Fri Mar 20, 2015 8:10 am

Yes it is easy to use. I just downloaded the bootstrap files and then put the style.less file from the themes directory in the same folder. Then in Crunch you just open the style.less file and make any changes you want and hit the crunch button which outputs a new style.css file that I then rename to style.min.css and replace the one in the themes directory with it.

That fix you posted worked great and I now have multiple columns of items displayed.. THANKS!!

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Gold 10 / Bootstrap questions

Post by mazhar » Fri Mar 20, 2015 8:18 am

I noticed you are missing the ICONS. This is because of missing font I guess. In Visual Studio we were using

Code: Select all

@icon-font-path: "../fonts/";
and it was able to resolve it to Website/App_Themes/Bootstrap_Responsive/fonts directory. Seems like crunch maybe generating different path then that.

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1283
Joined: Sun Nov 18, 2007 3:55 pm

Re: Gold 10 / Bootstrap questions

Post by compunerdy » Fri Mar 20, 2015 8:36 am

I was going to ask about that but your comment pushed me in the right direction.. This is partially because I am working with my themes on the server and editing the less file on my comp. I fixed it by downloading the fonts directory from the themes folder and putting into the bootstrap directory. I then changed the .less file to point to

Code: Select all

@icon-font-path: "fonts/"; 
and icons are back!

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1283
Joined: Sun Nov 18, 2007 3:55 pm

Re: Gold 10 / Bootstrap questions

Post by compunerdy » Fri Mar 20, 2015 6:14 pm

Found a easy way to tell what resolution you are in while testing.. Paste this code into your home page or wherever..

Code: Select all

<script type="text/javascript">// <![CDATA[
$(document).ready(function(e) {
   showViewportSize();    
});
$(window).resize(function(e) {
   showViewportSize();
});
function showViewportSize() {
   var the_width = $(window).width();
   var the_height = $(window).height();                   
   $('#width').text(the_width);
   $('#height').text(the_height);
}
// ]]></script>
<center>
<h2>Viewport Width:</h2>
<p id="width">Resize to find out!</p>
<h2>Viewport Height:</h2>
<p id="height">Resize to find out!</p>
XS = 0-767px<br /> sm = 768-991<br /> md = 992-1199<br /> lg = 1200-</center>

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Gold 10 / Bootstrap questions

Post by mazhar » Tue Mar 24, 2015 9:55 am

I wonder why you didn't noticed this viewtopic.php?f=65&t=18336 perhaps you were testing by re sizing your browser? If thats the case you can try Google chrome's device emulator to mimic a mobile device. All it would need open page in a tab, hit f12 button and choose device icon. Then select a device type and hit refresh.

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1283
Joined: Sun Nov 18, 2007 3:55 pm

Re: Gold 10 / Bootstrap questions

Post by compunerdy » Tue Mar 24, 2015 10:13 am

Did you put the wrong link because that thread was made 4 days after my post?

I am sure there are many ways to do the same thing and yes I was just resizing the browser to see how it would shrink and expand the columns.

On a side note where are you supposed to change the cell phone sized logo in the responsive theme? I know I can manually override the image in the themes directory but I was wondering if there was a way via admin.

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Gold 10 / Bootstrap questions

Post by mazhar » Tue Mar 24, 2015 10:27 am

I was referring to mobile redirect mentioned in that thread. Regarding logo you will need to override/replace the image in theme.

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1283
Joined: Sun Nov 18, 2007 3:55 pm

Re: Gold 10 / Bootstrap questions

Post by compunerdy » Tue Mar 24, 2015 12:20 pm

Oh yes.. I did not notice because the emulator I was using just changed the size I guess and did not fully emulate a cell phone so it showed the responsive theme. I went ahead and checked the box after reading that post.

meer2005
Captain (CAPT)
Captain (CAPT)
Posts: 245
Joined: Wed Feb 09, 2005 2:00 pm

Re: Gold 10 / Bootstrap questions

Post by meer2005 » Wed Mar 25, 2015 8:29 am

Say I want to make something like a BG color change like this in the LESS file


Current in css .css file:
div.header{color:#333;background-color:#f5f5f5.....
Want to change to:
div.header{color:#333;background-color:#337ab7.....

how would I change that in the less file so the output reflects the change above when compiled?

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1283
Joined: Sun Nov 18, 2007 3:55 pm

Re: Gold 10 / Bootstrap questions

Post by compunerdy » Wed Mar 25, 2015 8:45 am

Technically you can still just modify the css file.. use find and replace. Or you can use the less file in the way I described above.

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Gold 10 / Bootstrap questions

Post by mazhar » Wed Mar 25, 2015 9:22 am

meer2005 wrote:Say I want to make something like a BG color change like this in the LESS file


Current in css .css file:
div.header{color:#333;background-color:#f5f5f5.....
Want to change to:
div.header{color:#333;background-color:#337ab7.....

how would I change that in the less file so the output reflects the change above when compiled?
Its very easy to make this change the LESS way. First of all you can use same syntax you use within stylesheet on elements. Secondly less support variables and Bootstrap is making use of variables for colors, padding etc. So actually in less you can define different color schemes by defining few variables! For example have a look at following themes

Code: Select all

http://bootswatchr.com/gallery
See how they overridden variable.less file to define different color schemes. If you have less configured as explained above you can borrow any variable.less from above themes, copy its contents and put them right after import statements in style.less file. This will get you the updated css with color scheme defined by these variables.

Regarding specifically about header background you asked, you can define background-color:#xxxxxx style to #storeHeader {} element in less. This will generate the desired css.

Following bootstrap customizer is interesting too

Code: Select all

http://bootstrap-live-customizer.com/
If you use the "Edit theme.less" option and load our style.less file. Then remove all import statements from the top of loaded contents and close the editor. It will load the Bootstrap UI editor. You should be able to make changes to color etc visually and then download minified generated stylesheet. I am not sure if this editor is fully compatible with our theme but it sure looks an interesting thing.

meer2005
Captain (CAPT)
Captain (CAPT)
Posts: 245
Joined: Wed Feb 09, 2005 2:00 pm

Re: Gold 10 / Bootstrap questions

Post by meer2005 » Thu Mar 26, 2015 7:02 am

Being new to less, where is color, background color, and border being pulled from for this:

Less before being compiled:

Code: Select all

div.widget {
    .panel;
    .panel-default;
        
    div.header {
        .panel-heading;
        /* TODO: these should be the default bootstrap heading styles*/
        padding: 10px 15px;
        border-bottom: 1px solid #ddd !important;
css compiled output from above:

Code: Select all

div.widget div.header{color:#333;background-color:#f5f5f5;border-color:#ddd;padding:10px 15px;border-bottom:1px solid #ddd !important}
I don't see background-color:#f5f5f5 being defined anywhere else in the less file. panel-heading must defined in a separate less file?

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Gold 10 / Bootstrap questions

Post by mazhar » Thu Mar 26, 2015 7:16 am

This is where we are asking less to use Bootstrap styles for our widget.

Code: Select all

    .panel;
    .panel-default;
    .panel-heading;
These above classes .panel and .panel-default styles are implemented by Bootstrap and we simply asked less to use same styling for our widgets. What you are seeing is the result of styles defined against .panel-heading in boostrap. If you want different background then you can just override. If you don't want to utilize Bootstrap panels at all then just remove these styles. If you want the heading to have different background then you can override following bootrap variable.

Code: Select all

@panel-default-heading-bg:    #f5f5f5;
simply add above variable right next after import statement top of the file. Then instead of #f5f5f5 use some different color value. Upon save it will generate the updated css for panel header with your background color. Alternatively instead of using variable you can simply give the div.header a different background color.

grgalex
Ensign (ENS)
Ensign (ENS)
Posts: 15
Joined: Thu Jun 21, 2012 1:34 pm

Re: Gold 10 / Bootstrap questions

Post by grgalex » Thu Mar 26, 2015 1:54 pm

i know i am missing something obvious but i just cant seem to figure this out. Any insight would be greatly appreciated.
I am not using the 3 column layout because i would like to have as many category columns as i can on the page. preferably 4-6 per row. However, using the leftsidebarresponsive layout with Category Grid (Shallow Item Display) With Category Data i cannot seem to change the .make-md-column in any configuration to accomplish my goal of 4-6 category columns. I already reduced the size of the leftsidebarresponsive md-column to 2 from 3 which made more room on the page but no matter what else i change i cant get the category section to show any more than 3 columns. Thanks in advance :D

http://www.discountautoac-compressorparts.com/

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1283
Joined: Sun Nov 18, 2007 3:55 pm

Re: Gold 10 / Bootstrap questions

Post by compunerdy » Thu Mar 26, 2015 6:42 pm

Look for the code similar to this (I added the threecolumn)

Code: Select all

/* catalog styles */
.leftSidebarLayout, .rightSidebarLayout, .threeColumnLayout {
    .itemListing {
        .make-row();
        .tableNode {
            .make-md-column(6);
            .make-sm-column(4);
            .make-xs-column(6);
            .make-lg-column(3);
            @media screen {
                @media(max-width:@screen-xs) {
                    padding:0 5px;
                }
            }
        }
    }
}
Change the number in ( ).. IIRC you lower the number for more product columns.
For instance if I changed this..

Code: Select all

.make-lg-column(3);
To

Code: Select all

.make-lg-column(2);
It would show more columns of products but only for the lg resolution which is 1200pixels and up.

grgalex
Ensign (ENS)
Ensign (ENS)
Posts: 15
Joined: Thu Jun 21, 2012 1:34 pm

Re: Gold 10 / Bootstrap questions

Post by grgalex » Fri Mar 27, 2015 6:27 am

AHHH! I did not have the .make-lg-column(3) in there at all. Worked beautifully!! Thank you ssoooo much.
Next time I will just ask instead of waste 2 days trying to figure it out on my own.

Post Reply