Gold 10 / Bootstrap questions

[sweeperq]

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.

[mazhar]

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.

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]

By the way, here is the announcement: http://madskristensen.net/post/web-esse ... eb-express

[Richard47]

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

[mazhar]

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

If you have LESS setup then it can be done easily. For header shortcuts and navigation you can try

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.

[Richard47]

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

[Richard47]

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!

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]

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.

[Richard47]

Thanks compunerdy but that didn't work. The fonts folder is located in the /Themes/Bootstrap_Responsive folder
Thanks,
Richard
www.somethingmorestore.com

[mazhar]

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.

[Richard47]

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

[mazhar]

Well what happens if you try to open file directly in browser using absolute URL. For example like

yourwebsite/App_Themes/Bootstrap_Responsive/fonts/footable.eot

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 following

Code: Select all

src: url('fonts/glyphicons-halflings-regular.eot');

This seems bit different from yours where you got ../ in start of it.

[Richard47]

Well what happens if you try to open file directly in browser using absolute URL. For example like

yourwebsite/App_Themes/Bootstrap_Responsive/fonts/footable.eot

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 following

Code: Select all

src: url('fonts/glyphicons-halflings-regular.eot');

This seems bit different from yours where you got ../ in start of it.

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

[mazhar]

What happens if you directly update the stylesheet by find and replace. Like choose file and replace and then find following exact match

Code: Select all

../fonts/

and replace it with

Code: Select all

fonts/

Then check if it brings the fonts back.

[Richard47]

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

[Richard47]

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

[rmaweb]

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.

[kwikstand]

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.

[meer2005]

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:

Capture.JPG

Capture2.JPG

[kwikstand]

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.

[meer2005]

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.

[kwikstand]

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

[kwikstand]

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.

[kwikstand]

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?

[meer2005]

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