Stardew Valley Theme
Instructions
download this theme here.
tab navigation
this theme comes with 8 preconfigured navigation buttons. 7 of them replaces the content in this main window, and the last one opens a new link. the tooltip text appears inside the attribute data-tooltip and can be changed to whatever you want.
if you want a button to open a link to a different page, remove the onclick attribute. then wrap the image inside the button with your desired link. search Exit Game inside index.html to see an example of this.
if you want a button to open a 'tab' (aka switch out the contents of this window) it needs to have onclick="openTab(event,'tab')". tab corresponds to the div id of the tab content. see next section for more details.
tab content
the content for this whole page appears in same .html page, using vanilla javascript to control what tab appears active. the content for each tab appears inside a div with the class content. so for example, the contents of this "inventory" tab appears inside <div id="inventory" class="content">...</div>. the div id must be unique and match the second argument of the openTab function mentioned above. for example, the button for the "inventory" tab has the attribute onclick="openTab(event,'inventory')". the inventory argument tells the page to display the div that has the id inventory when the button is clicked.
changing the number of buttons and tabs
the height of the image inside the tab button is 48px on desktop and 36px on mobile. if you want to change the image in the buttons, you can find lots of 48x48px Stardew Valley icons on the Stardew Valley wiki.
if you don't need all 8 buttons, you can delete the button or hide it. the "collection" tab is currently hidden to give an example of this. search collection inside index.html and you can see that style="display: none;" has been added to "collection" button.
to add more buttons, add:
<button class="btn menu__tab" data-tooltip="tooltip here">
<img src="assets/link to image here" class="menu__img" alt="alt text for image here" />
</button>
inside <div class="menu__tabs__container">...</div>. don't forget to add either onclick="openTab(event,'tab')" inside the button tag to add a new tab or wrap the image with a link to open a new link. if you're adding a new tab, add:
<div id="tab" class="content" style="display: none;">
<p>some content here</p>
</div>
inside <div class="main">...</div>
Credit
this theme is modified from the codepen Stardew Valley Inventory by jsemedo. the main font is Stardew Valley by RRDome. the h1 level font is Stardew Valley ALL CAPS by Eliot Truelove. the h2 and h3 level font is SVBoldHu by kroszki.
Socials
socials tab