Post by greymuzzles on Nov 30, 2023 13:40:35 GMT -8
I’ve been messing around with a tab-based custom page layout on my test forum lately (using template code from Wd3 schools, as I'm still very much learning), and I’m pretty happy with how it’s turning out so far—but I’m also unsure how to make sure the ‘Tab one’, ‘Tab Two’, ‘Tab Three’ button colours always match the theme the viewer is using. Does anyone have any suggestions on how I could achieve this? Ideally, I’d like the colours to match with the theme’s normal button colours (if at all possible!)
You can see the test page here
I have all the code for this stored in the 'html' tab of the custom page, and it's currently as follows:
(Apologies is this is in the wrong board - I wasn't sure where else to put it!)
You can see the test page here
I have all the code for this stored in the 'html' tab of the custom page, and it's currently as follows:
<!DOCTYPE html>
<html>
<center>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}
/* Style the tab */
.tab {
overflow: hidden;
background-color: transparent;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: centre;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
color: inherit;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: inherit;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: inherit;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
}
</style>
</head>
<body>
<p>
<div class="tab">
<button class=" tablinks" onclick="openTab(event, 'Tab1')" id="defaultOpen">Tab One</button>
<button class=" tablinks" onclick="openTab(event, 'Tab2')">Tab Two</button>
<button class=" tablinks" onclick="openTab(event, 'Tab3')">Tab Three</button>
</div>
<div id="Tab1" class=" tabcontent">
<br style="clear: both;" />
<div style="padding-bottom: 10px;">$[zone_1]</div>
<div style="float: left; width: 50%;">
<div style="padding-right: 5px;">$[zone_2]</div>
</div>
<div style="float: left; width: 49.9%;">
<div style="padding-left: 5px;">$[zone_3]</div>
</div>
<br style="clear: both;" />
<div style="padding-top: 10px;">$[zone_4]</div>
</div>
<div id="Tab2" class=" tabcontent">
<br style="clear: both;" />
<div style="padding-bottom: 10px;">$[zone_5]</div>
<div style="float: left; width: 50%;">
<div style="padding-right: 5px;">$[zone_6]</div>
</div>
<div style="float: left; width: 49.9%;">
<div style="padding-left: 5px;">$[zone_7]</div>
</div>
<br style="clear: both;" />
<div style="padding-top: 10px;">$[zone_8]</div>
</div>
<div id="Tab3" class=" tabcontent">
<br style="clear: both;" />
<div style="padding-bottom: 10px;">$[zone_9]</div>
<div style="float: left; width: 50%;">
<div style="padding-right: 5px;">$[zone_10]</div>
</div>
<div style="float: left; width: 49.9%;">
<div style="padding-left: 5px;">$[zone_11]</div>
</div>
<div style="padding-bottom: 60px;"></div>
</div>
<script>
function openTab(evt, TabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName(" tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName(" tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(TabName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</center>
</html>
(Apologies is this is in the wrong board - I wasn't sure where else to put it!)
