News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

How can I change the header image per board id?

Started by shadav, June 26, 2020, 10:39:03 PM

Previous topic - Next topic

Antechinus

Good. Now (or actually a tad later) I'll head over to GitHub (may its name be cursed forever) and see if anyone has tested body classes as styling parents with Chrome on iOS (I bet nobody has).

drewactual

question: I do this same thing but using URL's to control it... what is the advantage to using $boardid? what is the disadvantage to using URL's? 

Antechinus

Doesn't really matter much, I suppose. Board ID is just a handy and tidy thing to call, but there's nothing really wrong with using URL's as far as I know.

When this code was originally requested some years back people were asking for the ability to style by board, so board ID just seemed like the natural way of doing it. If you use the URL you have to include the board ID as part of that anyway, so all the rest is just extra stuff to throw into your logic.

drewactual


Antechinus

After posting that I did think of one advantage, depending on what you want to do. If you want to keep the custom board banner for all topics inside that board (ie: when viewing Display.template) then the current board stuff in Sources keeps track of that for you, so that makes board ID the easy way to get what you want.

If you want to change the banner according to topic, then a URL is probably as good for all practical purposes. But at the time this code was written it just seemed to make sense to have one chunk that did all possible body tag classes, and use the actions, board ID's, topics ID's, etc to do it.

drewactual

i run with an include file- and have different styling for each and every board... some with a header, some without... the main page with a random image (one of several hundred)... different functions.... different metatags and different OG: and twitter cards.. i kind of took the concept to an extreme... i use the same device to interject styled WP articles or not... it's a dang handy tool.   i guess i could have used $board, and it still 'kinda' does, but the css issue doesn't exist in this manner of doing it. 

problem: i understand php8 (when we're finally forced there) changes the functions or antiquates it, so... i'll be re-drafting.... and i may use $board... which puts me in the same boat as this thread here and is something to think about before that day comes.... have a plan, right?

Seedorfbiggy

Please how can I set Logo image URL to show my desire logo above :(

shadav

Quote from: Seedorfbiggy on July 07, 2020, 10:00:18 AM
Please how can I set Logo image URL to show my desire logo above :(

um...that doesn't actually have anything to do with the topic of this thread....it'd be best to either search or create your own post ;)

without knowing exactly what you mean....or what template you are using....or what version of smf you are using.....have you gone into your admin?
in admin under configurations and then current theme
you will find
Logo image URL:
(leave blank to show forum name or default logo.)

if that is not what you are wanting then you will need to be a bit more specific and within your own thread not randomly asking in an unrelated thread

Antechinus

Had a thought about this. If you don't mind running another test with Chrome on iShiz: it would be worth checking if applying the class to the html tag instead of the body tag keeps Chrome/iOS happy.

So instead of this:
<header class="head-er', (!empty($context['current_board'])) ? ' board_'. $context['current_board'] : '', '" id="top">

You'd use this:
Code (index.template.php - Line 84) Select
<html xmlns="http://www.w3.org/1999/xhtml"', $context['right_to_left'] ? ' dir="rtl"' : '', '  class="', (!empty($context['current_board'])) ? ' board_'. $context['current_board'] : '', '">

Globals for function template_html_above() would be:
global $context, $settings, $options, $scripturl, $txt, $modSettings;

With .head-er defaulting back to:
<header class="head-er" id="top">

And with CSS for the banners-by-board done as:
.head-er {background: url(default_banner.png) center cover;}
.board_1 .head-er {background-image: url(board_1_lolcat.jpg);}
.board_4 .head-er {background-image: url(board_4_flying_wombat.gif);}


If that works on Chrome/iOS as well as on anything saner, it would allow styling any tag by board_id, not just one tag. This would make it the best fix for the 2.1 repo. :)

shadav

i'll play with this probably tomorrow...today my concentration isn't really here...what...squirrel....oh what's that over there, it's shiny....  :laugh:

shadav

Quote from: Antechinus on September 07, 2020, 10:08:05 AM
Had a thought about this. If you don't mind running another test with Chrome on iShiz: it would be worth checking if applying the class to the html tag instead of the body tag keeps Chrome/iOS happy.

So instead of this:
<header class="head-er', (!empty($context['current_board'])) ? ' board_'. $context['current_board'] : '', '" id="top">

You'd use this:
Code (index.template.php - Line 84) Select
<html xmlns="http://www.w3.org/1999/xhtml"', $context['right_to_left'] ? ' dir="rtl"' : '', '  class="', (!empty($context['current_board'])) ? ' board_'. $context['current_board'] : '', '">

Globals for function template_html_above() would be:
global $context, $settings, $options, $scripturl, $txt, $modSettings;

With .head-er defaulting back to:
<header class="head-er" id="top">

And with CSS for the banners-by-board done as:
.head-er {background: url(default_banner.png) center cover;}
.board_1 .head-er {background-image: url(board_1_lolcat.jpg);}
.board_4 .head-er {background-image: url(board_4_flying_wombat.gif);}


If that works on Chrome/iOS as well as on anything saner, it would allow styling any tag by board_id, not just one tag. This would make it the best fix for the 2.1 repo. :)

sorry forgot about this....

:laugh: :laugh: :laugh: :laugh:

not quite
it did sort of work but um....about that....
it didn't change the header image, it changed the body/background image
:laugh: :laugh: :laugh:


shadav

nevermind...i'm an idiot  ;D

it does work :)

i put .board_12 and forgot the .head-er after it....that's why it changed the background and not the header....

*I need coffee*

Antechinus

Cool. Coffee is always good. I'm into some now. Looks like that's a bulletproof fix for all browsers then. I'll post a note on PitGlub.

live627


shadav

Quote from: live627 on October 11, 2020, 10:22:59 PM
Did you misspell ButtPlug? :D

:laugh: :laugh: :laugh:

ya know I wouldn't put it past ante to sneak that into the code somewhere

Antechinus

I used to call it ButtPlug, but I kinda like to think up new insults for it. :D

I did put a stealth wombat into Elk's CSS. Found this awesome ASCII wombat in some strange place somewhere on the web, and thought it was perfect for the job. The index at the start of the file has various sections listed (@HEADER, @LISTS, @BUTTONS, etc) so that searching for any tag takes you straight to that area of the file. Good system (found that one on GitHub even). So at the end of the index I added @WOMBATZ, and when you search for that tag you get taken to the ASCII wombat and there's a comment that says "See. I told you there were wombatz here".

Small thing amuse small minds, y'know. :D

Advertisement: