jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2022-03-28 06:05 pm
10billionghosts) wrote2022-03-28 06:05 pm
code: PENDRAGON EXTENDED - a mood board info page code
Hello lovelies! Apologies for the prolonged absence. February and March tend to be hard months for me to be creative in, and I've been juggling an exhausting new work project on top. Still, I've been cooking away at some projects this whole time. Here's one of them!
This is PENDRAGON EXTENDED, a mood board with an added bottom module so that it can be used as an info page, IC/OOC, or game ad. As the name implies, it is an extension of PENDRAGON, which is just a mood board.
PENDRAGON EXTENDED comes in two flavors: one without nav links and one with. There are two live previews below and the code for each can be found within the live preview!
My thanks to all of my friends who not only beta tested Pendragon for me but put together sample boards for it when I couldn't squeeze any out of my brain.thisismanx provided the Evangelion/Kaiju live sample below.
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly!
❣️ That said, while this code will scale to even narrow layouts, it does look nicest on wider layouts and desktops.
❣️ By default, the header is set to overflow:hidden;, which clips off any text that would spill over (such as the leg of a lower case 'p'), and text-transform:uppercase;, which forces all text to be upper case. Simply find these in the code and remove either one of them if you would like to remove those features.
❣️ Watch for anything !!surrounded by exclamation points!! like !!HEADER!! or !!LINK!!, this is text that you'll want to customize.
❣️ As per usual, #URL_HERE should be corrected to the URL you'd like to use for a given link.
❣️ On this image board, since there's a LOT of space to add images, IMG_URL 1 through IMG_URL 6 and IMG_URL BG1 through IMG_URL BG4 are used to try and make assigning images a little easier.
❣️ hex code #31487a is your base color (dark blue), it is used by default on the header bar and the two smaller footer rectangles.
❣️ hex code #327be6 is your secondary color (bright blue), which is used by default for the color of link backgrounds and the font color in the quote code.
❣️ hex code #fff is white, and is the font color for links and the header.
❣️ By default, all images are set to background-size:cover (meaning they will automatically resize) and positioned to the center both vertically and horizontally. Because this is an itty bitty mood board, you may have to futz with this to get some images to look right.
❣️ 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!
❣️ Don't forget to also check out PENDRAGON, the base mood board code.
This is PENDRAGON EXTENDED, a mood board with an added bottom module so that it can be used as an info page, IC/OOC, or game ad. As the name implies, it is an extension of PENDRAGON, which is just a mood board.
PENDRAGON EXTENDED comes in two flavors: one without nav links and one with. There are two live previews below and the code for each can be found within the live preview!
My thanks to all of my friends who not only beta tested Pendragon for me but put together sample boards for it when I couldn't squeeze any out of my brain.
thisismanx provided the Evangelion/Kaiju live sample below.HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly!
❣️ That said, while this code will scale to even narrow layouts, it does look nicest on wider layouts and desktops.
❣️ By default, the header is set to overflow:hidden;, which clips off any text that would spill over (such as the leg of a lower case 'p'), and text-transform:uppercase;, which forces all text to be upper case. Simply find these in the code and remove either one of them if you would like to remove those features.
❣️ Watch for anything !!surrounded by exclamation points!! like !!HEADER!! or !!LINK!!, this is text that you'll want to customize.
❣️ As per usual, #URL_HERE should be corrected to the URL you'd like to use for a given link.
❣️ On this image board, since there's a LOT of space to add images, IMG_URL 1 through IMG_URL 6 and IMG_URL BG1 through IMG_URL BG4 are used to try and make assigning images a little easier.
- IMG_URL 1 - 6 cover the main moodboard images, and they go by column, top to bottom, left to right. So, 1, 2, and 3 are the first column of images, 4 and 5 are second column, and 6 is the far right image.
- IMG_URL BG1 is the header, while IMG_URL BG2 - 4 cover the bottom spaces, when applicable. Sometimes there will only be IMG_URL BG 1, 2, and 3.
- If you would rather have solid colors instead of images, just leave IMG_URL intact, do not change it out for a URL, and instead change the hex code directly to the left of it.
❣️ hex code #31487a is your base color (dark blue), it is used by default on the header bar and the two smaller footer rectangles.
❣️ hex code #327be6 is your secondary color (bright blue), which is used by default for the color of link backgrounds and the font color in the quote code.
❣️ hex code #fff is white, and is the font color for links and the header.
❣️ By default, all images are set to background-size:cover (meaning they will automatically resize) and positioned to the center both vertically and horizontally. Because this is an itty bitty mood board, you may have to futz with this to get some images to look right.
❣️ 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!
❣️ Don't forget to also check out PENDRAGON, the base mood board code.
VERSION 1: PENDRAGON EXTENDED
CLASH OF THE TITANS
Big thanks to Manx at thisismanx for styling this sample for me!
Pendragon Extended is intended for use as an info page or ic/ooc code, but is mainly just the Pendragon mood board with a section added to the end that lets you add some nicely formatted bodies of text.
Out-the-box the extension part (this part) is pretty bare bones, but is good for large bodies of text. It comes with styled text and a simple styled header for delineating subsections. If you're feeling like digging in, most of my codes' sub-elements (for example, some of the subsections in '98, like the cast list code and app code subsections) are pretty interchangeable, and should work if carefully copy pasted and tweaked slightly. If you're having issues, I am willing to do a bit of troubleshooting in the comments here, but it may take me a few days to get back to you.
Alrighty! Let's get on with it!
HERE IS THE CODE:
thisismanx for styling this sample for me!Pendragon Extended is intended for use as an info page or ic/ooc code, but is mainly just the Pendragon mood board with a section added to the end that lets you add some nicely formatted bodies of text.
Out-the-box the extension part (this part) is pretty bare bones, but is good for large bodies of text. It comes with styled text and a simple styled header for delineating subsections. If you're feeling like digging in, most of my codes' sub-elements (for example, some of the subsections in '98, like the cast list code and app code subsections) are pretty interchangeable, and should work if carefully copy pasted and tweaked slightly. If you're having issues, I am willing to do a bit of troubleshooting in the comments here, but it may take me a few days to get back to you.
HEADER TEXT
Alrighty! Let's get on with it!
HERE IS THE CODE:
VERSION 2: GAME AD
This version of Pendragon Extended utilizes the navigation version of the mood board to provide a set of links right up at the top. It's ideal for using with posts that have a lot of comment headers in the post itself, like IC/OOCs for example. You could also potentially use this as a code for a game ad in an ad comm, but it maaay be a little overkill. IDK. U be the judge.
Anyway, here's the code:
Anyway, here's the code: