News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

NightBreeze

Started by SychO, July 25, 2018, 11:31:03 AM

Previous topic - Next topic

ChuckWheat

#360
Quote from: SychO on February 26, 2021, 01:59:28 PM
Quotethere are red-colored indicators I assumed highlighted where new posts were.  One of our testers discovered that it's not present on our theme.

Is there a setting I may have missed somewhere that turns that feature on/off?

Those are indicators for unapproved posts not any new posts.

QuoteThey are also a bit confused by how the "Arrow Nav bar" (for lack of proper terms...the one above the categories that shows your relative position on the forum (Home --> Category --> Board -->Topic) seems to have mixed functionality, part navigational aid, and part "New Unread Posts").  Is there a setting for that I've managed to overlook as well?

It's called the breadcrumbs, but I'm not sure what you mean, how is it related to "New unread posts" ?
Hey SychO, thanks for clarifying the red indicators, our assumptions are showing.  I also appreciate you clarifying the proper name of the breadcrumb menu. :)

The challenge we are having with the breadcrumbs menu is below, using this image as an example (sidebar: Is the image bbcode disabled?  I think it would be easier for you to see and read, as opposed to having to switch back and forth):

https://i.postimg.cc/cLmg7fpj/image-3-of-3.png

Issues Found:  Unexpected navigational behavior on breadcrumb/Category Heading menus. Go Up/Down buttons appearing when there's nowhere to scroll due to two posts being present.

1. TEST PROCEDURE: Start at the home page, click on "Testing Sandbox" category header.

EXPECTED RESULT:  Should show all boards within the category, and the last topic posted within each board, essentially appearing like the home page does, but at the category level only. 

ACTUAL RESULT:  Hovering over the Category header produces a pop-up box stating "Unread posts".  Clicking it produces an empty area that states "No unread topics found since your last visit. Click here to try all unread topics."; no visibility to any boards or topics in this category.  No easily visible way to get to Test Board One or Two boards directly from this menu; Breadcrumb area shows "Recent Unread Topics" as the current location, while we are on the "Testing Sandbox" category.  Clicking "Testing Sandbox" on the breadcrumb menu doesn't take us to the "Testing Sandbox" category listing (expected), but rather returns us to the home page (unexpected, but does ultimately allow us to do what we want).

ISSUE:  This will confuse many of our users, unless we're looking at this model wrong.  The breadcrumb model (as described in the article you provided) seems to produce unexpected behavior that could leave some members lost...clicking on the category heading takes them to unread posts, which seemingly expire after a couple of days and would result in many members seeing no topic results depending on how long ago their last visit was...clicking on the category level of the breadcrumb menu takes them home...and so on. 

2. TEST PROCEDURE: Start at the home page, click on "Test Board 1" board.

EXPECTED RESULT:  Go Up/Down buttons shouldn't be displayed until a sufficient number of topics are posted to need to go to the top or bottom of the screen.  Should see all topics available in that board.

RESULT: Both "Go Up" or "Go Down" buttons visible with two topics displayed (unexpected); what I see is exactly what you see in the image above.  Clicking on the "Go Up/Down" buttons does nothing (expected). Clicking the category link in the breadcrumb menu takes us back home again (consistent with previous test, but still not expected). All topics are visible (as expected).

ISSUE: (modified) This was unexpected behavior reported by my tester. While minor in the grand scheme, we are trying to ensure we remove/reduce/explain any potential unexpected things that may give some members reason to resist acceptance of the new forum.




SUMMARY: If this is characterized this right (allowing the possibility that we're missing something that you understand differently), I may have to try to reconfigure the breadcrumb area to function solely as a nav tool before we "go-live" with our users, replacing the hybrid of navigation seemingly mixed with "most recent posts" functionality...and like to get your perspective on why the "Go *.*" buttons are appearing when they aren't needed yet, considering there's nothing to scroll.

Again, this isn't a complaint about your theme...I just know my users, and what it will take to get them to accept their new forum environment. 

I'm hoping we're missing something obvious that we can simply explain to our members, frankly...lol

Antechinus

Re your Test 1: yes, that's standard SMF behaviour and yes, it's a bit weird compared to some other forum apps. There is a mod available to give similar behaviour to vB, phpBB, etc. It says compatible with 2.0.15 but it should also be fine with 2.0.18.

See: https://custom.simplemachines.org/mods/index.php?mod=486

Re your Test 2: also standard behaviour. Those buttons are either enabled or disabled. TBH I've never liked them, so get rid of them and code my own.

SychO

What you describe is default SMF behaviour and not behaviour particular to or added by this theme,

Quote
1. TEST PROCEDURE: Start at the home page, click on "Testing Sandbox" category header.

EXPECTED RESULT:  Should show all boards within the category, and the last topic posted within each board, essentially appearing like the home page does, but at the category level only.

I get that you're used to a specific behaviour by forum software you previously used, but this is how SMF works and is just a matter of getting used to, it's not as illogical as it may seem, the category name has a tooltip that says (Unread posts) and should be pretty descriptive that clicking will show unread posts in that category only.

Quote
2. TEST PROCEDURE: Start at the home page, click on "Test Board 1" board.

EXPECTED RESULT:  Go Up/Down buttons shouldn't be displayed until a sufficient number of topics are posted to need to go to the top or bottom of the screen.  Should see all topics available in that board.

That's just not something SMF does, it doesn't check for when to show the buttons, again I get that it looks odd since you're used to a specific behaviour.


Now, your options are either to get used to the way SMF works seeing as you've switched software, it's only natural that a lot of things will look weird, but once you get used to the way things work you'll see it's actually just fine.

Of course you don't have to wait and get used to it, SMF is after all very customizable, you can either get in the code and adapt it to your needs or hire people (there's a special board for that here) to make those customizations for you.

Hope that helps.
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

ChuckWheat

Quote from: Antechinus on February 26, 2021, 04:30:22 PM
Re your Test 1: yes, that's standard SMF behaviour and yes, it's a bit weird compared to some other forum apps. There is a mod available to give similar behaviour to vB, phpBB, etc. It says compatible with 2.0.15 but it should also be fine with 2.0.18.

See: https://custom.simplemachines.org/mods/index.php?mod=486

Re your Test 2: also standard behaviour. Those buttons are either enabled or disabled. TBH I've never liked them, so get rid of them and code my own.

Thanks for your response Antechinus, 

On test 1, that mod looks like it could help with that problem, we'll check it out.  I appreciate your solution suggestions, I may never have found that particular mod.

On test 2, our users are enthusiastic about the functionality those buttons provide when there's a full page of posts present. If there's a simple configuration or code change to make it work that way, I'm trying to cut off potential complaints, as our group is used to things working in a very specific way. 

ChuckWheat

Quote from: SychO on February 26, 2021, 04:37:12 PM
What you describe is default SMF behaviour and not behaviour particular to or added by this theme,

Quote
1. TEST PROCEDURE: Start at the home page, click on "Testing Sandbox" category header.

EXPECTED RESULT:  Should show all boards within the category, and the last topic posted within each board, essentially appearing like the home page does, but at the category level only.

I get that you're used to a specific behaviour by forum software you previously used, but this is how SMF works and is just a matter of getting used to, it's not as illogical as it may seem, the category name has a tooltip that says (Unread posts) and should be pretty descriptive that clicking will show unread posts in that category only.

Quote
2. TEST PROCEDURE: Start at the home page, click on "Test Board 1" board.

EXPECTED RESULT:  Go Up/Down buttons shouldn't be displayed until a sufficient number of topics are posted to need to go to the top or bottom of the screen.  Should see all topics available in that board.

That's just not something SMF does, it doesn't check for when to show the buttons, again I get that it looks odd since you're used to a specific behaviour.


Now, your options are either to get used to the way SMF works seeing as you've switched software, it's only natural that a lot of things will look weird, but once you get used to the way things work you'll see it's actually just fine.

Of course you don't have to wait and get used to it, SMF is after all very customizable, you can either get in the code and adapt it to your needs or hire people (there's a special board for that here) to make those customizations for you.

Hope that helps.

I appreciate your patience and kindness with my questions, and in your responses...thank you.

And I wish I had more in-depth understanding of where theme mods begin and end, so I don't inappropriately ask you for help on matters that end up not being related to your theme...is there some set of standards posted that explain what is considered core SMF functionality, and what elements are traditionally customized as part of a theme package?

On Test 1, I'll try the mod that Antechinus mentioned, and failing that our admin team may have to set user expections pre-launch so users at least have an opportunity to understand the differences between what they are used to and what is new, before getting frustrated. 

Long term, we'll gauge user complaints to determine whether we need to create (or buy) a customization to address this challenge.

On Test 2, I appreciate your comments, and you're right.  If it were just for me, I'd not even bring it up...I adapt pretty easily to new environments.  But we're trying to look out for some in our user base have a harder time with change, and given this is not abnormal system behavior but a different model, our approach will shift from trying to fix it, but again to educating/setting expectations with users. 

In the meantime we'll check to see if someone creates a new mod for that, or again perhaps we'll create/buy a customization long-term.

Thank you both...I (and our forum) appreciate your time in helping us figure things out.

Antechinus

Quote from: ChuckWheat on February 26, 2021, 04:46:50 PMOn test 2, our users are enthusiastic about the functionality those buttons provide when there's a full page of posts present. If there's a simple configuration or code change to make it work that way, I'm trying to cut off potential complaints, as our group is used to things working in a very specific way.
I understand about non-malleable users. One wonders how the poor things ever learned anything in the first place. :)

There are various tutorials around the web for making such buttons appear and disappear, depending on how much page content there is relative to screen height. This one looks handy: https://getflywheel.com/layout/sticky-back-to-top-button-tutorial/

The only really relevant part is the javascript. You can do the HTML and CSS any of umpteen ways, depending on personal preference. I'm sure it's not too difficult to implement, but I have to admit I've never tried it myself. I just stick my top/bottom buttons over at the left side of the screen, which IMO is the most convenient location for desktop or tablets, and use a media query to shift them to the bottom of the screen on phones.

ETA: I'm somewhat curious now, so may play around with it.

ChuckWheat

#366
Quote from: Antechinus on February 26, 2021, 05:41:14 PM
I understand about non-malleable users. One wonders how the poor things ever learned anything in the first place. :)

There are various tutorials around the web for making such buttons appear and disappear, depending on how much page content there is relative to screen height. This one looks handy: https://getflywheel.com/layout/sticky-back-to-top-button-tutorial/

The only really relevant part is the javascript. You can do the HTML and CSS any of umpteen ways, depending on personal preference. I'm sure it's not too difficult to implement, but I have to admit I've never tried it myself. I just stick my top/bottom buttons over at the left side of the screen, which IMO is the most convenient location for desktop or tablets, and use a media query to shift them to the bottom of the screen on phones.

ETA: I'm somewhat curious now, so may play around with it.
In a former professional life I was a non-technical IT project manager/business analyst, so you made me literally laugh out loud when I read your opening sentence...so true!  After several years absence from some minor HTML and CSS manual coding years ago, it's been kinda fun poking around under the hood, so to speak.

You make great points again.  I just received a book I ordered called "CSS:  The Definitive Guide", nearly 1,100 pages of just about all things CSS related...so I have a bit of homework ahead of me. 

I've also found that sometimes if you need to remove some functionality you can comment out the code instead of removing the code.  That is helpful if you find your fixes are not working the way you'd prefer, and you need to return to the previous version without having to go back to a full code restoration.  You just have to keep track of your changes somewhere, so you get everything...and having a code editor that has line numbers seems like a huge lifesaver, in my experience. 

I haven't had to dive into any Javascript or PHP yet, but I'm pretty sure I'll have to at some point...and yes, frequent backups are now the order of the day.

All of which makes me appreciate what SychO has accomplished with this theme even more...

Added:  The "back to top" functionality is what my users are used to...this link is very helpful!

Kindred

rotfl....   as a tehcnical project manager for the past 25 years, I laughed and laughed at both of you.....
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

ChuckWheat

#368
Quote from: Kindred on February 26, 2021, 07:05:25 PM
rotfl....   as a tehcnical project manager for the past 25 years, I laughed and laughed at both of you.....
I'm so sorry, Kindred...no wonder you sell yourself as "the mean one"...  :laugh:

I always thought the PM role in many organizations was the pressure relief valve for someone else's career...knowing full well the dismal success rate is on projects, all the higher ups had to do was blame the PM to get cover for them stealing your resources (or demanding unrealistic timelines, etc), then blaming you for the delay. 

That kind of stuff drove a bunch of stress related ailments, so I tapped out after 20 years of it...my hat is tipped to you for making it so far.  :)


Antechinus

Quote from: ChuckWheat on February 26, 2021, 05:56:33 PM
Quote from: Antechinus on February 26, 2021, 05:41:14 PMThere are various tutorials around the web for making such buttons appear and disappear, depending on how much page content there is relative to screen height. This one looks handy: https://getflywheel.com/layout/sticky-back-to-top-button-tutorial/

ETA: I'm somewhat curious now, so may play around with it.
Added:  The "back to top" functionality is what my users are used to...this link is very helpful!

I've just taken a closer look at it, and IMO their markup could be a bit simpler (it really only needs an anchor and a ::before) and their CSS is (as is common with a lot of tutorials) about twice as much bollocks as is needed to do the job.

Whether or not the javascript is over the top depends on what behaviour you want. If you're happy with just going straight to the top instantly, then the javascript could be simplified quite a bit. If you want the nifty animation, their js looks pretty good. But then I don't know much about js, so someone else might be able to do it cleaner.

PS: If someone wants to split the not-strictly-Nightbreeze posts out to a new topic that's fine by me.

ChuckWheat

Quote from: Antechinus on February 27, 2021, 04:19:27 AMI've just taken a closer look at it, and IMO their markup could be a bit simpler (it really only needs an anchor and a ::before) and their CSS is (as is common with a lot of tutorials) about twice as much bollocks as is needed to do the job.

Whether or not the javascript is over the top depends on what behaviour you want. If you're happy with just going straight to the top instantly, then the javascript could be simplified quite a bit. If you want the nifty animation, their js looks pretty good. But then I don't know much about js, so someone else might be able to do it cleaner.

PS: If someone wants to split the not-strictly-Nightbreeze posts out to a new topic that's fine by me.

I took a deeper look last night, and one thing that is missing is that version in our current model, if you are positioned at the very top of the page, you have a "floating down arrow" that takes you directly to the bottom of the page.  That's quite handy, when you are needing to see the latest post and/or add a post. 

Any other position in the scroll and the floating arrow points point up, taking you back to the top on click. 

And I agree the OT posts can be split off, and I apologize for contributing to so many posts that perhaps should have been somewhere else.  All I ask is a link to where these posts are moved to, there's some things in here I find very useful I'd hate to lose.  It's been good conversation, IMHO.

Back to on-topic discussion from here.  :)

ChuckWheat

I'm having a few challenges, here's a screenshot.



1) We tried adding the logo, expecting it to appear in the grid area (like it is on the download page), but it is not displaying.  I can't find a configuration setting that will allow me to turn it on or off, and used a variety of different paths to display it. 

I regressed back to the curve theme, placed the image in the "images" folder (like I did for Nightbreeze), and it worked there...so I'm at a loss as to what might be holding it back. 

As you can see, the body of the site seems to be "on top" of the grid area...I'm wondering if maybe that may be contributing as well.

2) I figured out most of the color settings, but the location nav bar (same row as settings/search) is still challenging me.  When I right click/Inspect, I don't see a setting that turns the arrows for each hierarchical element yellow-in-color.  Is some piece of CSS tucked away in some other file somewhere, or what is this noob missing?

3) Is there a way to shrink the size of the buttons?  Where the hamburger menu is, if all of those buttons are out, even on a desktop it gets disjointed. The row starting with the user account remains at the top left, and all the menu buttons are aligned from the right, but underneath that top row.  I'm hoping it's a simple class update...otherwise I may need to go back to links.

Thanks for any advice or ideas on what to do.

SychO

Quote1) We tried adding the logo, expecting it to appear in the grid area (like it is on the download page), but it is not displaying.  I can't find a configuration setting that will allow me to turn it on or off, and used a variety of different paths to display it.

Did you put the logo url in the logo setting of the theme's settings page ?

Quote2) I figured out most of the color settings, but the location nav bar (same row as settings/search) is still challenging me.  When I right click/Inspect, I don't see a setting that turns the arrows for each hierarchical element yellow-in-color.  Is some piece of CSS tucked away in some other file somewhere, or what is this noob missing?

They're pseudo elements, you're looking for .navigate_section ul li div:after and .navigate_section ul li div:before

Quote3) Is there a way to shrink the size of the buttons?  Where the hamburger menu is, if all of those buttons are out, even on a desktop it gets disjointed. The row starting with the user account remains at the top left, and all the menu buttons are aligned from the right, but underneath that top row.  I'm hoping it's a simple class update...otherwise I may need to go back to links.

That happens when the menu is too big and about to overlap with the user menu, otherwise ugly things happen. If you want to disable that try removing the code inside the js `headerWatch` and `checkSize` functions (I don't remember what mumbo jumbo JS I wrote back then), otherwise you can try reducing the paddings on the menu items, maybe it'll fit and won't create the hamburger menu.
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

ChuckWheat

Quote from: SychO on March 06, 2021, 01:59:32 PM

Did you put the logo url in the logo setting of the theme's settings page ?

I did in Lifeboat One --> Administration Center --> Themes and Layout --> Manage and Install, Logo Image URL. This worked on Curve, but not for this theme.

I assumed this needed to be formatted as a regular URL, like this:

https://(domain)/Themes/Nightbreeze20LB/images/lifeboat_Mod3.png 

(Nightbreeze20LB is the actual and intended theme folder name).

Please let me know if any of this is wrong.

Quote from: SychO on March 06, 2021, 01:59:32 PM

They're pseudo elements, you're looking for .navigate_section ul li div:after and .navigate_section ul li div:before

I'm using a copy of index.css in Stylus as a way to create a mockup of the intended theme (thank you for that tip Antechinus!) and using an Linux equivalent of Notepad ++ to find the proper line numbers from a second copy of index.css (i haven't found a way to search in stylus). I searched for ".navigate_section", "before" and "after", and it is coming up with "No Matches Found" my search results.

I am I searching in the right place?

Quote from: SychO on March 06, 2021, 01:59:32 PM
That happens when the menu is too big and about to overlap with the user menu, otherwise ugly things happen. If you want to disable that try removing the code inside the js `headerWatch` and `checkSize` functions (I don't remember what mumbo jumbo JS I wrote back then), otherwise you can try reducing the paddings on the menu items, maybe it'll fit and won't create the hamburger menu.

It's not so much that it puts it into a hamburger menu that's a challenge (for responsive design, I see why it would/should do that)...it's just the sheer size of the buttons that I'd like to reduce. So in that regard, I'll give reducing the paddings a shot.

SychO

QuoteI did in Lifeboat One --> Administration Center --> Themes and Layout --> Manage and Install, Logo Image URL. This worked on Curve, but not for this theme.

I assumed this needed to be formatted as a regular URL, like this:

https://(domain)/Themes/Nightbreeze20LB/images/lifeboat_Mod3.png

(Nightbreeze20LB is the actual and intended theme folder name).

Please let me know if any of this is wrong.

You need to do it in the theme's specific theme settings (just click on the settings cog next to the breadcrumbs).

QuoteI'm using a copy of index.css in Stylus as a way to create a mockup of the intended theme (thank you for that tip Antechinus!) and using an Linux equivalent of Notepad ++ to find the proper line numbers from a second copy of index.css (i haven't found a way to search in stylus). I searched for ".navigate_section", "before" and "after", and it is coming up with "No Matches Found" my search results.

I am I searching in the right place?

Well I've never used that tool, but if you search for the exact two strings I gave you one at a time there has to be a result.
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

ChuckWheat

Quote from: SychO on March 07, 2021, 05:00:11 AM
You need to do it in the theme's specific theme settings (just click on the settings cog next to the breadcrumbs).

So here's my results:

Using the cog (theme settings) icon, it takes me to "Lifeboat One --> Administration Center --> Themes and Layout --> Manage and Install.  On the "Theme Settings" tab, "Logo image URL" text box is where I'm placing the URL.  (It appears to be the same path as if you are going through the admin tool). 

To help you with troubleshooting, here's the path and filename from the server file manager:



I copied the domain and database name directly from the file manager, and pasted them in; they are correct on visual verification.

I then tried a variety of ways to get it to display:

  • From admin panel, the absolute URL for the logo image (https://(domain)/Themes/Nightbreeze20LB/images/lifeboat_Mod3.png)
  • From admin panel, the database URL (/home/(database)/(domain)/Themes/Nightbreeze20LB/images/lifeboat_Mod3.png)
  • I also tried using the URL from the curve theme that is working (https://(domain)/Themes/default/images/lifeboat_Mod3.png
None of these approaches worked. I then cleared the "Logo Image URL" block, saved again, and tried all three URLs again starting from the homepage theme settings cog icon; same result (no logo visible, no visible difference in the header or body area of the site).

Quote from: SychO on March 07, 2021, 05:00:11 AM
Well I've never used that tool, but if you search for the exact two strings I gave you one at a time there has to be a result.

This is fixed now...I was using the stylesheet for curve instead of Nightbreeze20LB...which doesn't include those elements.  My apologies for taking your time on my mistake.




On a side note, the "pinned thread" icons have stopped displaying as well (they were there up to a couple of days ago), displaying the broken image icon instead.  I've only changed the CSS so far, mostly color changes, and a few font and padding changes only, and added the theme logo to the theme's "images" folder.  Here's what it looks like:



I verified the file is still where it belongs (xx.gif), and even imported a former backup version in to replace it in that folder...no luck.  I've run all the forum maintenance options, no errors found, SMF version is 2.0.18.  This is stumping me as well.

SychO

You either accidentally changed something in the CSS that caused the logo not to appear (because from the screenshots I don't remember that being a thing) or it's a bug with the theme. I can't tell though, I'd need to take a look at the forum myself.

Link?
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

ChuckWheat


SychO

Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

ChuckWheat


Advertisement: