X-Cart forums

[zeel]

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:

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?

[zeel]

So more investigating, some of the issues were resolved by adding overriding CSS files in my modules /customer directory. But I'm still getting tons of problems, and I have tracked them down to being part of Bootstrap for sure. Unfortunately, it looks like Bootstrap is contained in /common, which I don't believe I have any way to override (I tried creating a common folder and subfolders, but nothing happened). If I go ahead and comment out everything in the bootstrap.less file, I get what I want. But that's a hack, how can I accomplish the same effect without editing the original file?

The hacky way of doing this also has the rather horrifying side effect of making the admin panel entirely useless. But at least I have a way of working on other parts of integrating my design without bootstrap getting in the way. Hopefully someone can let me know the right way to exclude Bootstrap, in customer view only, by the time I get the rest of this stuff working.

[cflsystems]

PHP Code:

\XLite::isAdminZone() 


will help you to know if it is the store front or admin

Unfortunately there is not one central place where all css is added. Different modules and even different pages may load their own css style files through getCSSFiles(). I don't think there is a way to say in your module "load this View class after absolutely everything has loaded" so you can use the getCSSFiles() to overwrite all css styles with your own by starting with an empty list.

Removing or changing wrappers is also not so easy. Unless you remove all css so styles do not apply or you re-write these css style rules.
All these wrappers for different sections are in the template files and you will have to overwrite those. Not to mention XC5 heavily relies on js and these wrappers are included in hundreds of js files as references. So removing them will most likely break lots of the functionality.

[zeel]

Originally Posted by cflsystems

PHP Code:

\XLite::isAdminZone() 


will help you to know if it is the storefront or admin

That will be useful if I can find a way to remove Bootstrap programmatically. My hacky way is a bit... all or nothing.

I'm guessing that all the "common" files are either loaded differently, or after the modules. Though in the resulting document, the common files come before those within modules. Which leads me to believe that either they are loaded in an entirely different way, or they need to be excluded by a different method.

Somewhere there is something that defines which files need to be loaded. If only I could find it, I could tell it what to do.

[cflsystems]

If you know the name of the file being loaded the easiest way to find out where it is being loaded is to use grep on the server and search the files

[qualiteam]

I believe these are the functions that you are looking for:
- \XLite\View\AView::getCommonFiles()
- \XLite\View\AView::getThemeFiles()

[zeel]

I was actually taking a look at those. But while I was able to remove items from the theme files list, they still managed to get loaded - I'm guessing another module, or a later part of the core, is also loading those files after me. The list from CommonFiles just appears to be empty though.

One thing I noticed though, is that the getCSSFiles() function has this in the comment above it:

The best practice is to merge LESS resources with 'bootstrap/css/bootstrap.less' file

Which the function then proceeds to do:

public function getCSSFiles()
    {
        return array(
            array(
                'file'  => 'css/style.less',
                'media' => 'screen',
                // We use the bootstrap LESS instructions
                'merge' => 'bootstrap/css/bootstrap.less',
            ),
        );
    }

Now, I'm not really sure how merge is implemented, but I suspect that if other modules are doing this, they probably cause the system to load the content of the merge file even if it wasn't previously loaded. And since that file is Bootstrap... sigh.

[cflsystems]

Use grep to search for boostrap.less and you will find out. But if that's the case then this is a bug...

[zeel]

I found bootstrap.less. It's at: skins/common/bootstrap/css/bootstrap.less

That's what I mentioned earlier, I can comment out the whole file and be fine. But I can't do that programmatically (unless I can? Not very familier with LESS) so it kills my admin panel.

But I can't find a way to exclude it as part of a module (as opposed to modifying the core). If I have to modify the core code I will... but I fear that any changes will get screwed up if I ever install any updates.

(Oh, for the record, I'm on windows. But I do have grep-like tools.)

[cflsystems]

I meant you need to look within the files if there is another call like this

'merge' => 'bootstrap/css/bootstrap.less',