Advertisement:

Author Topic: not quite mod; not quite theme; super easy and clean 'curve' UX boost  (Read 821 times)

Offline drewactual

  • Sr. Member
  • ****
  • Posts: 763
    • College Football Fan Site CFB51
i was asked to build a site for a group i am a part of, and of course i turn to SMF.  As much trouble as i rabble, it's still the cleanest forum software available, and as much as i 'take' from here, i figure i should return some, too... that combo leads me to add this here and hope the mods will approve it. 

this is working with a virgin 2.0.17 version (i'll await the release of 2.1 before i launch new sites with it).  I've added a couple of dougiefresh's mods since (facebook and youtube bbc), but this was not even a parked domain 16 hours ago.  After bumping some things over on my server, the new domain name propagating, and then slapping it up- the actual alterations to the curve coming up next took literally perhaps 3 hours- and that was a lot of time staring at it to see where i wanted to go next.  the changes i'm going to offer you should take you perhaps 20 minutes. 

what it should leave you with is a nice, clean, and modern looking forum that looks a LOT more custom than it is... the magic is in maybe 20 lines of code added to your index.template, and a new folder/directory added to your images directory where you'll store the backsplash images. 

images are attached below to demonstrate what this offers is this brand new forum i just announced this afternoon:  xxx.carolina-woodworkers.com ... i don't even have my hands on the dedicated IP yet to tell you how new it is. 

like it?  want it?  you can't 'just' have it- you gotta follow these steps to get it:

-----------------------------------------------------------------------------------------------------------------

go to your admin>themes> and make a new copy of your default (curve) theme.  name it whatever; i called it 'basic' on my server.  change your forum's theme to this new theme.. save... now... while you're in your forum's admin section and adjacent the theme settings, go ahead and go over to that specific section and change your forum's width to 100%.... save...

Quote
note:  i use a header image that compliments this operation in color and size... you'll want to do the same... it's nothing special, just using paint and a solid color background with some text.. you may consider doing the same and uploading it using your admin section for header image

navigate to your images directory via ftp, cpanel, or however you access it... i used the top level images directory, NOT the one in the theme folder, but... you can use that one too- it doesn't matter where it's at so long as it has a folder in it named 'background-top'... within that directory/folder, place some nice images you'd like randomly selected as your backsplash/header images... here is the trick: they MUST be named numerically... as in 1.jpg, 2.jpg.... 30.jpg....... 194.jpg.... the number of images isn't important, what is is that they are sequential and starting with 1... and the extension is .jpg, lower case, NOT .jpeg or .JPEG..... use .jpg as the extension. ..... got it? now, remember how many images you have in there as it will be important soon!!! (I only have ten, but i use a precise version of this in another instance with over 300)...

pretty simple so far, huh?  let's make the magic happen!!!!!

open your 'new' theme in your ftp or cPanel or whatever device you use to edit it... overwrite it with the index.template attached below... THEN go through it and change the CAPS parts with your site's info.

go ahead and upload the other php and css files from below...

explaining the include files:

show-or-not: is exactly that.  your big header image will appear ONLY on the home page. Any 'action, boards, or post' pages won't have it cluttering things up- which speeds your site up.. the 'sticky' menu will be present on all pages.

sneeker: this is a WP include which is some simple code to interject a controlled 'outside the loop' wordpress of three panels above your forum.  you can ignore this if you either don't have a WP install or if you don't want to mix the two- simply remove the file (or don't upload it) and then navigate through your (new) index.template and boardindex and remove all calls to WP (the include of load.php, and the include to sneeker.php), poof- it's gone.  I leave it here simply because i see a lot of threads where folks are trying to entwine the two engines- this does it, and then you can make WP look like SMF, or SMF look like WP- but you're FAR better served NOT entwining the engines more than this imHo- cats and dogs they are, and you'll not want to confuse calls as WP does it.... sloppy... 

note something else in this files code:  IF THE WP POST DOESN'T HAVE A FEATURED IMAGE, A RANDOM ONE WILL BE USED IN IT'S PLACE IN PRECISELY THE SAME MANNER AS THE BIG BACKGROUND IMAGE... YOU 'MAY' WANT TO ADD AN ADDITIONAL DIRECTORY WITH IMAGES INTENDED SPECIFICALLY FOR THIS PURPOSE, OR YOU CAN USE THE SAME ONES- IF YOU USE DIFFERENT ONES YOU'LL WANT TO CHANGE THE ADDRESS IN THIS FILE TO POINT TO THEM, AND THEY STILL NEED TO BE NAMED NUMERICALLY SEQUENTIALLY AND WITH .jpg EXTENSIONS.

boardindex.template.php: the only changes is the call to the 'sneeker'... it's 'notated' and called 'the WP include and three little panels'... again, you can use this if you have a WP install, or delete the entire section if you don't or if you don't want to two engines overlapping.

i'll be around for questions if any... my suggestion is to use an account on your forum that uses this 'theme' and everyone else uses the theme you were using before... once you get it straightened out the way you like it THEN swap it to the primary theme. 

the entire point of this post is to demonstrate how to do different things with SMF and with little changes and by leveraging includes to do the lifting... using includes and a version of 'show or not', and on another forum i run every single board has a different and corresponding 'badge' and header image... some have functions others don't (such as shout boxes, galleries, ect), and all done with a simple include file planted in strategic locations and used responsibly. NOT 'requires', but 'includes... if a 'require' doesn't load, or if it has a mistake, it will WSOD your forum... an include? consider it a 'soft' require... it won't break you.

anyway- thanks for your time.

EDITED TO ADD:
below are screen shots, as well as the files you'll need to make it happen.  the code is simple and clean.  also, the css includes some mobile responsive additions- which i'll be playing with time permitting and will share once done.

« Last Edit: February 17, 2020, 01:44:09 PM by drewactual »

Offline drewactual

  • Sr. Member
  • ****
  • Posts: 763
    • College Football Fan Site CFB51
i've changed a few things since posting this so it's likely not applicable anymore... i'd be happy to offer the index.template and css if anyone is interested and wants to springboard off it for their own use. 

the alterations include a wordpress article feed, primarily, which is outside the SMF family and function.  it IS, however, in the index.template as an include.  IF someone wants this thing as a 'theme' or to write their own theme (which i have no interest in doing) i can offer up all of it... the WP 'include' is just that- if the file it refers to is empty, it won't break function or form.  which is it's intent. 

 

Offline Diego Andrés

  • Customizer
  • SMF Hero
  • *
  • Posts: 3,453
  • Gender: Male
    • DiegoAndresCortes on GitHub
    • @bihgetter on Twitter
    • SMF Tricks - Free & Premium Themes
Re: not quite mod; not quite theme; super easy and clean 'curve' UX boost
« Reply #2 on: February 17, 2020, 11:07:28 AM »
Please remove the link to your forum and attach screenshots instead

SMF Tricks - Free & Premium Responsive Themes for SMF.

Offline drewactual

  • Sr. Member
  • ****
  • Posts: 763
    • College Football Fan Site CFB51
Re: not quite mod; not quite theme; super easy and clean 'curve' UX boost
« Reply #3 on: February 17, 2020, 01:46:30 PM »
done..... but this is now a lot more involved than the original post and just a handful of alterations as it was... it's entering theme and function territory firmly, and may serve a better purpose as jump off for someone to adopt it as a theme and mod, and present it as such... i don't have interest in doing so, but... someone else, if they want, can have it.

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,029
  • Master of BBC Abuse
Re: not quite mod; not quite theme; super easy and clean 'curve' UX boost
« Reply #4 on: February 17, 2020, 11:53:47 PM »
Quote
and change your forum's width to 100%...

Lost me right there. :D I hate full-width forums on desktop monitors. Total typography/user experience/readability fail.

However, you could make your other ideas work just as well with a restricted width on the forum itself. I can even tell you how to do that with default Curve markup.

Regarding "sticky" menus: my 2c is they're a pointless gimmick. The only reason to have one is so nerds can go "Ooo, look at that!" the first couple of times they scroll the screen. After that, the novelty very rapidly wears off and nobody cares anymore.

If you want the menu fixed to the top of the screen, just use position: fixed; and be done with it. Works well. Bulletproof in all browsers. :)

So-called "sticky menus" offer no improvement in functionality over a fixed menu, and they have to rely on either position: sticky; (for which browser support can be a tad dodgy) or on javascript (which IMO is a waste of js).

Offline drewactual

  • Sr. Member
  • ****
  • Posts: 763
    • College Football Fan Site CFB51
Re: not quite mod; not quite theme; super easy and clean 'curve' UX boost
« Reply #5 on: February 17, 2020, 11:56:43 PM »
well, it's just so there is no conflict to be honest, as the css restricts the width with max-width and the # screen size handles anything over 1900px i think it is... and... the width of the forum itself (the table) will ultimately, in this application, (not the one i'm sharing here, but as i've done it elsewhere and will ultimately do on the page described here) have an advertising 'sticky' column to the right... you can see it live on cfb51.com, not that it is precisely what i'm going to do with this one, but the same general idea... it is also an 'include' file. 

the use of includes to separate the function of SMF and applying overarching styles is the point i'm trying to make- the simplicity and impact of it.

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,029
  • Master of BBC Abuse
Re: not quite mod; not quite theme; super easy and clean 'curve' UX boost
« Reply #6 on: February 18, 2020, 02:59:02 AM »
Yes if you want the forum full width (for whatever reason) then IMO it would make sense to have additional content in side columns. Knock 400 or so off each side and it becomes much more usable. Otherwise the content area just gets too damned wide on a larger monitor. I have a 2560 wide screen, and full width sentences are like "pack your survival gear, three month's rations, and notify the authorities before setting out". My 2c is actual post sentences shouldn't be over about 1000px tops.

There are some good ideas here though. :)