𝔦𝔱'𝔰-𝔞 𝔪𝔢 🌠 (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
lina_trinch) wrote in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png)
killthecake2024-02-26 01:19 pm
lina_trinch) wrote in killthecake2024-02-26 01:19 pm
Entry tags:
[54] Window Tabs
Tabs on Top Code:
Tabs on Side Code:
❖ This is a code released early on the Patreon to my subscribers! So feel free to check out things over there if you want early codes or some exclusive content. ❖ Both of the codes above are the same, except one has the tabs on top and the other has them on the side. The boxes have adjusted widths accordingly. ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ About adding more tabs/pages: You can add as many of these as you want. You just have to pair up the anchor links. The code for the tabs will start off with href="#one". The #one part is the anchor. Further in the code, where the first page starts, you'll see a similar looking link code that starts with name="one". You can change the word "one" to anything else, so long as it's not a numerical character or a symbol. Only one page per tab, too. If you have any questions, just let me know. Three tabs/pages has been added by default in both codes. ❖ If you want to turn this into a cr chart or something and need more tabs than one row/column provides, let me know! I should be able to finagle a way for you to have as many links/pages as you want without everything looking smooshed. ❖ Tab - The name of each tab. ❖ Header - The header text. The one on the first page is in italics while the second and third page has the text without italics. Just copy/paste whatever you prefer. ❖ IMAGE_URL - Put the URL of your desired image here. There are four different styles of images (tall on the left, tall on the right, wide on the left, wide on the right). Each style is labelled and set in the first page for you to copy/paste at your convenience. ❖ Lorem - Placeholder text. Please add a p tag around your paragraphs like in the example. #fff Page backgrounds. #444 Image shadows. #000 Text color. #F4F4F2 First tab background and first page's border. #E8E8E8 Second tab background and second page's border. #BBBFCA Third tab background and third page's border. |
no subject
Aesthetically, to make it look the way you want, yes, that's possible. Functionally, it might be a different story.
What this can do is create more pages within pages. If you're wanting it to jump to certain parts of the same page, I'm afraid we can't do that. Anchor links is the trick to making this appear like there are multiple pages, when everything is really on one surface but hidden behind different div elements, hence the fake links making them appear.
All that being said, if you're wanting this to just be more pages within pages, yes, again, we can do that. However, it would be a whole new code. This would need reworking completely to make that work, and it'd honestly be easier to just do it from scratch. The problem is how the "pages" work. I mentioned that they're hidden behind different div elements, and that's done by having everything at a certain size. Putting a viewport within a viewport would make this really finnicky, I think. Like pages only appearing halfway down and stuff like that. It's not impossible at all. Just that it's easier to make a new one instead of edit this one and deal with the hours of troubleshooting.
How about this? Give me a couple of weeks and I'll have a brand new code to give you. If you want it in this same style, I can do that. But it's going to take me a lot of time and I really only have my weekends to fool around with coding these days. You can get it fresh off the press for free, I'll release it on my patreon later, and release it to everyone for free in a couple of months.
small disclaimer: I have trouble with these types of codes sometimes. It's entirely possible you can find someone else to fix this to the way you want it very quickly and easily. You have my full permission to shop around and have them edit it, if you wanna take that route.
no subject
Like I said, there's absolutely no rush, and I appreciate you offering to work this out for me!! I look forward to seeing the code when it's ready (and this has also certainly reminded me that I need to add you to my slowly growing little patreon list as well).
ty ty ty !!!!!
no subject
But yeah, let me know how you like it. As you can probably tell, I used the code above as a skeleton and remade the whole thing backwards, which was kind of a whole mess, but anyway! Point is, the design right now is similar to that. If you want it to look a certain way, let me know. Otherwise, I'm just going to design it however I like. (I'm feeling circles for this...)
And of course, if you see a bug while poking at it, let me know.
no subject
No sign of bugs when I was poking at it, and I don't have any particular design thoughts, so I will defer to your infinite wisdom in this matter.
Thank you SO much, and I look forward to the final results!
no subject
I've since tweaked the code. I ended up not changing much of the design aside from fixing sizes to be uniform and changing the header/dividers to be more neutral. I figured that something like this is already so massive and meant to be more functional than anything else, that I would leave it as a blank canvas for others to color and style as they like.
But yeah! Re-did some things, added pictures, fixed some mistakes I saw in the code, and tried to just overall make it more streamline. How do you like it?
no subject