Gold 10 / Bootstrap questions
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
Gold 10 / Bootstrap questions
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.
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.
Re: Gold 10 / Bootstrap questions
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.Is it safe to modify the boostrap theme to not have a max width?
Code: Select all
.container();
Code: Select all
.container-fluid();
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/
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();
Code: Select all
.container-fluid();
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
Re: Gold 10 / Bootstrap questions
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
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
Re: Gold 10 / Bootstrap questions
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.
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.
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
Re: Gold 10 / Bootstrap questions
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?
Any idea on how to fix the category display issue?
Re: Gold 10 / Bootstrap questions
I overlooked that! It should be very easy to fix. Locate following code
and then upate it like
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
.leftSidebarLayout, .rightSidebarLayout {
Code: Select all
.leftSidebarLayout, .rightSidebarLayout, .threeColumnLayout {
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;
}
}
}
}
}
Re: Gold 10 / Bootstrap questions
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.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..
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
Re: Gold 10 / Bootstrap questions
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.
Re: Gold 10 / Bootstrap questions
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.
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
Re: Gold 10 / Bootstrap questions
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!!
That fix you posted worked great and I now have multiple columns of items displayed.. THANKS!!
Re: Gold 10 / Bootstrap questions
I noticed you are missing the ICONS. This is because of missing font I guess. In Visual Studio we were using
and it was able to resolve it to Website/App_Themes/Bootstrap_Responsive/fonts directory. Seems like crunch maybe generating different path then that.
Code: Select all
@icon-font-path: "../fonts/";
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
Re: Gold 10 / Bootstrap questions
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 and icons are back!
Code: Select all
@icon-font-path: "fonts/";
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
Re: Gold 10 / Bootstrap questions
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>
Re: Gold 10 / Bootstrap questions
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.
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
Re: Gold 10 / Bootstrap questions
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.
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.
Re: Gold 10 / Bootstrap questions
I was referring to mobile redirect mentioned in that thread. Regarding logo you will need to override/replace the image in theme.
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
Re: Gold 10 / Bootstrap questions
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.
Re: Gold 10 / Bootstrap questions
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?
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?
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
Re: Gold 10 / Bootstrap questions
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.
Re: Gold 10 / Bootstrap questions
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 themesmeer2005 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?
Code: Select all
http://bootswatchr.com/gallery
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/
Re: Gold 10 / Bootstrap questions
Being new to less, where is color, background color, and border being pulled from for this:
Less before being compiled:
css compiled output from above:
I don't see background-color:#f5f5f5 being defined anywhere else in the less file. panel-heading must defined in a separate less file?
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;
Code: Select all
div.widget div.header{color:#333;background-color:#f5f5f5;border-color:#ddd;padding:10px 15px;border-bottom:1px solid #ddd !important}
Re: Gold 10 / Bootstrap questions
This is where we are asking less to use Bootstrap styles for our widget.
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.
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.
Code: Select all
.panel;
.panel-default;
.panel-heading;
Code: Select all
@panel-default-heading-bg: #f5f5f5;
Re: Gold 10 / Bootstrap questions
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
http://www.discountautoac-compressorparts.com/
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
http://www.discountautoac-compressorparts.com/
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
Re: Gold 10 / Bootstrap questions
Look for the code similar to this (I added the threecolumn)
Change the number in ( ).. IIRC you lower the number for more product columns.
For instance if I changed this..
To
It would show more columns of products but only for the lg resolution which is 1200pixels and up.
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;
}
}
}
}
}
For instance if I changed this..
Code: Select all
.make-lg-column(3);
Code: Select all
.make-lg-column(2);
Re: Gold 10 / Bootstrap questions
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.
Next time I will just ask instead of waste 2 days trying to figure it out on my own.