Hiding Channel Tabs by region
Introduction
In order to allow channels to be published to multiple regions we can use CSS to hide tabs or a-side elements based on regions. This allows you to publish one channel page to multiple regions but still control what appears in each.
Instructions
To hide a tab you will need is the tab's ID number (referred to as 'kid' in our HTML).
- Using Chrome, right-click on the tab you wish to apply the CSS to and click 'Inspect'. Find the kid number for your tabs - when hovering over the line relevant to your tab, it will be highlighted in blue on the webpage.
Warning
IT'S IMPORTANT TO BEAR IN MIND THE 'kid' NUMBER IN THE CSS IS RELEVANT TO THE TAB If we tried to apply the number in this example to other channel pages it would have no impact.
-
Make a note of the number and go to the channel edit screen.
-
Under the 'Style' tab we can add one or more of the below CSS lines of code to the 'Custom CSS' (see below).
- Click save on your channel page and the tab will be hidden on the region you've entered CSS for.
Example CSS
/*TO HIDE ON UK*/
body.domain-live-titan-uk-pantheon-io li[kid="3417"]
{ display:none; }
/*TO HIDE ON US*/
body.domain-assettv-us li[kid="3417"]
{ display:none; }
/*TO HIDE ON EUROPE*/
body.domain-europe-asset-tv li[kid="3417"]
{ display:none; }
/*TO HIDE ON ASIA*/
body.domain-asia-asset-tv li[kid="3417"]
{ display:none; }
/*TO HIDE ON CANADA*/
body.domain-assettv-ca li[kid="3417"]
{ display:none; }
/*TO HIDE ON HEDGE TV*/
body.domain-hedgetv-com li[kid="3417"]
{ display:none; }
/*TO HIDE ON SOUTH AFRICA*/
body.domain-assettv-co-za li[kid="3417"]
{ display:none; }
/*TO HIDE ON FINTECH TV*/
body.domain-www-fintech-tv-com li[kid="3417"]
{ display:none; }
Warning
Remember to update the css with your 'kid' number THE 'kid' NUMBER IN THE CSS IS RELEVANT TO THE TAB. If we tried to apply the number in this example to other channel pages it would have no impact.