![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
Entry tags:
[03] navigation; tabbed (terminal & folder)
A tabbed navigation template that comes in two different flavors! Use this for whatever the hell you want--navigation, game info, whatever. I mostly just made these templates as a way of proving to myself that I could conquer this hellish HTML challenge and be satisfied with myself. If you do decide to use this template, I'd love to see what you use this for!
INSTRUCTIONS:
→ Depending on how long your labels are, this template can support 5-6 tabs, total. If you want to add more tabs, you can try to make the font size for the tabs smaller.
→ You don't need to have each page show the same tabs. In fact, you can use the tabs like normal links or display new pages, if you so choose (like this code here). If you plan on making additional pages with other tabs, make sure you add a tab that links back to your main page. If you need help configuring this, I will be more than happy to help. To link to a regular link as opposed to one of the tabs, just get rid of the # (hashtag) in the link contents.
→ "Switching" to different tabs is possible because all the elements in the code remain the same height. Overflow is set to auto, which hides anything in the template beyond a certain height. When a tab is clicked, the div "scrolls" down to the appropriate spot. Therefore, in order to resize the height of the template you must VERY CAREFULLY change each reference to height for the FIRST DIV and EVERY PAGE YOU ADD. Make sure the "background/container" box is at least 50 pixels bigger than the contents of each page. If you are having issues with customizing this, feel free to ask me to edit the code for you.
→ On the other hand, editing the width of elements thankfully does not affect the layout too much. Make it as wide as you want.
→ Customize to your heart's content! Just make sure to keep the credit on each page. Keep in mind that this is one of the more complicated templates I've done, and it's miiiight be a little janky in some places.
→ As usual, if you have any questions or troubleshooting issues, please feel free to comment.
→ You don't need to have each page show the same tabs. In fact, you can use the tabs like normal links or display new pages, if you so choose (like this code here). If you plan on making additional pages with other tabs, make sure you add a tab that links back to your main page. If you need help configuring this, I will be more than happy to help. To link to a regular link as opposed to one of the tabs, just get rid of the # (hashtag) in the link contents.
→ "Switching" to different tabs is possible because all the elements in the code remain the same height. Overflow is set to auto, which hides anything in the template beyond a certain height. When a tab is clicked, the div "scrolls" down to the appropriate spot. Therefore, in order to resize the height of the template you must VERY CAREFULLY change each reference to height for the FIRST DIV and EVERY PAGE YOU ADD. Make sure the "background/container" box is at least 50 pixels bigger than the contents of each page. If you are having issues with customizing this, feel free to ask me to edit the code for you.
→ On the other hand, editing the width of elements thankfully does not affect the layout too much. Make it as wide as you want.
→ Customize to your heart's content! Just make sure to keep the credit on each page. Keep in mind that this is one of the more complicated templates I've done, and it's miiiight be a little janky in some places.
→ As usual, if you have any questions or troubleshooting issues, please feel free to comment.
TERMINAL PRESETS:
→ Background gradient:
→ Active Tab/Border Color:
→ Inactive Tab Color:
→ Width/Height:
background: linear-gradient(to bottom, #000000 0%, #006600 100%);→ Active Tab/Border Color:
#32d932→ Inactive Tab Color:
#000000→ Width/Height:
400px, 600pxFOLDER PRESETS:
→ Active Tab/Folder Color:
→ Inactive Tab Color:
→ Paper Background URL:
#d4ceb2→ Inactive Tab Color:
#b0ab94→ Paper Background URL:
https://i.imgur.com/uYGlVgk.png
New Tab (Active Color)
New Tab (Inactive Color)
New Tab (Active Color)
New Tab (Inactive Color)
no subject
I changed the following:
From This:
<div id="HOME PAGE"
style="display: block;
height: 400px;
width: 600px;">
<!--TAB LINK CONTAINER-->
<!--THE LINE BELOW THIS LINE STORES THE ANCHOR TO THE MAIN PAGE. IN THIS CASE, THE ANCHOR IS NAMED "HOME".-->
<a name="HOME"></a>
<div style="display: inline-block; width: 100%; margin-left: 29px;">
To This:
<!--THE LINE BELOW THIS LINE STORES THE ANCHOR TO THE MAIN PAGE. IN THIS CASE, THE ANCHOR IS NAMED "HOME".-->
<a name="HOME"></a>
<div id="HOME PAGE"
style="display: block;
height: 400px;
width: 600px;">
<!--TAB LINK CONTAINER-->
<div style="display: inline-block; width: 100%; margin-left: 29px;">
I also added the following:
<!--DO NOT DELETE THIS CREDIT-->
<a href="https://isopods.dreamwidth.org/2284.html" style="text-decoration: none; color: #32d932; font-family: courier new; font-size: 10px; float: right; padding-right: 8px;">© isopods</a>
</div>
<!--SPACER--><div style="height:4em;"> </div>
<!--MAIN PAGE END-->
<!--INSERT NEW PAGES BELOW THIS LINE-->
no subject