jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2022-10-10 11:29 am
10billionghosts) wrote2022-10-10 11:29 am
Entry tags:
code: ENCIRCLED - a splash nav or header code
HELLO! Here is ENCIRCLED, a nav code that is intended to be used for a splash page, but can still function as a simple in entry post.
Out of the box, ENCIRCLED features a header, 4 links, and a footer in a section labeled OVERLAY LAYER in the code. You can remove any of these items with ease as well as add additional links to suit your needs. Check the very bottom of this post for a few live examples of what you can produce.
CODE HERE:
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly!
❣️ 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!
❣️ The part of the code labeled OVERLAY LAYER can be deleted entirely to remove the header, footer, and links. Each subsection (UPPER LABEL, LINKS, and LOWER LABEL) can also be removed individually if you'd like to remove just one part.
❣️ By default, the code comes with four links, but you can add more by copy pasting the link code into the designated area. I recommend doing this in groups of four if you want to preserve the symmetry of the links.
❣️ BG_URL is the placeholder text that controls the background circle. You can leave this blank if you just want a solid color or you can replace the placeholder text with the URL For an image or seamless texture/pattern. A transparent seamless texture (like one from transparent textures or subtle patterns is going to look best in this spot.
❣️ IMG_URL is the placeholder text for the two portrait images. Make sure you search for and replace that placeholder text with the URLs for whichever images you want to use.
❣️ #URL_HERE is the placeholder text for any of the links. Don't forget to change the anchor word "LINK" to a descriptive word (like BIOSHEET, PLAYLIST, DROPBOX, RULES, etc.).
❣️ Any text !!BETWEEN EXCLAMATION POINTS!! is text for you to customize.
❣️ hex code #a86076 is the default color of the background circle. It is used just once near the top of the code. Change this to change the background circle color.
❣️ hex code #d10846 is the default color for the link backgrounds. Find replace this color with the hex code for the color you'd like the links to be. You can also make each link a different color!
❣️ rgba(0,0,0,0.5) and rgba(0,0,0,0.3) are both black set to different transparencies to create shading that makes the header text a lil more visible. You don't need to futz with these as this should work pretty well regardless of your color scheme, but you can if you want!
❣️ hex code #fff is white, and it is the default color for all text in the code. If you want to change it, be sure to use find-replace to do it as there are a few instances of it.
❣️ 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 my ko-fi.
Out of the box, ENCIRCLED features a header, 4 links, and a footer in a section labeled OVERLAY LAYER in the code. You can remove any of these items with ease as well as add additional links to suit your needs. Check the very bottom of this post for a few live examples of what you can produce.
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly!
❣️ 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!
❣️ The part of the code labeled OVERLAY LAYER can be deleted entirely to remove the header, footer, and links. Each subsection (UPPER LABEL, LINKS, and LOWER LABEL) can also be removed individually if you'd like to remove just one part.
❣️ By default, the code comes with four links, but you can add more by copy pasting the link code into the designated area. I recommend doing this in groups of four if you want to preserve the symmetry of the links.
❣️ BG_URL is the placeholder text that controls the background circle. You can leave this blank if you just want a solid color or you can replace the placeholder text with the URL For an image or seamless texture/pattern. A transparent seamless texture (like one from transparent textures or subtle patterns is going to look best in this spot.
❣️ IMG_URL is the placeholder text for the two portrait images. Make sure you search for and replace that placeholder text with the URLs for whichever images you want to use.
❣️ #URL_HERE is the placeholder text for any of the links. Don't forget to change the anchor word "LINK" to a descriptive word (like BIOSHEET, PLAYLIST, DROPBOX, RULES, etc.).
❣️ Any text !!BETWEEN EXCLAMATION POINTS!! is text for you to customize.
❣️ hex code #a86076 is the default color of the background circle. It is used just once near the top of the code. Change this to change the background circle color.
❣️ hex code #d10846 is the default color for the link backgrounds. Find replace this color with the hex code for the color you'd like the links to be. You can also make each link a different color!
❣️ rgba(0,0,0,0.5) and rgba(0,0,0,0.3) are both black set to different transparencies to create shading that makes the header text a lil more visible. You don't need to futz with these as this should work pretty well regardless of your color scheme, but you can if you want!
❣️ hex code #fff is white, and it is the default color for all text in the code. If you want to change it, be sure to use find-replace to do it as there are a few instances of it.
❣️ 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 my ko-fi.