Chrome & Firefox - some styles referenced to .less files? How to edit...?

[DCS]

I'm using chrome & inspector to modify css. 

On several occasions, a particular page element will have a reference to a .less file, such as:

/storefront/view/templatename/stylesheet/less/navbar.less

or

/storefront/view/templatename/stylesheet/less/labels.less

I looked in the folders for my cloned template extension, and also in the folders for the default template.  I can't find any less folders or files.

I tried the same thing with Firefox and firebug, same result.

Why are these browsers giving a reference to less files?

How do I edit styles that are sourced in less files?  Does abantecart have less files located somewhere in the code?  Location?

How do I make style changes to these kinds of elements so that the changes will not be overwritten during future updates?

Thx.

[abantecart]

Are you using custom template? There is no less in default AbanteCart template.

[DCS]

I'm using default-clone template extension. 

Thank you for confirming that AC doesn't have any less files. 

Do you have any idea why I am seeing .less files in Chrome and Firebug inspectors?

/extensions/templatename/storefront/view/templatename/stylesheet/less/navs.less
.../navbar.less
.../labels.less
.../normalize.less
.../scaffolding.less

etc.

Thx.

[Basara]

Hello.
Did you connect your site to CDN?

[DCS]

No, it's only on xampp localhost.

[DCS]

Here's a screenshot. 

If I wanted to change the blue colors of the Free Shipping element to some other color, the Chrome css inspector refers me to alerts.less line 63. 

I am encountering this problem frequently.

Many styles that I would like to change are referenced to various less files instead of css files.   

I am encountering this on both Chrome and Firefox / Firebug. 

The site is running on xampp on a Win 10 PC.  I cloned the default extension into a new template extension which I am customizing. 

I have successfully made many changes to many different css styles and to some parts of the code, but I keep hitting this .less barrier for some styles that I still need to change. 

Any ideas on how to work around this? 

Thanks. 

[DCS]

Here's another example. 

In the screenshot below, if I wanted to change font size or line size of the Qty: box, the styles reference to input-groups.less. 

I understand that these page elements are part of form "product", and I have tried to find different template or core files to make changes, but I'm not having any luck. 

I also understand that some of the form styles are inherited from body, so that I will need to write new styles into specific sections of style.css to override the body inherit, but I can't do that because the styles I need to modify appear to be originating in less files that I cannot find. 

I know how to work with less files, but I can't find the referenced less files, and besides, AC is not supposed to have any less files. 

FWIW - all of the less file references I have encountered point to the same folder:
/extensions/mytemplate/storefront/view/mytemplate/stylesheet/less/*.less, but as you know, that less folder does not exist. 

Help!

[Basara]

Hello.

AbanteCart default template do not include less files. Check the changes you made with your clone template.
Possibly you load bootstrap in some wrong way and bootstrap trying to load this files  https://stackoverflow.com/questions/35142485/why-is-bootstrap-trying-to-load-less-files-in-edge 

[DCS]

Hello.

AbanteCart default template do not include less files.

  No ****.

Check the changes you made with your clone template.

What changes? 
I cloned a template within your Cart Software System, using a process you defined, to create and apply a new template extension.  See process below. 
What possible "changes to my clone template" could start calling for less files?   

Possibly you load bootstrap in some wrong way and bootstrap trying to load this files  https://stackoverflow.com/questions/35142485/why-is-bootstrap-trying-to-load-less-files-in-edge 

I didn't load bootstrap.  Abantecart loaded bootstrap. 

It's the same as when I build a joomla site: I install joomla and I start to do stuff.  Some of the stuff I do is affected by bootstrap because joomla loaded bootstrap and joomla uses bootstrap.

But I didn't load bootstrap.  I've never "loaded" bootstrap.  It's just something that is loaded, called and used by CMS's that I use. 

Remind me - at what point during an AbanteCart install does your software tell the user to go get some bootstrap and install some bootstrap in some certain folder? 
When does that happen? 

I know right?  It never happens. 

So that may mean that AbanteCart is fucking something up somewhere, right? 

Where's the other guy? 

The link you provided above references source mapping, possibly after minimizing.  AC users don't do any source mapping or minimizing.  They just diddle with style.css to change some colors.  How does that lead to less file references that don't exist? 

FYI:  here is a cut-n-paste of the method I used to create the clone.  Maybe you can see where there is a problem with this method? 


To create a new template extension that uses a clone of the default template:
1.)   Install Extension Development Tool:
a.   https://github.com/abantecart/developer_tools_extension
b.   Use the green box to download zip file.  Unzip the file into a new folder in your work area.  It will have various versions of the developer_tools.  Choose one.
c.   For the chosen version of dev_tools, open the /code/extensions/ folder. 
d.   Copy the developer_tools directory from that folder to your AC extensions directory.
e.   Go to the site backend Extensions / All Extensions tab.  Locate developer_tools and click the button that looks like a play button to install the tools. 
f.   Then set the status of the tools extension to ON. 
g.   Now you should have a new "Extension Developer Tools" tab in the system section. 

2.)   Clone the default template (this will simultaneously create a new extension):
a.   In Design / Templates, clone the Default template by clicking the double-square icon. 
b.   Select Clone to Extension.
c.   Select Full Clone type so that it will include CSS, Javascripts etc.
d.   Choose a name and unique identifier, then click Clone Template.

3.)   Assign the new template clone to the new extension:
a.   Go to Extensions / All Extensions - locate the newly created extension.
b.   Click the Edit button to edit the new extension, click the Additional Settings tab.
c.   On the upper left, select the new clone from the dropdown menu "Edit Template Settings".
d.   Scroll down and click Save.

4.)   Set the storefront to use the new template:
a.   Go back to Design / Templates, click the "on / off" button of the new template to set it as the active storefront template.

5.)   Begin editing the new template files. 

[Basara]

Hello, DCS

I am just try to help you. Please avoid vulgar words in your posts. This is not allowed in this forum and offends not only me but other AbanteCart community users.

I want to confirm that developer tools also do not add any of the less files. Take a note this is free tool for developers and it is not included in the core......

[redbrick]

Hi, I just joined and I'm setting up a shop.  I apologize for digging up this old thread. (...not a good way to start a first post) I was wondering if there was any further discussion on this?  If so please direct me to the appropriate thread. 

I am basically stuck on this same issue.  The only extension I've installed is the developers tools to duplicate the default template which I am editing.  My issue is that while looking for specific lines in style.css to edit, firefox developers edition points to some mysterious file called scaffolding.less.  (same thing on a standard IE11 install) Doing some reading I now have a somewhat better understanding of what less files are...just not sure how generation of this file is triggered....and how am I to make changes to a file that does not seem to exist.

Thanks in advance for your help.

Red.