Roman ivanov
asked 5 years ago

How do I insert a banner in the place where the red line is drawn? http://prntscr.com/5htvs5

3 Answers
Allen
answered 5 years ago

Hello 😀 To insert a banner to theme Focus as you want 

First: you open file header.php –> find line 140,below the </header> , add this code

<div class="topbanner">
<div class="container">
<div class="fixedbanner">
<a href="BANNERLINK" target="_blank"><img src="IMAGELINK"/></a>
</div>
</div>
</div>

BANNERLINK is the Link of the page that will contain information about the ad or something you need.
IMAGELINK is the Link of image for your banner.
That will show the banner in where you want , how ever the one thing you have to do is style it to fit the theme( or design a banner with fixed height and width that suite there) :

you can open the file “style.css” and style headerbanner class :

.topbanner {
width: 100%;
display: block;
}
.topbanner .container {
padding-bottom: 10px;
}
.fixedbanner {
overflow: hidden;
height: 120px;
}
Roman ivanov
answered 5 years ago

 Thank you.
I have another question.
i need increase sidebar http://prntscr.com/5idcv7
before you made changes already: 

<style>
@media (min-width: 1110px) {
/* Main */
#main > .container > .row {
background-position: 810px 0;
}

#primary {
width: 750px;
}

.news-slider .carousel {
width: 500px;
height: auto !important;
}

.news-slider .carousel-inner,
.news-slider .carousel .item,
.news-slider .carousel .carousel-inner .hentry {
height: 100%;
}

.news-slider .carousel-list {
width: 250px;
}

#secondary {
width: 250px;
}

#secondary .entry-thumbnail img {
width: 250px;
}

.single .site-content > .post .entry-content {
max-width: 580px;
}
}
.news-slider .carousel .carousel-inner .entry-header { padding-bottom: 40px; }
.single-post .co-author { display: none; }
</style>

<style>
@media (max-width:767px) {
.news-slider { margin-bottom: 220px !important; }
.news-slider .carousel-control { bottom: -210px;}
.news-slider .carousel-nav { bottom: -210px;}
}
.right-sidebar {
background: white;
}
</style>
Custom wp_footer() code:
<script>
var height = jQuery('.news-slider').height();
jQuery('.news-slider .carousel').css('height', height);
</script>
nobita
replied 5 years ago

Hi again 😀 Here is the solution for you 😀
This is the picture of normal DW focus theme , view the picture can help you imagine how the style work 😀

taras lubimow
replied 5 years ago

Thank you )) it helped.

DominicStaff
answered 5 years ago

Please refer the answer of @nobita provided. If you still face there issue, please let us know.
Regards,

Powered by DW Question & Answer Pro