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 - a moodboard with nav options!
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!
PENDRAGON is yet another combination mood board/nav code (I know how much everybody loves those) with a more complex version, PENDRAGON EXTENDED, for use as an info page, game ad, or IC/OOC code.
This code consists of a main mood board, and a bottom bar, which comes in several flavors:
Since my brain is sort of a dried out sponge, I had some help from friends putting together examples, and boy do they look fantastic! In the image above, the example mood boards are:
- Howl Pendragon done by me
- 12+15=27 by K atspicecake
- Miss Sharpe by JJ atjuliajoy
- Catra by Manx atthisismanx
- Beam Me Up by Churl atiliekrp
- Wilde by K again!
THANK YOU SO MUCH FOR THE HELP ALL.
There are three variants of this code on this post. You can find each code with a live preview below.
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly!
❣️ This code is completely comment compatible!
❣️ That said, while this code will scale to even narrow layouts, it does look nicest on wider layouts and desktops.
❣️ Want to use this code as a splash page for your journal? Check out Manx's guide to making splash pages on Dreamwidth, or Tess's guide for insanejournal!
❣️ 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 EXTENDED, the ic/ooc, game ad, info page code.
PENDRAGON is yet another combination mood board/nav code (I know how much everybody loves those) with a more complex version, PENDRAGON EXTENDED, for use as an info page, game ad, or IC/OOC code.
This code consists of a main mood board, and a bottom bar, which comes in several flavors:
- BOTTOM: NAV, a nav bar that will scale automatically with however many links you want. One, two, four, eight, twelve -- whatever! I think it looks nicest with 4 - 8 links
- BOTTOM: BAR, a set of 3 rectangles, each of which can be a solid color or images
- BOTTOM: QUOTE, which has been formatted for a bit of quote-style text
Since my brain is sort of a dried out sponge, I had some help from friends putting together examples, and boy do they look fantastic! In the image above, the example mood boards are:
- Howl Pendragon done by me
- 12+15=27 by K at
spicecake- Miss Sharpe by JJ at
juliajoy- Catra by Manx at
thisismanx- Beam Me Up by Churl at
iliekrp- Wilde by K again!
THANK YOU SO MUCH FOR THE HELP ALL.
There are three variants of this code on this post. You can find each code with a live preview below.
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly!
❣️ This code is completely comment compatible!
❣️ That said, while this code will scale to even narrow layouts, it does look nicest on wider layouts and desktops.
❣️ Want to use this code as a splash page for your journal? Check out Manx's guide to making splash pages on Dreamwidth, or Tess's guide for insanejournal!
❣️ 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.
- You can also change the hex code to the word 'transparent'. This is most relevant on the 'BOTTOM: QUOTE' version of the code.
❣️ 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 EXTENDED, the ic/ooc, game ad, info page code.
VERSION 1: NAV
Above moodboard by JJ at juliajoy.
You can have as many or as few links as you'd like in this code. Simply copy paste or delete the a href code. By default, this code comes with 8 links.
juliajoy.You can have as many or as few links as you'd like in this code. Simply copy paste or delete the a href code. By default, this code comes with 8 links.
VERSION 1.5: NAV2
Above moodboard by Churl at iliekrp.
This VERY slight variant on the above nav code allows you to force a certain number of links per line, rather than letting it auto scale. The code is marked off with "TOP LINKS" and "BOTTOM LINKS", and you can fill these in with as many links as you'd like. By default, it's set up with 3x3, 6 links total.
iliekrp.This VERY slight variant on the above nav code allows you to force a certain number of links per line, rather than letting it auto scale. The code is marked off with "TOP LINKS" and "BOTTOM LINKS", and you can fill these in with as many links as you'd like. By default, it's set up with 3x3, 6 links total.
VERSION 2: BAR
Above moodboard design by Lyss at helplyss. THANK YOU LYSS!!
This version features a footer that is just 3 bars that can be either solid color or images, themselves. If you just want a moodboard, no fancy frills, this is the option for you.
helplyss. THANK YOU LYSS!!This version features a footer that is just 3 bars that can be either solid color or images, themselves. If you just want a moodboard, no fancy frills, this is the option for you.
VERSION 3: QUOTE
HOWL PENDRAGON
"Sorry I'm late, I was looking everywhere for you."
This version of the code turns the bottom bar into a space for text, like a quote or a concept line. By default, it is formatted with courier font in a header font size.
Here are some customization notes for this one:
- Change the word 'transparent' to a hex code to make the central bar a solid color
- Change 'IMG_URL BG3' to make the central bar an image
- To customize font, change "font-family:courier, monospace;" to whatever font family you'd like.
- To customize font size, you'll need to mess with the "font-size: clamp();" value. Which is a leetle complicated, and hard to explain. You may just have better luck doing something like font-size:18px instead.
Here are some customization notes for this one:
- Change the word 'transparent' to a hex code to make the central bar a solid color
- Change 'IMG_URL BG3' to make the central bar an image
- To customize font, change "font-family:courier, monospace;" to whatever font family you'd like.
- To customize font size, you'll need to mess with the "font-size: clamp();" value. Which is a leetle complicated, and hard to explain. You may just have better luck doing something like font-size:18px instead.
no subject
no subject
no subject
Lmk, and thank you! ♥
no subject
no subject
I am trying to use your code here. Is there a way for the boxes to sit side by side?
no subject
On the ALBOE NU post, you'll want to use the framework/wrapper code found just below the how to use section. You can then paste the individual cards you'd like to use into the code where indicated, and that should allow them to stack up to 3 across! c:
no subject
no subject
no subject
no subject
no subject