jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2022-05-06 03:47 pm
10billionghosts) wrote2022-05-06 03:47 pm
Entry tags:
code: TAYNE: STRETCH - a basic information box
✦
say hello to TAYNE STRETCH
✖
Part three of the TAYNE set is TAYNE: STRETCH. This basic info box can be used solo or shuffled into the rest of the TAYNE set. It is set to a minimum height of 313px (which should be changed to 318px for insanejournal users) and rather than generating a scroll bar, will automatically grow in length to accommodate additional text.
You can see how the box scales right here, and look at the bottom of this post for some other examples of how the box looks shuffled together with other pieces of the set.
Otherwise, this is a pretty straightforward little code on its own. You can customize the interior of it fairly easily. Out of the box, it comes with some simple styling for the text and a single horizontal divider bar for your use. It makes a great styled code for wordy information pages like your premise, rules, or FAQ entries.
For the rest of the TAYNE set, be sure to check out the code: set: tayne tag on the journal. I'm releasing bits and bobs from this set one at a time, and will eventually release a few fully styled projects like an RP planner, a bio code, and some other stuff. Once I'm close to complete with releasing bits, pieces, and pre-styled codes for this set, I'll create a hub entry for it.♡
As with all the various and sundry TAYNE components, you need to start with the base outer frame code:
Once you have that squared away, you can insert the TAYNE: STRETCH code in as many times as you'd like:
HOW TO USE:
🧡 Mind those lj-raw tags!!
🧡 This code is mobile compatible and is mostly insanejournal friendly!
🧡 TAYNE: STRETCH can be used solo, stacked one on top of another, or stacked in with existing TAYNE codes. Scroll down to the bottom of this post to see how I willy-nilly stacked a bunch of TAYNE set items together!
🧡 Watch for anything !!surrounded by exclamation points!! like !!HEADER!! or !!LINK!!, this is text that you'll want to customize.
🧡 This code is EXTREMELY PINK out of the box, so remember to run find-replace on all hex codes and rgb values, replacing the default colors with the ones you'd like to use. Lemme outline what the default colors are for you next...
🧡 Hex code #fa53a0 is your primary color. This is the color of the border and faux menu bars.
🧡 rgb(37, 192, 192), aka hex code #25c0c0 is your secondary color, and it is used for all of the window shadows, just with slightly changed opacity.
🧡 Hex code #ff96c7, an even lighter pink, is only used on the field sets (the name/pronouns/etc fields on the horizontal split code) to create a slightly lighter background so that text stands out.
🧡 HEX CODE #fff is white, and it is established both at the very top of the code where it declares the font color for all text in general, and then again on each "menu bar" so that menu bar header text is always white in color.
🧡 Outside of changing the colors and the !!HEADER!! text, you'll likely want to leave the stuff in the menu bar portion of the code alone unless you've got some CSS and HTML experience.
🧡 The scroll bars are styled on this code to be narrow and colorful, but styled scroll bars unfortunately do not work in Chrome. Apologies!
🧡 This code comes with a credit at the bottom by default. Appreciate it if you leave it in, but you can delete if you want! :)
🧡 I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi!
🧡 As more TAYNE codes are released, I will put together a hub page for individual parts of the TAYNE set.
You can see how the box scales right here, and look at the bottom of this post for some other examples of how the box looks shuffled together with other pieces of the set.
Otherwise, this is a pretty straightforward little code on its own. You can customize the interior of it fairly easily. Out of the box, it comes with some simple styling for the text and a single horizontal divider bar for your use. It makes a great styled code for wordy information pages like your premise, rules, or FAQ entries.
For the rest of the TAYNE set, be sure to check out the code: set: tayne tag on the journal. I'm releasing bits and bobs from this set one at a time, and will eventually release a few fully styled projects like an RP planner, a bio code, and some other stuff. Once I'm close to complete with releasing bits, pieces, and pre-styled codes for this set, I'll create a hub entry for it.♡
As with all the various and sundry TAYNE components, you need to start with the base outer frame code:
Once you have that squared away, you can insert the TAYNE: STRETCH code in as many times as you'd like:
HOW TO USE:
🧡 Mind those lj-raw tags!!
🧡 This code is mobile compatible and is mostly insanejournal friendly!
- In order to achieve full insanejournal compatibility simply find any instance of height:313px and change it to height:318px.
🧡 TAYNE: STRETCH can be used solo, stacked one on top of another, or stacked in with existing TAYNE codes. Scroll down to the bottom of this post to see how I willy-nilly stacked a bunch of TAYNE set items together!
🧡 Watch for anything !!surrounded by exclamation points!! like !!HEADER!! or !!LINK!!, this is text that you'll want to customize.
🧡 This code is EXTREMELY PINK out of the box, so remember to run find-replace on all hex codes and rgb values, replacing the default colors with the ones you'd like to use. Lemme outline what the default colors are for you next...
🧡 Hex code #fa53a0 is your primary color. This is the color of the border and faux menu bars.
🧡 rgb(37, 192, 192), aka hex code #25c0c0 is your secondary color, and it is used for all of the window shadows, just with slightly changed opacity.
- To change this color, do a find-replace on 37, 192, 192 with the rgb values for the color you'd like to use. The google color picker (just type "color picker" into the google search bar) will set you up with the RGB value of a color, second row, left side. :)
🧡 Hex code #ff96c7, an even lighter pink, is only used on the field sets (the name/pronouns/etc fields on the horizontal split code) to create a slightly lighter background so that text stands out.
🧡 HEX CODE #fff is white, and it is established both at the very top of the code where it declares the font color for all text in general, and then again on each "menu bar" so that menu bar header text is always white in color.
🧡 Outside of changing the colors and the !!HEADER!! text, you'll likely want to leave the stuff in the menu bar portion of the code alone unless you've got some CSS and HTML experience.
🧡 The scroll bars are styled on this code to be narrow and colorful, but styled scroll bars unfortunately do not work in Chrome. Apologies!
🧡 This code comes with a credit at the bottom by default. Appreciate it if you leave it in, but you can delete if you want! :)
🧡 I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi!
🧡 As more TAYNE codes are released, I will put together a hub page for individual parts of the TAYNE set.
✦
!!header!!
✖
✦
!!header!!
✖
!! your text here! this comes with a pre-styled divider, seen just below this text. Lookie!
see?? you can also keep writing here. Just be sure to mind the lj-raw tags, as usual !!
!!divider header!!
see?? you can also keep writing here. Just be sure to mind the lj-raw tags, as usual !!
✦
!!header!!
✖
!! your content here !!
!! Up there is a simple horizontal divider bar !!
!! Up there is a simple horizontal divider bar !!
✦
yes
✖
!! your content here !!
✦
maybe
✖
!! your content here !!
✦
no
✖
!! your content here!!
✦
!!header!!
✖
!! your content here !!
!! Up there is a simple horizontal divider bar !!
!! Up there is a simple horizontal divider bar !!
✦
!!header!!
✖
!! your content here !!
!! Up there is a simple horizontal divider bar !!
!! Up there is a simple horizontal divider bar !!