How to add html code in white space of songwriter theme?

Hi,

please search for the following code in “header.php” that originally outputs the header search form:

<?php if ( get_theme_mod('songwriter_display_search_form', songwriter_default_options('songwriter_display_search_form')) != 'Hide' && !is_page_template('template-landing-page.php') ) { ?>
<?php get_search_form(); ?>
<?php } ?>

and replace it with your banner code, for example by something like this (it is important to include the class=”custom-header-banner” to be able to style the banner through CSS):

<div class="custom-header-banner"><img src="https://url-address-of-your-banner-image" alt="" /></div>

Then put this custom CSS into “Appearance > Customize > SongWriter General Settings > Custom CSS” to move the banner to the right side:

.custom-header-banner {display: block; margin: 0; position: absolute; top: 30px; right: 0;}
@media screen and (max-width: 1012px) {#wrapper .header-content .custom-header-banner {position: relative; top: 0; right: 0; margin: 20px 0 0; max-width: 100%; float: left;}}

To put some code in the spaces between post entries on the homepage, please open the file “content-archives.php” and insert the requested code just at the end of it.

Best regards,
Tomas Toman

Hi Tomas,

It does not worked perfect for me. actually i want to put adsense code here, The ads are showing on below the website logo but i want to show the ads banner on top right side of white space. You can see it on my website.please suggest me how can i move it to the top-right.

Hi,

if possible, please post here the code that you have put into “header.php”. It seems that the AdSense banner is outputted outside the <div class="custom-header-banner"> element. The AdSense code has to be placed inside this element in order to make it work as I described.

Or you can try to move the banner itself through CSS:

.header-content .adsbygoogle {display: block !important; margin: 0; position: absolute; top: 30px; right: 0;}
@media screen and (max-width: 1012px) {#wrapper .header-content .adsbygoogle {position: relative; top: 0; right: 0; margin: 20px 0 0; max-width: 100%; float: left;}}

Best regards,
Tomas Toman

Hi Tomas,

As per you, i moved the banner through CSS. Now it is displaying but I want to move it to a little right side. How can i do that?

Hi,

please change the value of the right: 0; property on the first line of the above posted CSS to a negative value (with minus), for example: right: -20px;.

Best regards,
Tomas Toman