Quantcast
Channel: phpBB.com
Viewing all articles
Browse latest Browse all 2457

[3.3.x] Styles Support & Discussion • Image (banner) in header

$
0
0
I would like to place an image in my header. The header extension is not an option since my header has already been modified considerably.

The image would be placed as a background, above it my particles, searchbox, site name + forum description and logo

But where in my overall_header do I put the code? If I add the code below my banner is there, but the forum description is pushed down.

Code:

<div class="header-image"><img class="header-image" src="https://./styles/prosilver/theme/images/header/_1.jpg";></a></div>
Full overall_header. html

Code:

<!DOCTYPE html><html dir="{{ S_CONTENT_DIRECTION }}" lang="{{ S_USER_LANG }}" class="html_default"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="color-scheme" content="dark light"><meta name="keywords" content="pro-ana, pro ana, pro-ana forum, anorexia, eetstoornis, afvallen"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><meta name="msapplication-TileColor" content="#da532c"><meta name="theme-color" content="#ffffff">{{ META }}<title>{% if UNREAD_NOTIFICATIONS_COUNT %}({{ UNREAD_NOTIFICATIONS_COUNT }}) {% endif %}{% if not S_VIEWTOPIC and not S_VIEWFORUM %}{{ SITENAME }} - {% endif %}{% if S_IN_MCP %}{{ lang('MCP') }} - {% elseif S_IN_UCP %}{{ lang('UCP') }} - {% endif %}{{ PAGE_TITLE }}{% if S_VIEWTOPIC or S_VIEWFORUM %} - {{ SITENAME }}{% endif %}</title>{% if S_ENABLE_FEEDS %}{% if S_ENABLE_FEEDS_OVERALL %}<link rel="alternate" type="application/atom+xml" title="{{ lang('FEED') }} - {{ SITENAME }}" href="{{ path('phpbb_feed_index') }}">{% endif %}{% if S_ENABLE_FEEDS_NEWS %}<link rel="alternate" type="application/atom+xml" title="{{ lang('FEED') }} - {{ lang('FEED_NEWS') }}" href="{{ path('phpbb_feed_news') }}">{% endif %}{% if S_ENABLE_FEEDS_FORUMS %}<link rel="alternate" type="application/atom+xml" title="{{ lang('FEED') }} - {{ lang('ALL_FORUMS') }}" href="{{ path('phpbb_feed_forums') }}">{% endif %}{% if S_ENABLE_FEEDS_TOPICS %}<link rel="alternate" type="application/atom+xml" title="{{ lang('FEED') }} - {{ lang('FEED_TOPICS_NEW') }}" href="{{ path('phpbb_feed_topics') }}">{% endif %}{% if S_ENABLE_FEEDS_TOPICS_ACTIVE %}<link rel="alternate" type="application/atom+xml" title="{{ lang('FEED') }} - {{ lang('FEED_TOPICS_ACTIVE') }}" href="{{ path('phpbb_feed_topics_active') }}">{% endif %}{% if S_ENABLE_FEEDS_FORUM and S_FORUM_ID %}<link rel="alternate" type="application/atom+xml" title="{{ lang('FEED') }} - {{ lang('FORUM') }} - {{ FORUM_NAME }}" href="{{ path('phpbb_feed_forum', { forum_id : S_FORUM_ID } ) }}">{% endif %}{% if S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID %}<link rel="alternate" type="application/atom+xml" title="{{ lang('FEED') }} - {{ lang('TOPIC') }} - {{ TOPIC_TITLE }}" href="{{ path('phpbb_feed_topic', { topic_id : S_TOPIC_ID } ) }}">{% endif %}{% EVENT overall_header_feeds %}{% endif %}{% if U_CANONICAL %}<link rel="canonical" href="{{ U_CANONICAL }}">{% endif %}<!--phpBB style name: prosilverBased on style:   prosilver (this is the default phpBB3 style)Original author:  Tom Beddard ( http://www.subBlue.com/ )Modified by:-->{% if S_ALLOW_CDN %}<script>WebFontConfig = {google: {families: ['Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese']}};(function(d) {var wf = d.createElement('script'), s = d.scripts[0];wf.src = 'https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.min.js';wf.async = true;s.parentNode.insertBefore(wf, s);})(document);</script>{% endif %}<link href="{{ T_FONT_AWESOME_LINK }}" rel="stylesheet"><link href="{{ T_STYLESHEET_LINK }}" rel="stylesheet"><link href="{{ T_STYLESHEET_LANG_LINK }}" rel="stylesheet"><script>if (localStorage.prosilverColors) document.documentElement.setAttribute("data-color", localStorage.prosilverColors);</script>{% DEFINE COLORS = ['default', 'Crimson', 'PaleVioletRed', 'MediumOrchid', 'BlueViolet', 'SlateBlue', 'RoyalBlue', 'DodgerBlue', 'DarkTurquoise', 'DarkCyan', 'LimeGreen', 'YellowGreen', 'Gold', 'Orange', 'Coral', 'Gray'] %}<style>{% for color in definition.COLORS %}{% if color != 'default' %}[data-color="{{ color }}"] { --primary-color: {{ color }}; }.switch-{{ color }} { background-color: {{ color }}; }    [data-color="{{ color }}"] .variant_switch { background-image: url("{{ T_THEME_PATH }}/images/footer/{{ color }}.png"); }{% endif %}{% endfor %}</style>{% if S_CONTENT_DIRECTION eq 'rtl' %}<link href="{{ T_THEME_PATH }}/bidi.css?assets_version={{ T_ASSETS_VERSION }}" rel="stylesheet">{% endif %}{% if S_PLUPLOAD %}<link href="{{ T_THEME_PATH }}/plupload.css?assets_version={{ T_ASSETS_VERSION }}" rel="stylesheet">{% endif %}{% if S_COOKIE_NOTICE %}<link href="{{ T_ASSETS_PATH }}/cookieconsent/cookieconsent.min.css?assets_version={{ T_ASSETS_VERSION }}" rel="stylesheet">{% endif %}<!--[if lte IE 9]><link href="{{ T_THEME_PATH }}/tweaks.css?assets_version={{ T_ASSETS_VERSION }}" rel="stylesheet"><![endif]-->{% EVENT overall_header_head_append %}{{ definition.STYLESHEETS }}{% EVENT overall_header_stylesheets_after %}</head><body id="phpbb" class="nojs notouch section-{{ SCRIPT_NAME }} {{ S_CONTENT_DIRECTION }} {{ BODY_CLASS }}">{% EVENT overall_header_body_before %}{% INCLUDE 'navbar_header_top.html' %}<div id="wrap" class="wrap"><a id="top" class="top-anchor" accesskey="t"></a><div id="page-header"><div id="particles-js" class="headerbar" role="banner">{% EVENT overall_header_headerbar_before %}<div class="inner"><div id="site-description" class="site-description"><a id="logo" class="logo" href="{% if U_SITE_HOME %}{{ U_SITE_HOME }}{% else %}{{ U_INDEX }}{% endif %}" title="{% if U_SITE_HOME %}{{ L_SITE_HOME }}{% else %}{{ L_INDEX }}{% endif %}"><span class="site_logo"></span></a><h1>{{ SITENAME }}<a class="label label-call" href="https://www.ana4Life.nl/" data-original-title="" title="">4.0</a></h1><p>{{ SITE_DESCRIPTION }}</p><p class="skiplink"><a href="#start_here">{{ lang('SKIP') }}</a></p></div>{% EVENT overall_header_searchbox_before %}{% if S_DISPLAY_SEARCH and not S_IN_SEARCH %}<div id="search-box" class="search-box search-header" role="search"><form action="{{ U_SEARCH }}" method="get" id="search"><fieldset><input name="keywords" id="keywords" type="search" maxlength="128" title="{{ lang('SEARCH_KEYWORDS') }}" class="inputbox search tiny" size="20" value="{{ SEARCH_WORDS }}" placeholder="{{ lang('SEARCH_MINI') }}" /><button class="button button-search" type="submit" title="{{ lang('SEARCH') }}"><i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{{ lang('SEARCH') }}</span></button><a href="{{ U_SEARCH }}" class="button button-search-end" title="{{ lang('SEARCH_ADV') }}"><i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{{ lang('SEARCH_ADV') }}</span></a>{{ S_SEARCH_HIDDEN_FIELDS }}</fieldset></form></div>{% endif %}{% EVENT overall_header_searchbox_after %}</div>{% EVENT overall_header_headerbar_after %}</div>{% EVENT overall_header_navbar_before %}{% INCLUDE 'navbar_header.html' %}</div>{% EVENT overall_header_page_body_before %}<a id="start_here" class="anchor"></a><div id="page-body" class="page-body" role="main">{% if S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) %}<div id="information" class="rules"><div class="inner"><strong>{{ lang('INFORMATION') }}{{ lang('COLON') }}</strong> {{ lang('BOARD_DISABLED') }}</div></div>{% endif %}{% EVENT overall_header_content_before %}
header.png
header image:
_0.jpg

Statistics: Posted by bennybernaer — Wed Jun 04, 2025 8:27 am



Viewing all articles
Browse latest Browse all 2457

Trending Articles