Merry Draftsmas! Here's code number three, BIG AND. I realized that (a) I had more codes than I thought queued up, and (b) a lot of them are muse/cast lists whoops. So, I'm gonna scoot this one out the door early to break up the never-ending stream of cast list codes.

BIG AND comes in two pre-styled variants -- one intended to be a thread topper (seen above) and one intended to be a splash nav or potentially a very simple game ad (bottom of the post). The thread topper comes with a removable fake LJ-cut by default.

This code, imo, has a lot of customizing potential, and I've gotten into it a little bit in the HOW TO section of this post. I've divided it up into two sections -- the basics, which includes the standard easy customization and some slightly more advanced but still necessary-to-know instructions, and intermediate instructions, which give a rundown of what you can accomplish assuming a bit of HTML and CSS knowledge.

Background image mask is a brush stroke from OnlyGFX. Scroll to the bottom of this post to get a copy of each major version of the code.

HOW TO USE (BASICS):

❣️ Mind those lj-raw tags!!

❣️ This code is mobile compatible and insanejournal friendly!

❣️ All sub-sections of this code (each one marked out with a comment) can be removed without harming any of the others. So, for example, you could use this code with just the top graphical portion and nix the bottom easily, or remove individual parts of the top design.

❣️ There is a fake LJ-cut baked into this code. Be sure to either update any instance of #PAGE_URL_HERE with the URL of the post if you want to use it. If you do not want a fake LJ cut, remove the subsections FAKE LJ CUT PART ONE and FAKE LJ CUT PART TWO.

❣️ This code has two instances of IMG_URL, so don't forget to change those. These are your landscape pictures for the top design, and any picture you put in should scale appropriately.

❣️ The second version of the code (link list) has 6 links by default, but you can easily add more -- preferably in groups of 3, but that's not necessary. Be sure to change both the !!link!! anchor text and the #URL_HERE for each link.

❣️ hex code #2a3a7a is a dark blue used as the font color for the summary text. It appears at the very top of the code, if you'd like to change it.

❣️ hex code #18296b; is a lighter blue used for the stroke around the & and the text header. This is used under the BIG AND and DETAILS sections. It'd be easiest to just run a find-replace to change it.

❣️ hex code #3b59cc is a very light blue that is only used on the when/where/rating part in the middle of the DETAILS subsection. You should only have to change that one instance if changing that color.

❣️ The background brushstroke is, by default, a blue gradient. To change this, under the BACKSPLASH sub-section, change background: linear-gradient(204deg, rgba(89,119,232,1) 0%, rgba(59,89,204,1) 34%, rgba(7,33,129,1) 100%);.

• For a solid color, remove everything from 'linear-gradient' to '100%)' and replace it with a single hex code.


• For a different gradient, I recommend using a CSS gradient generator like cssgradient.io. It'll pop out the CSS you need at the bottom, and you can copy-paste that over what's already in the code.

❣️ This code comes with a credit 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 one of the charities listed on the main draftmas hub post.

HOW TO USE (INTERMEDIATE CUSTOMIZATION):

❣️ IMPORTANT NOTE: if the journal or comm this code will appear in has a link hover effect, it will completely cover the top graphic when someone mouses over it. If this happens in your journal/comm and it bothers you, delete ONLY the FAKE LJ CUT PART ONE section, and be sure to include a link to your post within the summary, as I did in the sample above.

❣️ You can change the ampersand symbol (🙴) to any letter, punctuation, or ALT code symbol, like ❤, ♡, 🟊, 𝄐, etc. You can even put full words/sentences. HOWEVER, you will almost certainly need to futz with the 'font-size' value, and likely the 'line-height' and possibly 'font-family' values as well to get something that looks nice.

❣️ MESSIN' WITH BACKSPLASH (for intermediate-to-advanced users):

• The brush stroke effect in the background of this code is accomplished with image mask coding, and in theory it's super easy to change. Simply go to the BACKSPLASH subsection and replace both instances of this URL 'https://i.imgur.com/9ayUEIj.png' with the URL to a different transparent png.


• You will almost certainly need to mess with '-webkit-mask-size:95%;mask-size:95%;' and possibly '-webkit-mask-position:center;mask-position:center;' if you do this.


• If you plan on changing the backsplash mask's shape, please remember to follow the original creator's terms of use regarding credit and hosting, and do not hotlink from them if they aren't using something like imgur or tumblr to host their image, already.


• When hosting yourself, opt for imgur and do not use pinterest. Pinterest will degrade the quality of the png.

❣️ GETTING DETAILED WITH THE DETAILS SECTION (for advanced users):

• The most important part of the DETAILS sub-section (the part where either the thread summary details or the links go) is that outer div that declares how much space it's allowed to take up. You can delete pretty much anything inside of that div and do what you'd like pretty easily.


• If you do want to do this, the links version of the code has a flex grid built in and the thread topper version of the code does not. That'll probably impact which code you want to use. For example, if you're just putting a large block of text, you should probably use the thread topper version of the code.

GET THE CODES BELOW!

VERSION 1: thread topper

VERSION 2: link list