By Paul on Jun 15, 2019 at 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 a...

Read Full Blog Entry

By Paul on May 31, 2019 at 5:48 AM

Sometimes you may want something that behaves more like a single page app instead of a website. For that, today I've introduced a new tweak 'ajaxsite'.

What this does is it transforms all internal links into javascript calls. The javascript immediately replaces the whole <div class="main"> middle section of the page with a loading indicator graphic, then it loads the requested URL with &usewrapper=no tacked on to suppress the wrapper, and places that inside the <div class="main"> area. The result is that the top and bottom of the page remain static and the URL doesn't change, while the middle of the page loads changes when you click categories and listings and other stuff.

The one big limitation here is forms. There's no safe universal way to convert form submissions to AJAX (mainly because some of them involve file uploads), so forms still submit in the traditional HTML way with your browser loading a new page. If someone is interested, I could work on a form method that'd work for most people's site configurations but not be universal.

By Paul on May 29, 2019 at 7:17 AM

One of the legacy annoyances with WSN's bootstrap themes has been the presence of jQuery UI elements. I built certain things in jQuery UI before I made the decision to support bootstrap, and it had the advantage of working with legacy themes as well as with bootstrap themes. But with bootstrap themes, it meant you had to deal with elements that didn't obey your theme, and you had to pick a jqueryui theme that came as close as possible to your color scheme. And even if the colors match, the style of jquery ui is incongruous with bootstrap.

So, the last few days, I've finally had time to convert all those jquery ui elements to bootstrap. That includes the login modal, the ad unblocker modal, the search all tabs, the admin validation tabs and the admin template editor help tabs. They all now use bootstrap's bootstrap.js javascript functions now, when you're using a bootstrap theme. When you're using a legacy theme, they still use jquery ui. Fortunately I was able to write the templates in such a way that the same template code works for both jquery ui and bootstrap, which should prevent any problems from arising for legacy theme uncustomized templates that auto-update.

The dropdown options menu was already using bootstrap's javascript for a while, because of how incongruous the superclick dropdown menus were. Instead of including the dropdown javascript WSN now includes the full bootstrap javascript, so you can freely use any bootstrap javascript features you wish and remove any custom includes of bootstrap.js you may have made.

Round up of other recent work:
- Rewrote the category selector / sitemap generation system so that it should work on sites with more thousands of categories than before.
- Added search refinements to the language editor, which makes it much easier to find the language item you're looking for.
- Added a member age requirement option for sites that want to require members to be 18+.
- Yet more bootstrap 4 support work including a tweak and flag t...

Read Full Blog Entry

By Paul on Apr 28, 2019 at 3:27 AM

Today's latest 10.4.16 Beta 5 release addresses one of the biggest annoyances in my development workflow: locating templates that contain a certain thing. Maybe you want to find where a certain CSS class was used, where a template variable is used, or just where certain text you see comes from on an english-only site. Now you can.

At Admin -> Themes -> Manage Templates, use the "Filter to templates containing" box. All templates not containing the text you enter will be hidden when you click Filter (refreshless, so if you're in the middle of editing a template you won't lose anything). Empty the box and click Filter again to bring everything back.

For this purpose and because I had it in mind for a while anyway, I've converted the custom templates dropdown menu into an HTML list like the rest of the templates. This allows you to see them at a glance without clicking the selector, and to open a bunch of them at once in new tabs if you want to ctrl+click them.

Another new option at Admin -> Members -> Member Settings now allows you to show a default avatar for people who haven't uploaded an avatar yet. The default avatar is defaultavatar.png in your templates/images_themename directory. This can be useful if you need a placeholder in your design so that everything is the same size whether the person has an avatar or not.

I've also added a {LINKIMAGEURL} which allows you more design flexibility than {LINKIMAGE} (personally I needed {LINKIMAGEURL} in order to use the listing image as a css background-image rather than an HTML <img>).

By Paul on Apr 19, 2019 at 2:04 AM

Sometimes personalization is a big selling point. Instead of a map of generic pins, wouldn't it be nice to have a map of company logos, or other such images that convey more information in a glance? The latest WSN release allows this with the Admin -> Settings -> Switches -> "Addresses" -> "Map" -> "Custom logo map pins" option. When that switch is enabled, a "Small Logo" field appears for listings which allows submitters to upload an image that'll be used as their map pin. The image is automatically resized. If you want bigger pin images, simply resize templates/images_default/marker.png in your favorite image editor. The custom images will always be overlayed on top of the standard pin image, this alllows them to leave a few pixels of color from the standard pin at the bottom to signify open status or listing type.

Also in this release, the ratings w/review comments system gained review editing facilities. I've also done some bootstrap 4 prep work, making the main menu and all btn-secondary buttons compatible with v4. A lot more bootstrap work is coming soon, including hopefully an integrated SCSS editor/compiler to make customizing easier.