Gold 10 / Bootstrap questions
Re: Gold 10 / Bootstrap questions
FYI - Microsoft found the Web Essentials add-on to be important enough that they allow it for Visual Studio Express 2013 for Web. It has built-in LESS-compiler and CSS/JavaScript minification and bundling tools.
Re: Gold 10 / Bootstrap questions
Thanks for bringing the good news That was a point of concern indeed. This plugin is awesome and makes it real easy to work with LESS and minification tasks.sweeperq wrote:FYI - Microsoft found the Web Essentials add-on to be important enough that they allow it for Visual Studio Express 2013 for Web. It has built-in LESS-compiler and CSS/JavaScript minification and bundling tools.
Re: Gold 10 / Bootstrap questions
By the way, here is the announcement: http://madskristensen.net/post/web-esse ... eb-express
Re: Gold 10 / Bootstrap questions
I am trying to figure out how to change the font color on the header shortcuts, headerNavigation.... background and font color, footer shortcuts font color, and the left, center, and right column h1, h2 font color settings.
any help will be appreciated
Richard
www.somethingmorestore.com
any help will be appreciated
Richard
www.somethingmorestore.com
Re: Gold 10 / Bootstrap questions
If you have LESS setup then it can be done easily. For header shortcuts and navigation you can tryRichard47 wrote:I am trying to figure out how to change the font color on the header shortcuts, headerNavigation.... background and font color, footer shortcuts font color, and the left, center, and right column h1, h2 font color settings.
any help will be appreciated
Richard
http://www.somethingmorestore.com
Code: Select all
.shortcuts {
a {
color:#FF0000;
}
}
Similarly for right column you can update the styles for .widget under its header sub element. Also upon the first page of this thread I explained how to change sidebar widget background color.
Re: Gold 10 / Bootstrap questions
This is what I have in bootstrap less file, but the color is not changing and yes I do have Crunch
#storeHeader {
.shortcuts {
.pull-right;
padding:0px 0 10px 0;
height:37px;
margin-top:11px;
li > a > i {
color: #6c6c30;
.glyphicon;
&:before {
margin-right:10px;
}
Thanks,
Richard
#storeHeader {
.shortcuts {
.pull-right;
padding:0px 0 10px 0;
height:37px;
margin-top:11px;
li > a > i {
color: #6c6c30;
.glyphicon;
&:before {
margin-right:10px;
}
Thanks,
Richard
Re: Gold 10 / Bootstrap questions
compunerdy wrote: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 toand icons are back!Code: Select all
@icon-font-path: "fonts/";
I have tried everything to get the icons to show. from ]@icon-font-path: "fonts/"; to ]@icon-font-path: "../fonts/"; to ]@icon-font-path: "../../fonts/"; nothing is working. I am working on a localhost machine and the fonts folder is located in the bootstrap responsive folder. Any ideas on where to look??
Thanks
Richard
http://www.somethingmorestore.com
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
Re: Gold 10 / Bootstrap questions
I changed it to what I posted above because I had the folder located in the folder with the core bootstrap files not the responsive themes folder.
Re: Gold 10 / Bootstrap questions
Thanks compunerdy but that didn't work. The fonts folder is located in the /Themes/Bootstrap_Responsive folder
Thanks,
Richard
www.somethingmorestore.com
Thanks,
Richard
www.somethingmorestore.com
Re: Gold 10 / Bootstrap questions
I haven't used crunch but when you make LESS change does it generates stylesheet and it minified version? Can you confirm that its generating the stylesheet file with your changes in it? In default configuration Bootstrap_Responsive theme is using style.min.css so unless you changed the referenced css you would need new changes in this file.
Re: Gold 10 / Bootstrap questions
Mazhar, the way crunch does it, is it creates a style.css and you then rename it to style.mini.css.
here is a sampling from mini.css file
.table-bordered th,.table-bordered td{border:1px solid #ddd !important}}@font-face{font-family:'Glyphicons Halflings';src:url('../fonts/glyphicons-halflings-regular.eot');src:url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),url('../fonts/glyphicons-halflings-regular.woff') format('woff'),url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg')}
Richard
www.somethingmorestore.com
here is a sampling from mini.css file
.table-bordered th,.table-bordered td{border:1px solid #ddd !important}}@font-face{font-family:'Glyphicons Halflings';src:url('../fonts/glyphicons-halflings-regular.eot');src:url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),url('../fonts/glyphicons-halflings-regular.woff') format('woff'),url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg')}
Richard
www.somethingmorestore.com
Re: Gold 10 / Bootstrap questions
Well what happens if you try to open file directly in browser using absolute URL. For example like
This seems bit different from yours where you got ../ in start of it.
Can your browser reach for the font file? If not then maybe you may need to configure MIME type for font extensions. If it can then there is something wrong with icon path. Make sure fonts folder is under Bootstrap_Responsive theme folder, make sure you are using Bootstrap_Responsive as store current them in admin. Then try some variations with icon_path variable and see if it changes the src path in stylesheet. For my install the working src for fonts seems to be the followingyourwebsite/App_Themes/Bootstrap_Responsive/fonts/footable.eot
Code: Select all
src: url('fonts/glyphicons-halflings-regular.eot');
Re: Gold 10 / Bootstrap questions
mazhar wrote:Well what happens if you try to open file directly in browser using absolute URL. For example likeCan your browser reach for the font file? If not then maybe you may need to configure MIME type for font extensions. If it can then there is something wrong with icon path. Make sure fonts folder is under Bootstrap_Responsive theme folder, make sure you are using Bootstrap_Responsive as store current them in admin. Then try some variations with icon_path variable and see if it changes the src path in stylesheet. For my install the working src for fonts seems to be the followingyourwebsite/App_Themes/Bootstrap_Responsive/fonts/footable.eotThis seems bit different from yours where you got ../ in start of it.Code: Select all
src: url('fonts/glyphicons-halflings-regular.eot');
The Browser does go to the file. A box opens in IE asking if I would Like to open or save the file. I do not have a program to open it but I can save it.
Richard
Re: Gold 10 / Bootstrap questions
What happens if you directly update the stylesheet by find and replace. Like choose file and replace and then find following exact match
and replace it with
Then check if it brings the fonts back.
Code: Select all
../fonts/
Code: Select all
fonts/
Re: Gold 10 / Bootstrap questions
Mazhar, I tried fonts/ didn't work tried ../../fonts/ didn't work tried ~/fonts/ didn't work. Thinking it is probably a machine or browser setting. Any ideas
Richard
www.somethingmorestore.com
Richard
www.somethingmorestore.com
Re: Gold 10 / Bootstrap questions
mazhar, Finally got the fonts folder issue working. Basically it was a matter of changing out the storeheader files in the conlib folder. Once I did that everything started working.
my next problem is the footer area. In my gold 9 to 10 upgrade in the conlib folder I noticed there is not any storefooter files for the responsive theme. Should there have been?? If not what do I do to make the existing files bootstrap responsive?
Thanks,
Richard
www.somethingmorestore.com
my next problem is the footer area. In my gold 9 to 10 upgrade in the conlib folder I noticed there is not any storefooter files for the responsive theme. Should there have been?? If not what do I do to make the existing files bootstrap responsive?
Thanks,
Richard
www.somethingmorestore.com
Re: Gold 10 / Bootstrap questions
Hello Mazhar,
Would there be a css conflict if I were to add the bootstrap css to the responsive theme? I already have a lot of category/product/webpages that make use of the bootstrap css, and was wondering if I had to change all of that over to the css Able uses?
* EDIT
Nevermind. I should look before I post. After looking at the style.min.css, it seems like the bootstrap and able css coexist.
Would there be a css conflict if I were to add the bootstrap css to the responsive theme? I already have a lot of category/product/webpages that make use of the bootstrap css, and was wondering if I had to change all of that over to the css Able uses?
* EDIT
Nevermind. I should look before I post. After looking at the style.min.css, it seems like the bootstrap and able css coexist.
Ryan A.
Scott's Bait and Tackle
http://store.scottsbt.com
Work In Progress
Able Gold R10
Bootstrap 3.3
Scott's Bait and Tackle
http://store.scottsbt.com
Work In Progress
Able Gold R10
Bootstrap 3.3
Re: Gold 10 / Bootstrap questions
This isn't working for me at all. I'll be darned I can figure out how to change ANYTHING.
Where exactly are you finding code like:
div.widget {
.panel;
.panel-default;
div.header {
.panel-heading;
I looked all through the style.min.css file and it is not there.
How can I simply change the background color? Nowhere can I find a color for #storeHeader
This is getting frustrating.
Where exactly are you finding code like:
div.widget {
.panel;
.panel-default;
div.header {
.panel-heading;
I looked all through the style.min.css file and it is not there.
How can I simply change the background color? Nowhere can I find a color for #storeHeader
This is getting frustrating.
Contractor's Solutions
www. contractors-solutions.net
www. contractors-solutions.net
Re: Gold 10 / Bootstrap questions
What you're looking for is actually in the style.less file. The .less files are the source for the style.min.css so you can edit the .less file, compile which will save the changes into your style.min.css file. You can edit directly in the style.min.css file, but you're not going to find exactly what you're looking for because .panel and .panel-default are actually pulled from another less file (panels.less and variables.less). In short, .panel is pulling background-color: @panel-bg; from the panels.less file, wich is pulling @panel-bg from the variables.less file as @panel-bg:#fff; -- when your style.less file is compiled, it pulls all the .less files together and spits out the style.min.css file.
This is before being compiled in style.less:
div.widget {
.panel;
.panel-default;
After being Compiled equals this in your style.min.css file: div.widget{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05) --- You CAN edit this directly by changing background-color, but working in a minified css file is a bit of a pain.
Also, use Chrome and Developer Tools to inspect your elements and see the exact css is being used (you can also make live changes to the css doing this).
if you like to comment your css changes and manage your css efficiently, I'd work with the less files.
Here's how I'm working with the less files, as recommended by AbleCommerce...http://help.ablecommerce.com/mergedProj ... _theme.htm
I'm using Microsoft Visual Studio express for Web 2013 with the Web Essentials plugin (both are free)
https://www.visualstudio.com/en-us/prod ... ss-vs.aspx - Microsoft Visual Studio express for Web 2013
https://visualstudiogallery.msdn.micros ... 2a504ca361 - Web Essentials (required for less)
Download Bootstrap source code "LESS" package and keep under the responsive theme folder.
http://getbootstrap.com/getting-started/ (make sure you get the source code version which has all the .less files for bootstrap)
Once you have the less package in your responsive theme folder, open your style.less file, make your changes. Saving will compile all the less files and save to style.min.css
There are a number of ways you can change the BG color you mentioned above when working with less...
The quickest way is can just add a variable to the top of your style.less file (right after the last @import.....) that looks like this:
@panel-bg : #fff (change the color to whatever you'd like)
This will override what's being pulled from variables.less and when compiled will save the changes to your style.min.css
Style.less:
This is before being compiled in style.less:
div.widget {
.panel;
.panel-default;
After being Compiled equals this in your style.min.css file: div.widget{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05) --- You CAN edit this directly by changing background-color, but working in a minified css file is a bit of a pain.
Also, use Chrome and Developer Tools to inspect your elements and see the exact css is being used (you can also make live changes to the css doing this).
if you like to comment your css changes and manage your css efficiently, I'd work with the less files.
Here's how I'm working with the less files, as recommended by AbleCommerce...http://help.ablecommerce.com/mergedProj ... _theme.htm
I'm using Microsoft Visual Studio express for Web 2013 with the Web Essentials plugin (both are free)
https://www.visualstudio.com/en-us/prod ... ss-vs.aspx - Microsoft Visual Studio express for Web 2013
https://visualstudiogallery.msdn.micros ... 2a504ca361 - Web Essentials (required for less)
Download Bootstrap source code "LESS" package and keep under the responsive theme folder.
http://getbootstrap.com/getting-started/ (make sure you get the source code version which has all the .less files for bootstrap)
Once you have the less package in your responsive theme folder, open your style.less file, make your changes. Saving will compile all the less files and save to style.min.css
There are a number of ways you can change the BG color you mentioned above when working with less...
The quickest way is can just add a variable to the top of your style.less file (right after the last @import.....) that looks like this:
@panel-bg : #fff (change the color to whatever you'd like)
This will override what's being pulled from variables.less and when compiled will save the changes to your style.min.css
Style.less:
Re: Gold 10 / Bootstrap questions
Thanks for the response.
Where are the panels.less and variables.less files? I don't have any files like that.
I have Visual Studio 2012, but apparently, Web Essentials won't work with that. So I downloaded and installed VS Express 2013 and Web Essentials still won't install. It says "This extension is not installable on any currently installed products".
I just don't get it.
Where are the panels.less and variables.less files? I don't have any files like that.
I have Visual Studio 2012, but apparently, Web Essentials won't work with that. So I downloaded and installed VS Express 2013 and Web Essentials still won't install. It says "This extension is not installable on any currently installed products".
I just don't get it.
Contractor's Solutions
www. contractors-solutions.net
www. contractors-solutions.net
Re: Gold 10 / Bootstrap questions
panels.less and variables.less are part of the Bootstrap package you have to download from here: http://getbootstrap.com/getting-started/ - Make sure you download the Source Code option. Once downloaded, copy the entire less folder and put it into your theme folder.
Seems like I had the same issue and had to update to VS Express for web with update 4.
Seems like I had the same issue and had to update to VS Express for web with update 4.
Re: Gold 10 / Bootstrap questions
I will download the Bootstrap package, but is that just for my local computer, or does it need to be uploaded to the website?
Also, I do have VS update 4
Also, I do have VS update 4
Contractor's Solutions
www. contractors-solutions.net
www. contractors-solutions.net
Re: Gold 10 / Bootstrap questions
OK. I had VS Express 2013 for Desktops installed. I just installed VSE 2013 for Web and now I am able to install Web Essentials.
However, I tried adding @panel-bg : #6e040f right after the last @import.... in the style.less file. I uploaded style.less as well as style.min.css to website and... nothing. Nothing changed at all.
However, I tried adding @panel-bg : #6e040f right after the last @import.... in the style.less file. I uploaded style.less as well as style.min.css to website and... nothing. Nothing changed at all.
Contractor's Solutions
www. contractors-solutions.net
www. contractors-solutions.net
Re: Gold 10 / Bootstrap questions
I now see that when I open the style.less file in VSE, there is a compilation error at line 52: LESS: 'less/responsive-utilities.less' wasn't found
What is that supposed to mean?
What is that supposed to mean?
Contractor's Solutions
www. contractors-solutions.net
www. contractors-solutions.net
Re: Gold 10 / Bootstrap questions
Did you copy the less folder from the bootstrap download into your theme folder? It's looking for the file responsive-utilities.less in themefolder/less/responsive-utilities.less