Details
Flattern
By Paul
Jun 15, 2019 pm30 4:51 PM
At long last, the new Flattern theme is available for all WSN scripts except Classifieds and Software Directory (will get to them later).
There've been a lot of WSN changes involved in supporting this theme.
As a bootstrap 4 theme, most of the work centered on bootstrap 4 support. It was a long slog due to the many differences between the versions, but at this point WSN can pretty seemlessly switch between bootstrap 3 and 4. There's a toggle for it on the theme settings page and also a way to specify inside the stylesheet. The templates have classes for both versions specified. BS3 glyphicons are automatically swapped for appropriate font-awesome equivalents in BS4. Bootstrap javascript has been fully incorporated and jQuery UI is only needed for legacy templates now.
Like many packaged themes, Flattern comes with a bunch of subdirectories with resources split up into many dozens of files. Rather than painstakingly lift and adapt code from those files, it's much easier to just include them directly from WSN templates. To facilitate this, I made WSN's theme packager and theme installer support custom subdirectories in themes so now you can just dump all the subdirectories in templates/yourtheme/ and use {TEMPLATESDIR}/css/cssfile.css or {TEMPLATESDIR}/js/js.js or the like in your templates to call in files... which you could already do, but now it gets packaged correctly.
I found that flattern's bootstrap.js differs from the standard bootstrap 4 javascript in some frustrating way, so I ended up adding a bsjavascripturl tweak and flag which allows specifying a custom file to become the bootstrap javascript file. Flattern has a nice big black navigation section which looked best by putting {NAVIGATION} into the wrapper template... to support that without having duplicate navigation and without having to edit {NAVIGATION} out of all the body templates, I added a headernavonly tweak/flag which suppresses non-wrapper instances of {NAVIGATION}. I also wanted to suppress <h1> titles since those duplicate the title that's in the navigation, and I ended up doing that through CSS, adding a {TIDEL} along the way which can be used in the wrapper to get the name of the template you're in via CSS. Rather than rely on tweaks which apply to all themes, I made flag equivalents of relevant tweaks which can be set in the theme's forceswitches.php file (which could already override settings and switches on a per-theme basis, but that wasn't applicable for Flattern).
Finally, I needed to remove the login and register options from the main menu since Flattern uses special modal links for them. Since I can't rely on people manually removing those options from their menu manager, I needed a template conditional and implemented a new template variable to make that easier: {MENUITEMURLCONTAINS[string]}.
Hopefully all the work I've done on Flattern will make things much easier for people who are adapting generic bootstrap templates into WSN. I also hope it'll give you some ideas about what you can do, like the modal registration form and the carousel.
By Paul
Jun 15, 2019 pm30 4:51 PM
There've been a lot of WSN changes involved in supporting this theme.
As a bootstrap 4 theme, most of the work centered on bootstrap 4 support. It was a long slog due to the many differences between the versions, but at this point WSN can pretty seemlessly switch between bootstrap 3 and 4. There's a toggle for it on the theme settings page and also a way to specify inside the stylesheet. The templates have classes for both versions specified. BS3 glyphicons are automatically swapped for appropriate font-awesome equivalents in BS4. Bootstrap javascript has been fully incorporated and jQuery UI is only needed for legacy templates now.
Like many packaged themes, Flattern comes with a bunch of subdirectories with resources split up into many dozens of files. Rather than painstakingly lift and adapt code from those files, it's much easier to just include them directly from WSN templates. To facilitate this, I made WSN's theme packager and theme installer support custom subdirectories in themes so now you can just dump all the subdirectories in templates/yourtheme/ and use {TEMPLATESDIR}/css/cssfile.css or {TEMPLATESDIR}/js/js.js or the like in your templates to call in files... which you could already do, but now it gets packaged correctly.
I found that flattern's bootstrap.js differs from the standard bootstrap 4 javascript in some frustrating way, so I ended up adding a bsjavascripturl tweak and flag which allows specifying a custom file to become the bootstrap javascript file. Flattern has a nice big black navigation section which looked best by putting {NAVIGATION} into the wrapper template... to support that without having duplicate navigation and without having to edit {NAVIGATION} out of all the body templates, I added a headernavonly tweak/flag which suppresses non-wrapper instances of {NAVIGATION}. I also wanted to suppress <h1> titles since those duplicate the title that's in the navigation, and I ended up doing that through CSS, adding a {TIDEL} along the way which can be used in the wrapper to get the name of the template you're in via CSS. Rather than rely on tweaks which apply to all themes, I made flag equivalents of relevant tweaks which can be set in the theme's forceswitches.php file (which could already override settings and switches on a per-theme basis, but that wasn't applicable for Flattern).
Finally, I needed to remove the login and register options from the main menu since Flattern uses special modal links for them. Since I can't rely on people manually removing those options from their menu manager, I needed a template conditional and implemented a new template variable to make that easier: {MENUITEMURLCONTAINS[string]}.
Hopefully all the work I've done on Flattern will make things much easier for people who are adapting generic bootstrap templates into WSN. I also hope it'll give you some ideas about what you can do, like the modal registration form and the carousel.
Views | 462 views. Averaging 462 views per day. |
Sorry, you don't have permission to post. Log in, or register if you haven't yet.
Please login or register.