Custom Header Logo

Make header background responsive - Custom Header Logo

Make header background responsive

by mastnacek » Fri Nov 23, 2018 9:11 am

Hello
i like this extension and i use it in forum and experiment with responsive on mobile devices.

Can somebody help me testing and modifiing code?

Big Thanks


This is my code in /ext/dmzx/chl/styles/prosilver/template/event/overall_header_stylesheets_after.html
<!-- IF SITE_BG_IMG -->
<style type="text/css">
<!--
.headerbar {
background:url("{SITE_BG_IMG}") no-repeat;
display: block;
position: center;
width: 100%;
height: auto;
background-position: center bottom;
background-size: 100%;
}

-->
</style>
<!-- ENDIF -->

Original is
<!-- IF SITE_BG_IMG -->
<style type="text/css">
<!--
.headerbar {background:url("{SITE_BG_IMG}") repeat;}
-->
</style>
<!-- ENDIF -->
mastnacek
Registered User
Posts: 83
Joined: Thu Oct 25, 2018 6:43 am
Contact:

Re: Make header background responsive

by mastnacek » Tue Nov 27, 2018 4:58 am

I've modified the code yet. We added a set of responsive.css there. Because the extension inserted a header image into the mobile gateway. A narrow stripe that made no sense.
Now, with a small screen resolution, the background is not displayed, just the name and description of the pages.

<!-- IF SITE_BG_IMG -->
<style type="text/css">
<!--
.headerbar {background:url("{SITE_BG_IMG}") no-repeat;

/*display: block;
position: center;*/
width: auto;
/*background-size: 99%; */
border-radius: 12px 12px 12px 12px

}


@media (max-width: 320px) {
.headerbar {
background:none;
background-image:none}

h1 {
/* Forum name */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.4em;
text-align: inherit;
vertical-align: middle;

float: none;
margin: 0px;
display: block;
}
.site-description h1 {
text-align: left;
float: none;
margin: 0px;
/*line-height: 1.1em; */
overflow: hidden;
text-overflow: ellipsis;
display: block;
}

.site-description p {
font-size: 1em;
text-align: left;
float: none;
margin: 0px;
/*line-height: 1.1em; */
overflow: hidden;
text-overflow: ellipsis;
display: block;
padding-bottom: 0.5em;
color: #000000;
}
}


@media (max-width: 350px) {
.headerbar {
background:none;
background-image:none}

h1 {
/* Forum name */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.4em;
text-align: inherit;
vertical-align: middle;

float: none;
margin: 0px;
display: block;
}
.site-description h1 {
text-align: left;
float: none;
margin: 0px;
/*line-height: 1.1em; */
overflow: hidden;
text-overflow: ellipsis;
display: block;
}

.site-description p {
font-size: 1em;
text-align: left;
float: none;
margin: 0px;
/*line-height: 1.1em; */
overflow: hidden;
text-overflow: ellipsis;
display: block;
padding-bottom: 0.5em;
color: #000000;
}
}

@media (max-width: 430px) {
.headerbar {
background:none;
background-image:none}

h1 {
/* Forum name */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.4em;
text-align: inherit;
vertical-align: middle;

float: none;
margin: 0px;
display: block;
}
.site-description h1 {
text-align: left;
float: none;
margin: 0px;
/*line-height: 1.1em; */
overflow: hidden;
text-overflow: ellipsis;
display: block;
}

.site-description p {
font-size: 1em;
text-align: left;
float: none;
margin: 0px;
/*line-height: 1.1em; */
overflow: hidden;
text-overflow: ellipsis;
display: block;
padding-bottom: 0.5em;
color: #000000;
}
}


@media (max-width: 500px) {
.headerbar {
background:none;
background-image:none}

h1 {
/* Forum name */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.4em;
text-align: inherit;
vertical-align: middle;

float: none;
margin: 0px;
display: block;
}
.site-description h1 {
text-align: left;
float: none;
margin: 0px;
/*line-height: 1.1em; */
overflow: hidden;
text-overflow: ellipsis;
display: block;
}

.site-description p {
font-size: 1em;
text-align: left;
float: none;
margin: 0px;
/*line-height: 1.1em; */
overflow: hidden;
text-overflow: ellipsis;
display: block;
padding-bottom: 0.5em;
color: #000000;
}
}

@media (max-width: 550px) {
.headerbar {
/*background:url("/images/chl_backgrounds/ukrajina550.jpg") repeat; */
background:none;
background-image:none
/* height:86px; */
/* background-size: cover; */
}

h1 {
/* Forum name */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.4em;
text-align: inherit;
vertical-align: middle;

float: none;
margin: 0px;
display: block;
}
.site-description h1 {
text-align: left;
float: none;
margin: 0px;
/*line-height: 1.1em; */
overflow: hidden;
text-overflow: ellipsis;
display: block;
}

.site-description p {
font-size: 1em;
text-align: left;
float: none;
margin: 0px;
/*line-height: 1.1em; */
overflow: hidden;
text-overflow: ellipsis;
display: block;
padding-bottom: 0.5em;
color: #000000;
}
}

@media (max-width: 700px) {
.headerbar {
background:none;
background-image:none
/* height:109px; */
/* background-size: cover; */
}

h1 {
/* Forum name */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.4em;
text-align: inherit;
vertical-align: middle;

float: none;
margin: 0px;
display: block;
}
.site-description h1 {
text-align: left;
float: none;
margin: 0px;
/*line-height: 1.1em; */
overflow: hidden;
text-overflow: ellipsis;
display: block;
}

.site-description p {
font-size: 1em;
text-align: left;
float: none;
margin: 0px;
/*line-height: 1.1em; */
overflow: hidden;
text-overflow: ellipsis;
display: block;
padding-bottom: 0.5em;
color: #000000;
}
}

-->
</style>
<!-- ENDIF -->
mastnacek
Registered User
Posts: 83
Joined: Thu Oct 25, 2018 6:43 am
Contact: