Code: Select all
@media (max-width: 320px) {
.headerbar .header-banner {
display: none;
}
.headerbar #site-description {
display: block !important;
}
.site-description h1, .site-description p {
display: none;
}
.logo {
display: block;
}
.site_logo {
background-image: url("/styles/prosilver/theme/images/mini_site_logo.png");
width: 260px;
height: 60px;
}
}
.site_logo {
background-image: url("http://website-forum.com/images/landscape-mobile.png") ;
background-repeat: no-repeat;
width: 400px;
height: 300px;
margin: 0 auto 0 -15px;
}
Code: Select all
<div class="headerbar" role="banner">
<div class="inner">
<div id="site-description" class="site-description">
<a id="logo" class="logo" href="./index.php" title="Board index"><span class="site_logo"></span></a>
<h1>Estilo</h1>
<p>Style Development & Testing Forum</p>
<p class="skiplink"><a href="#start_here">Skip to content</a></p>
</div>
</div>
<div class="banner-header">
<div style="position:absolute; z-index:-100;">
<h1>Estilo</h1>
<p>Style Development & Testing Forum</p>
<p class="skiplink"><a href="#start_here">Skip to content</a></p>
</div>
<div class="header-banner">
<a href="./index.php" title="Board index"><img class="header-banner" style="width:100%; border-radius:7px; width:1280px;" src="https://s8.postimg.cc/w1faw1k8l/doncaster-banner.png" alt="Board index"></a>
</div>
<div class="header-banner-mobile">
<a href="./index.php" title="Board index"><img class="header-banner-mobile" style="width:100%; border-radius:7px; width:1280px;" src="https://s8.postimg.cc/6qalfhlx1/doncaster-banner-mobile.png" alt="Board index"></a>
</div>
</div>
</div>
headerbanner_background.css
file, found here headerbanner\styles\prosilver\theme
.Code: Select all
.headerbar {
background : transparent;
}
Code: Select all
.headerbar {
padding: 0;
background: none;
}
overall_header_headerbar_after.html
file, found here headerbanner\styles\prosilver\template\event
.Code: Select all
<div class="header-banner">
<a href="{% if U_SITE_HOME %}{{ U_SITE_HOME }}{% else %}{{ U_INDEX }}{% endif %}" title="{% if U_SITE_HOME %}{{ lang('SITE_HOME') }}{% else %}{{ lang('INDEX') }}{% endif %}"><img class="header-banner" style="width:100%; border-radius:{{ HEADERBANNER_CORNER }}px; width:{{ HEADERBANNER_SIZE }}px;" src="{{ HEADERBANNER }}" alt="{{ lang('INDEX') }}"></a>
</div>
</div>
on line 27 down a line. (so line 27 is empty)Code: Select all
<div class="header-banner-mobile">
<a href="{% if U_SITE_HOME %}{{ U_SITE_HOME }}{% else %}{{ U_INDEX }}{% endif %}" title="{% if U_SITE_HOME %}{{ lang('SITE_HOME') }}{% else %}{{ lang('INDEX') }}{% endif %}"><img class="header-banner-mobile" style="width:100%; border-radius:{{ HEADERBANNER_CORNER }}px; width:{{ HEADERBANNER_SIZE }}px;" src="headerbanner/styles/prosilver/mobile-banner/doncaster-banner-mobile.png" alt="{{ lang('INDEX') }}"></a>
</div>
Code: Select all
<div class="header-banner">
<a href="{% if U_SITE_HOME %}{{ U_SITE_HOME }}{% else %}{{ U_INDEX }}{% endif %}" title="{% if U_SITE_HOME %}{{ lang('SITE_HOME') }}{% else %}{{ lang('INDEX') }}{% endif %}"><img class="header-banner" style="width:100%; border-radius:{{ HEADERBANNER_CORNER }}px; width:{{ HEADERBANNER_SIZE }}px;" src="{{ HEADERBANNER }}" alt="{{ lang('INDEX') }}"></a>
</div>
<div class="header-banner-mobile">
<a href="{% if U_SITE_HOME %}{{ U_SITE_HOME }}{% else %}{{ U_INDEX }}{% endif %}" title="{% if U_SITE_HOME %}{{ lang('SITE_HOME') }}{% else %}{{ lang('INDEX') }}{% endif %}"><img class="header-banner-mobile" style="width:100%; border-radius:{{ HEADERBANNER_CORNER }}px; width:{{ HEADERBANNER_SIZE }}px;" src="headerbanner/styles/prosilver/mobile-banner/doncaster-banner-mobile.png" alt="{{ lang('INDEX') }}"></a>
</div>
headerbanner.css
file, found here headerbanner\styles\prosilver\theme
.Code: Select all
.headerbar .header-banner-mobile {
text-align: center;
max-width: 100%;
max-height: 100%;
display: none;
border-radius: 0 !important;
}
@media (max-width: 700px) {
.headerbar .header-banner {
display: none;
}
.headerbar .header-banner-mobile {
display: inline-block;
width: 100% !important;
}
}
overall_header_headerbar_after.html
file.Code: Select all
<div class="header-banner">
<a href="{% if U_SITE_HOME %}{{ U_SITE_HOME }}{% else %}{{ U_INDEX }}{% endif %}" title="{% if U_SITE_HOME %}{{ lang('SITE_HOME') }}{% else %}{{ lang('INDEX') }}{% endif %}"><img class="header-banner" style="width:100%; border-radius:{{ HEADERBANNER_CORNER }}px; width:{{ HEADERBANNER_SIZE }}px;" src="{{ HEADERBANNER }}" alt="{{ lang('INDEX') }}"></a>
</div>
<div class="header-banner-mobile">
<a href="{% if U_SITE_HOME %}{{ U_SITE_HOME }}{% else %}{{ U_INDEX }}{% endif %}" title="{% if U_SITE_HOME %}{{ lang('SITE_HOME') }}{% else %}{{ lang('INDEX') }}{% endif %}"><img class="header-banner-mobile" style="width:100%; border-radius:{{ HEADERBANNER_CORNER }}px; width:{{ HEADERBANNER_SIZE }}px;" src="headerbanner/styles/prosilver/mobile-banner/doncaster-banner-mobile.png" alt="{{ lang('INDEX') }}"></a>
</div>
</div>
{% endif %}