I’m working with a UK based local newspaper who want the ability to place wrap around advertisements – usually referred to as site skin.
Usually the skin is made up of one single graphic that contains both the left and right columns and the header, leaving a blank area of 1000px wide where the site would sit.
So to facilitate this I need to:
(a) make the whole site container including menu, header etc. 1000px wide and centre the site
(b) drop the whole site down by a number of pixels to allow for the wrap to go above the site
I’ve done this on other sites by selecting the main viewport, e.g. on JNews theme I use :
wrapperDiv = window.parent.document.querySelector(“.jeg_viewport”);
What would be the selector be for the Newspaper theme to be able to change the site width(I’m struggling to find it), or is there another way to do this?
Thanks
Stuart
Hi sncooke,
I I understand correctly, you’ll need a boxed version for the website to display the a background ad, if is so, our theme has some options for this, first, you’ll need to set the background image in the theme panel, then enable the option -> https://i.imgur.com/wc1H9Zl.png now the website width will be 1164 px. If you want to make it smaller, you can try it with a custom css
.td-boxed-layout .td-container-wrap {
width: 1000px;
}
but it is possible to affect some blocks layout.
The code need to be set in the theme panel > custom code> custom css.
I hope this will help you!
Hi Calin
Sorry not getting back sooner re your reply – we had a family bereavement which has put me a little behind on this.
Couple of things…
1) The ad skin will not be a background uploaded via the theme, it’s a bit more complex than that. Advertisements are fed to the site from Google Ad manager and are dynamic, i.e. GAM decides which ads to run based on Header Bidding. GAM will use its own code to inject the relevant ad code in the necessary position, i.e. setting the background to the ad skin.
2) I’ve tried your CSS and it doesn’t seem to work. Background is set to a boxed layout in the Theme Panel – this seems to set the site width to 1116px – not 1164px as you suggest.
I then add your code in the custom code panel, and it makes no difference to the site width – it remains at 1116px. I even changed the measure to 500px just so it was more obvious – but checking with Dev tools and elements on the page are still 1116px wide and are not being constrained to the new width.
Any ideas?
Thanks
Stuart
Hi sncooke,
I understand what you mean.
Can you please provide a link to your website, in this way I will be able to inspect the website structure and recommend the best way to adjust the website width. I think that you want the header and the footer to be boxed.
Thank you!
Hi Calin,
The dev site can be seen here: https://dev.southwarknews.co.uk
I’m trying your theme out on this site.
I have a few other sites using a different theme (JNews) where you should be able to see site advertising skins being placed by Google Ad Manager – though as they are programmatic they do not appear all of the time.
See:
https://cumbriacrack.com – this site has a full width Hero section – but the ad code shrinks the content width when a skin is delivered – the ad code also pushes the header down so that the skin sites above the logo/header
Thanks
Stuart
Hi Calin!
I have the similar issue. Most of the rows in desktop version of my website are 1112 px including padding. I’ve turned boxed layout in the Theme Panel on, but the background (that supposed to be blank area) is full-page width white area and it covers my background ad. However the ad is shown correctly behind the header menu row.
How can I shorten this white area? If it’s possible, i’d like to have a way to manage the width of it in px.
Website: https://fightwave.ru/ . Check the main page please
Hi sncooke,
It looks that the code was not apply because the boxed option from the theme panel was not set enabled -> https://i.imgur.com/S4jMnD6.png -> https://forum.tagdiv.com/background-ads/
Please try this custom css
.td-container, .tdc-row, .tdc-row-composer {
width: 1000px;
}
Or if you want to be apply only for the website content, you can use this one
.tdc-content-wrap .td-container, .tdc-content-wrap .tdc-row, .tdc-content-wrap .tdc-row-composer {
width: 1000px;
}
Also, if you want to stretch the website with, then you can do it using the tagDiv Composer -> https://i.imgur.com/N0kWqCw.png
I hope this will help you!
Hello jjest_jjest,
You can change the website by starching the rows, but if a row is stretched, then the background will be covered.
Now, I think that a custom css will solve this problem -> https://i.imgur.com/LdgJGGO.jpg
.tdb-template .td-main-content-wrap {
width: 1068px;
}
Please set the code in the theme panel > custom code> custom css.
I hope this will help!
Thank you!
Hi Calin!
Thanks! That’s what I needed. But this code also affects the mobile version. Would be very thankful if you fixed the code so that it only changed the desktop version.
Hi jjest_jjest,
I’m glad that the code is working.
If you do not want the code to apply for some viewports, then set it only for those you want to apply -> https://i.imgur.com/o8HArPL.png
Thank you!
hello Calin, I have been following your conversation which is interesting to me. I want to change the theme of my online newspaper, with TagDiv Today News PRO. I currently use Pubblisher by Betterstudio as you can see at this link https://www.gazzettadicaserta.it/ , but I like TagDiv more and it is also faster, then I am very interested in the mobile theme. But I need for the desktop version that Today News PRO is as a publisher, that is 990px of site width, including header, and that header when there is advertising skin is surrounded by advertising. So far with the instructions you gave to the gentleman from before I was fine with the container, but header does not move. Is it possible to have TagDiv as my current site? Thanks
Hello @frank3011 !
We recommend to use cloud/PRO templates in order to have the possibility to edit them with the TagDiv Composer which contains a lot of functions and features, please check our tutorial here: https://forum.tagdiv.com/tagdiv-composer-tutorial/
Documentation here:
– https://forum.tagdiv.com/cloud-library-templates/
– https://forum.tagdiv.com/design-post-pages-using-cloud-library-templates/
– https://forum.tagdiv.com/cloud-library-category-templates/
Check also our video tutorials here: https://www.youtube.com/c/tagdivThemes/videos
Thank you!
