I wish to integrate X-Cart with an existing site, providing a consistent appearance throughout the Store (X-Cart), Blog (Wordpress), and other custom pages created to showcase various projects and products.
I want to fully control the appearance and layout of my site, and I want to maintain that template on all areas. This was easy for Wordpress, just a matter of calling the standard loops in the right areas. And obviously it's simple for my own pages, since I can build them as I see fit.
But X-Cart is giving me trouble. There are
way too many built-in styles and strange document structures. Rearranging and applying my own styles is something of a nightmare.
A big problem is bootstrap, every X-Cart theme uses it, but I don't. None of my layout on other pages is using it, I don't need it. But I can't make it go away. Plus, there seem to numerous other style sheets doing things I don't like very much.
I am in the process of developing a custom theme module, so I have a few overridden templates, and I found how to load my own style sheets (I want to keep the styles that are universal in a universal location). But I can't seem to find any info on
removing ones loaded by other parts of the system.
For the record, I am perfectly happy to start from scratch as far as X-Cart goes. I don't have a problem with creating all the styles and such for all the unique bits of X-Cart. I'm a front-end developer, I can build up that stuff relatively easily.
But working around it is far more difficult, I have to identify and override dozens of styles that don't have any use in my design. I shouldn't need to use !important, or unset.
As an example, I had a control in a <label> tag. But something somewhere was setting this:
Code:
label {
font-size: 15px;
font-weight: 400;
line-height: 18px;
vertical-align: top;
}
Suddenly there were various parts of my menus that were tiny. I use EMs a lot for responsive design, this declaration sets absolute sizes instead of dynamic ones. I can override it, but it took me almost an hour to identify this particular declaration as the source of that problem. And there are other problems that I'm still not sure the cause of.
I don't know why anything would need to set all labels like that, it seems silly. It has no specificity, it's just a blanket rule. If I changed the base font size of the page... all my labels would still be 15px for no reason. Now I'm sure the designer of the default theme chose this for a good reason, that's okay. I just don't want it on my page anymore. But I can't figure out a way to remove it.
So what can I do to strip my X-Cart down to the bare minimum? Remove all the styles I didn't create or specifically choose to include, remove the classes and IDs I don't need, remove the wrappers and containers that don't fit the semantics of my layout, etc?
Edit: 10-5-17
As an update, I figured out where the offending stylesheets come from: var/resources/default/http/screen contains a number of LESS sheets. I assume this is a cache, since names are random and they import other sheets. Some of those seem to be what I want rid of. I could probably just edit those files, but that wouldn't be a module anymore, it would be a hack. I need a way to exclude the particular sheets I don't need.
I also looked at the getThemeFiles() and getCSSFiles() lists. Both lists contain styles related to bootstrap, but even getting rid of those has very little positive effect. The styles in the above folder touch way too many things, and they don't seem to appear in those lists.
I am using those functions in a View class, is that correct?