I'm new to complex coding (most of my experience is with HTML, so I'm clunky at best with CSS and JS), and am running into a terribly irksome issue with a Star Wars forum I manage.
Our forum is through XenForo, and we would like the capability to upload banner images for separate forum pages that scale with browser/device width, and fit neatly into a defined aspect ratio (4:1 or 5:1 would be ideal). Problem is, I don't know how to do this. I've tried Googling a variety of solutions and nothing has worked.
I could really use some help from someone who knows what the hell they're looking at. I don't know what's important and what's not. .nodesbackgrounds is the tag in question. Here is a link to a live page with a forum banner uploaded: https://forums.sithempire.net/index.php?forums/house-vahl.16/
Here is the code for the template where the banner image is defined:
<style>
.nodesbackgrounds {background:url({$forum.Node.catfor}) !important; height:250px; width:100%; margin-bottom:20px;}
</style>
</xf:if>
<div class="nodesbackgrounds"></div>
<xf:title page="{$page}">{$forum.Node.title}</xf:title>
<xf:description>{$forum.Node.description|raw}</xf:description>
<xf:css src="structured_list.less" />
<xf:macro template="metadata_macros" name="canonical_url"
arg-canonicalUrl="{{ link('canonical:forums', $forum, $canonicalFilters + {'page': $page}) }}" />
<xf:head option="rss_forum"><link rel="alternate" type="application/rss+xml" title="{{ phrase('rss_feed_for_x', {'title': $forum.title})|for_attr }}" href="{{ link('forums/index.rss', $forum) }}" /></xf:head>
<xf:macro template="forum_macros" name="forum_page_options" arg-forum="{$forum}" />
<xf:breadcrumb source="$forum.getBreadcrumbs(false)" />
<xf:pageaction if="$forum.canCreateThread()">
<xf:button href="{{ link('forums/post-thread', $forum) }}" class="button--cta" icon="write">
{{ phrase('post_thread') }}
</xf:button>
</xf:pageaction>
<xf:if is="$pendingApproval">
<div class="blockMessage blockMessage--important">{{ phrase('content_submitted_displayed_pending_approval') }}</div>
</xf:if>
<xf:if is="$nodeTree">
<xf:ad position="forum_view_above_node_list" arg-forum="{$forum}" />
<div class="block">
<div class="block-container">
<div class="block-body">
<xf:macro template="forum_list" name="node_list"
arg-children="{$nodeTree}"
arg-extras="{$nodeExtras}"
arg-depth="2" />
</div>
</div>
</div>
<xf:ad position="forum_view_below_node_list" arg-forum="{$forum}" />
</xf:if>
<xf:if is="$canInlineMod">
<xf:js src="xf/inline_mod.js" min="1" />
</xf:if>
<xf:ad position="forum_view_above_thread_list" arg-forum="{$forum}" />
<div class="block" data-xf-init="{{ $canInlineMod ? 'inline-mod' : '' }}" data-type="thread" data-href="{{ link('inline-mod') }}">
<div class="block-outer"><xf:trim>
<xf:pagenav page="{$page}" perpage="{$perPage}" total="{$total}"
link="forums" data="{$forum}" params="{$filters}"
wrapperclass="block-outer-main" />
<xf:if contentcheck="true">
<div class="block-outer-opposite">
<div class="buttonGroup">
<xf:contentcheck>
<xf:if is="$canInlineMod">
<xf:macro template="inline_mod_macros" name="button" />
</xf:if>
<xf:if is="$xf.visitor.user_id">
<xf:button href="{{ link('forums/mark-read', $forum, {'date': $xf.time}) }}"
class="button--link" overlay="true">
{{ phrase('mark_read') }}
</xf:button>
</xf:if>
<xf:if is="$forum.canWatch()">
<xf:button href="{{ link('forums/watch', $forum) }}" class="button--link"
data-xf-click="switch-overlay"
data-sk-watch="{{ phrase('watch') }}"
data-sk-unwatch="{{ phrase('unwatch') }}">
<xf:if is="{$forum.Watch.{$xf.visitor.user_id}}">{{ phrase('unwatch') }}<xf:else />{{ phrase('watch') }}</xf:if>
</xf:button>
</xf:if>
</xf:contentcheck>
</div>
</div>
</xf:if>
</xf:trim></div>
<xf:set var="$dateLimits" value="{{ {
'-1': phrase('any_time'),
'7': phrase('x_days', {'days': '7'}),
'14': phrase('x_days', {'days': '14'}),
'30': phrase('x_days', {'days': '30'}),
'60': phrase('x_months', {'months': '2'}),
'90': phrase('x_months', {'months': '3'}),
'182': phrase('x_months', {'months': '6'}),
'365': phrase('1_year')
} }}" />
<xf:set var="$sortOrders" value="{{ {
'last_post_date': phrase('last_message'),
'post_date': phrase('first_message'),
'title': phrase('title'),
'reply_count': phrase('replies'),
'view_count': phrase('views'),
'first_post_reaction_score': phrase('first_message_reaction_score')
} }}" />
<div class="block-container">
<div class="block-filterBar">
<div class="filterBar">
<xf:if contentcheck="true">
<ul class="filterBar-filters">
<xf:contentcheck>
<xf:if is="$filters.prefix_id">
<li><a href="{{ link('forums', $forum, $filters|replace('prefix_id', null)) }}"
class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
<span class="filterBar-filterToggle-label">{{ phrase('prefix:') }}</span>
{{ prefix_title('thread', $filters.prefix_id) }}</a></li>
</xf:if>
<xf:if is="$filters.starter_id AND $starterFilter">
<li><a href="{{ link('forums', $forum, $filters|replace('starter_id', null)) }}"
class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
<span class="filterBar-filterToggle-label">{{ phrase('started_by:') }}</span>
{$starterFilter.username}</a></li>
</xf:if>
<xf:if is="$filters.last_days AND {$dateLimits.{$filters.last_days}}">
<li><a href="{{ link('forums', $forum, $filters|replace('last_days', null)) }}"
class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
<span class="filterBar-filterToggle-label">{{ phrase('last_updated:') }}</span>
{$dateLimits.{$filters.last_days}}</a></li>
</xf:if>
<xf:if is="$filters.order AND {$sortOrders.{$filters.order}}">
<li><a href="{{ link('forums', $forum, $filters|replace({'order': null, 'direction': null})) }}"
class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('return_to_default_order')|for_attr }}">
<span class="filterBar-filterToggle-label">{{ phrase('sort_by:') }}</span>
{$sortOrders.{$filters.order}}
<xf:fa icon="{{ $filters.direction == 'asc' ? 'fa-angle-up' : 'fa-angle-down' }}" />
<span class="u-srOnly"><xf:if is="$filters.direction == 'asc'">{{ phrase('ascending') }}<xf:else />{{ phrase('descending') }}</xf:if></span>
</a></li>
</xf:if>
</xf:contentcheck>
</ul>
</xf:if>
<a class="filterBar-menuTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{{ phrase('filters') }}</a>
<div class="menu menu--wide" data-menu="menu" aria-hidden="true"
data-href="{{ link('forums/filters', $forum, $filters) }}"
data-load-target=".js-filterMenuBody">
<div class="menu-content">
<h4 class="menu-header">{{ phrase('show_only:') }}</h4>
<div class="js-filterMenuBody">
<div class="menu-row">{{ phrase('loading...') }}</div>
</div>
</div>
</div>
</div>
</div>
<xf:set var="$qtPos">{{ ($sortInfo.order == 'last_post_date' && $sortInfo.direction == 'asc') ? 'bottom' : 'top' }}</xf:set>
<div class="block-body">
<div class="structItemContainer">
<xf:macro template="thread_list_macros" name="quick_thread"
arg-forum="{$forum}"
arg-page="{$page}"
arg-order="{$sortInfo.order}"
arg-direction="{$sortInfo.direction}" />
<xf:if is="$stickyThreads is not empty OR $threads is not empty">
<xf:if is="$stickyThreads is not empty">
<div class="structItemContainer-group structItemContainer-group--sticky">
<xf:foreach loop="$stickyThreads" value="$thread">
<xf:macro template="thread_list_macros" name="item" arg-thread="{$thread}" arg-forum="{$forum}" />
</xf:foreach>
</div>
<xf:ad position="forum_view_below_stickies" arg-forum="{$forum}" />
</xf:if>
<div class="structItemContainer-group js-threadList">
<xf:if is="$threads is not empty">
<xf:foreach loop="$threads" value="$thread">
<xf:macro template="thread_list_macros" name="item" arg-thread="{$thread}" arg-forum="{$forum}" />
</xf:foreach>
<xf:if is="$showDateLimitDisabler">
<div class="structItem structItem--note">
<div class="structItem-cell">
<a href="{{ link('forums', $forum, {'page': $page, 'no_date_limit': 1} + $filters) }}">
{{ phrase('show_older_items') }}
</a>
</div>
</div>
</xf:if>
</xf:if>
</div>
<xf:elseif is="$filters" />
<div class="structItemContainer-group js-threadList">
<div class="structItem js-emptyThreadList">
<div class="structItem-cell">{{ phrase('there_no_threads_matching_your_filters') }}</div>
</div>
</div>
<xf:else />
<div class="structItemContainer-group js-threadList">
<div class="structItem js-emptyThreadList">
<div class="structItem-cell">{{ phrase('there_no_threads_in_this_forum') }}</div>
</div>
</div>
</xf:if>
</div>
</div>
</div>
<div class="block-outer block-outer--after">
<xf:pagenav
page="{$page}" perpage="{$perPage}" total="{$total}"
link="forums" data="{$forum}" params="{$filters}"
wrapperclass="block-outer-main" />
<xf:showignored wrapperclass="block-outer-opposite" />
<xf:if is="!$forum.canCreateThread()">
<div class="block-outer-opposite">
<xf:if is="$xf.visitor.user_id">
<span class="button is-disabled">
{{ phrase('no_permission_to_post') }}
<!-- this is not interactive so shouldn't be a button element -->
</span>
<xf:else />
<xf:button href="{{ link('login') }}" class="button--link" overlay="true">
{{ phrase('log_in_or_register_to_post') }}
</xf:button>
</xf:if>
</div>
</xf:if>
</div>
</div>
<xf:ad position="forum_view_below_thread_list" arg-forum="{$forum}" />
<xf:widgetpos id="forum_view_sidebar" context-forum="{$forum}" position="sidebar" />
I know this is a lot to ask for, but I am at a complete loss. I don't know anyone personally I can ask for help, so if there's anyone here who's willing to help, I'd be eternally grateful.