english 2 Share Posted September 29, 2018 Hey guys, I'm creating a new RPG and I would like to have a tabbed table at the top of the forum. If you look here you will see that I already have a space at the top where stuff is (titled Cbox & Newest Threads), I would like to replace it with a table similar or equal to something like the table in the attachment. It would be nice if someone could go in there and code it for me or walk me through how to do it myself or just something. I'm not a very good at coding and I just don't want to mess anything up. Please help. Thanks in advance! 2 Hey! Link to comment Share on other sites More sharing options...
c.widow 123 Share Posted September 30, 2018 @english I've put together a little simple code for you to play with, you'll need to edit the CSS to your preferences but this should be a good start for you. 🙂 CSS /* The holder for tabs! */ #tabbar { width: 100%; padding: 0; margin: 0; background: grey; } /* The tab links! */ .tabitem { display: inline-block; padding: 10px 20px; color: white; text-transform: uppercase; } /* Tab contents! */ .tab { background: white; border: 1px solid rgba(0,0,0,0.3); border-top: 0px; padding: 10px; } HTML <!-- START: TAB ITEMS BAR --> <div id="tabbar"> <div class="tabitem" onclick="tab('tab1')">Tab One</div> <div class="tabitem" onclick="tab('tab2')">Tab Two</div> <div class="tabitem" onclick="tab('tab3')">Tab Three</div> <div class="tabitem" onclick="tab('tab4')">Tab Four</div> </div> <!-- END: TAB ITEMS BAR --> <!-- START: TAB CONTENTS --> <div id="tab1" class="tab"> 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis magna, eu fringilla quam. Praesent feugiat tristique ornare. Nunc efficitur orci at quam commodo tincidunt. Duis cursus eros vel odio dictum, eget scelerisque felis rutrum. Nam ac sem eget quam eleifend hendrerit quis ut massa. Aenean maximus ante ut neque fringilla, ut iaculis est dapibus. Maecenas ut lorem maximus, imperdiet ex et, semper dui. </div> <div id="tab2" class="tab" style="display: none;"> 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis magna, eu fringilla quam. Praesent feugiat tristique ornare. Nunc efficitur orci at quam commodo tincidunt. Duis cursus eros vel odio dictum, eget scelerisque felis rutrum. Nam ac sem eget quam eleifend hendrerit quis ut massa. Aenean maximus ante ut neque fringilla, ut iaculis est dapibus. Maecenas ut lorem maximus, imperdiet ex et, semper dui. </div> <div id="tab3" class="tab" style="display: none;"> 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis magna, eu fringilla quam. Praesent feugiat tristique ornare. Nunc efficitur orci at quam commodo tincidunt. Duis cursus eros vel odio dictum, eget scelerisque felis rutrum. Nam ac sem eget quam eleifend hendrerit quis ut massa. Aenean maximus ante ut neque fringilla, ut iaculis est dapibus. Maecenas ut lorem maximus, imperdiet ex et, semper dui. </div> <div id="tab4" class="tab" style="display: none;"> 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis magna, eu fringilla quam. Praesent feugiat tristique ornare. Nunc efficitur orci at quam commodo tincidunt. Duis cursus eros vel odio dictum, eget scelerisque felis rutrum. Nam ac sem eget quam eleifend hendrerit quis ut massa. Aenean maximus ante ut neque fringilla, ut iaculis est dapibus. Maecenas ut lorem maximus, imperdiet ex et, semper dui. </div> <!-- END: TAB CONTENTS --> JavaScript (place this in your Ungrouped Templates --> headerinclude) <script> function tab(tabid) { var i; var x = document.getElementsByClassName("tab"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } document.getElementById(tabid).style.display = "block"; } </script> Link to comment Share on other sites More sharing options...
english 2 Author Share Posted September 30, 2018 Thank you so much!!! Hey! Link to comment Share on other sites More sharing options...
Kit the Human 757 Share Posted October 1, 2018 Hey @english in case you missed it, we have a codex on the Initiative. There are already two tabbed codes for your use, one with javascript and one without. There's even a welcome box (and another!) Be sure to check out the codex for any additional coding needs you might have! As a further heads up, check out the updated version of Dreaming of a Killer. I've fixed an issue that you're having with the guest view Please yell if you need any further help! PSI: an Occult Investigations RP Roleplay Architects: Grab a friend (or many friends!) and just write. You can also find me at: Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now