Heya!! I was wondering if there was a way to add a third tab each to the muse page tabs on the theme viper?? I’d just like to add a couple blurbs about different verses to each muse
First off, thank you so incredibly much for making use of the Viper theme, it’s extremely humbling to see people taking a liking to it! Second, I very sincerely hope that you don’t mind that I answer this question publicly, but I’d just like to be able to reference people to this little tutorial in the future, in the event that they’re curious about the same thing. It’s actually relatively easy to add a third tab (or however many), and only a small challenge if you want to resize 3 tabs to all sit on the same row. There’s a few steps to this:
1. First up, adding the extra ‘button’ of the tab. You have to do a search for the muse page in question, ie.:
<!– MUSE PAGE: MUSE 1 –>
Numerous lines beneath it, you should see the following; these are the default two tabs:
Tab one title
Tab two title
To add a third, you simply need to add extra
s in there, like so:
Tab one title
Tab two title
Tab three title
2. Next up is to add the correlating page, this is about as simple as the other, you just need to pay good attention to placement. From where you were/left off at the previous step, scroll down until you’ve passed the content for both of the tabs in that page and reach the bottom of that specific muse popup page. You should see something like the following:
Simply put, you replace that bit with this:
Type your content here.
The two lines that I bolded should always be in, except if this extra tab is a navigation-type tab. If it is, replace the first and second lines I bolded with the following two respectively and add your links in between:
Optional 3. In essence, that’s it! Now, if you opt for an uneven number of tabs, you’ll notice that one sits beneath the other two in a bit of a messy fashion. If you want all three on the same line, there’s one more step to do, which is to change the width of the tab buttons. To do so, do a search for:
ul#tabs li {
And also:
ul#tabs li.active {
And roughly halfway down in both of those divs, you’ll see ‘width’ and ‘max-width’, both set to 251px by default. This needs to be decreased, I just messed with it a little and 167px seems to be the sweet spot. Make sure to change both the ‘width’ and ‘max-width’ under both divs, otherwise the tab buttons will not resize properly.
I hope that this was was helpful enough to get it to work for you. If not, feel free to message again in asks or IMs and I’ll be more than happy to help out more directly. <3
