Tessisamess

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

July 2021

S M T W T F S
    123
45678910
11121314151617
18192021222324
25262728293031

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal
Previous | Next

Layout: Characterize


image preview | [info]tess077


Information

Hey guys! This month's layout is a more classic setup, and has a ton of easily edits specs, including all dimensions, padding, and font sizes, so you can truly make this look any way you like. Enjoy! 💖

Layout Coding



Installation Guide

♡ Go to Basics and choose S2 for your style system, then save.
♡ Fill in your Links List if desired, then save.
♡ Go to Look and Feel, choose Complete Style, then save.
♡ Go to Custom Options and choose the following options:
Layout Type: Two Column (Sidebar on Left)
Disable customized comment pages for your journal: Yes
Show Posting Time on Entries: No !IMPORTANT
Show Userpics on Entries: Can choose No if you only want them on the Friends page.
Navigation link names: Recent/Archive/Friends/Profile
Fill in sticky note if desired.
Fill in custom sidebar module with your header:
<a href="http://USER.insanejournal.com/"><h1>Title</h1></a><b>Subtitle</b>
Person to credit if you have an individually created layout: &copy;
URL to link the credit to: https://tessisamess.insanejournal.com/130577.html
Custom stylesheet: Input the CSS provided and save!

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!
Using on DW?

Comments

Sep. 4th, 2020 02:57 pm (UTC)
Already using here! This is lovely!
Sep. 8th, 2020 01:23 pm (UTC)
AW BSC!! Tysm! 💖
Sep. 4th, 2020 03:48 pm (UTC)
This is lovely! I really like that color shade.
Sep. 8th, 2020 01:25 pm (UTC)
Ty ty! Sameee, I need to do more minty and teal demo schemes haha. I do... so much... pink... 😂

Me: Don't do another pink demo
Also me: 👀
Sep. 4th, 2020 07:16 pm (UTC)
Oh I love this!
Sep. 8th, 2020 01:25 pm (UTC)
Tysm!
Sep. 5th, 2020 04:40 am (UTC)
Love this! ♥
Sep. 8th, 2020 01:25 pm (UTC)
💖 Thank you!
Sep. 8th, 2020 09:20 pm (UTC)
I'm new at this, where it says Characterize, where do you go to change that section of the code?
Sep. 11th, 2020 08:45 pm (UTC)
Hey Tess! Just wondering if you might have a quick idea of where to start here. My friend and I have been playing around with this layout she got it to here and I decided to add a splash but now the friends page has some weird stuff happening with how it lines up. Totally cool if you have no idea here but just thought I'd ask in case it was something that might pop out at you quick as to where we went wrong.
Thanks!
Sep. 11th, 2020 09:05 pm (UTC)
Nevermind! I found the culprit. I thought I needed that

/* DELETE THIS SECTION IF USING FOR A COMMUNITY */

#tagpage-header, .entry-linkbar li a[href$=html], .entry-datetime{display:none;}
.lj-view-recent .entry-header, .lj-view-day .entry-header{text-align:center;}
.mid-entry-userpic{display:none!important;}
.lj-view-friends .mid-entry-userpic{display:block!important;}


but did not and it was messing it up!
Oct. 15th, 2020 04:49 am (UTC)
Another gorgeous layout. As with all the others I use for my other boys I made minor changes.
Feb. 21st, 2021 08:50 pm (UTC)
Hey Tess! I was just curious if there was a way to put a wreath around the top pic?
Feb. 22nd, 2021 01:18 am (UTC)
Absolutely! 💖 We'll have to restructure this to get it to work, but here's what to do. First, you want to replace your sidebar coding:
/* SIDEBAR */

#beta{display:flex;align-items:center;justify-content:center;}
#beta-inner{font-size:var(--font4);text-transform:uppercase;color:var(--darkest);padding:0 0 0 calc(var(--top-pic) + 25px);position:relative;}

.module{display:none;padding:0;background:transparent;margin:0;border:none;}
.module-header{display:none;}

.module-customtext{display:block;}
.module-customtext h1{font-family:var(--title-font);font-size:var(--top-title);line-height:0;color:var(--accent)!important;text-transform:none;}
.module-customtext b{letter-spacing:var(--subtitle-spacing);display:block;margin:-30px 0 5px 0;opacity:0.7;}
.module-customtext .module-content{padding:0;}

.module-customtext .wreath-outer{position:absolute;left:0;top:0;}
.module-customtext .wreath-inner{width:var(--top-pic);height:var(--top-pic);position:relative;}

.wreath-inner .icon{position:absolute;width:100%;height:100%;z-index:1;border-radius:var(--top-radius);object-fit:cover;padding:10px;}
.wreath-inner .wreath{position:absolute;width:100%;height:100%;z-index:2;;content:'';display:block;background:url(https://i.imgur.com/wbcbgKe.png)center no-repeat;background-size:100%;}

.module-typelist{display:block;}
.module-typelist ul{list-style:none;margin:0 0 40px 0;padding:0;display:flex;letter-spacing:3px;}
.module-typelist li{margin:0 5px 0 0;}
.module-typelist li a{background:var(--content);border:1px solid var(--borders);padding:2px 4px 2px 7px;}

.module-layoutcredit{display:block;}
.module-layoutcredit{position:fixed;left:10px;bottom:10px;font-size:20px;line-height:1;}
.module-layoutcredit p{padding:0;margin:0;}
After that, you want to add this to your custom text before the title and subtitle (but in the same box) to add the replacement:
<div class="wreath-outer"><div class="wreath-inner">
<img class="icon" src="IMG_URL">
<img class="wreath" src="https://i.imgur.com/wbcbgKe.png">
</div></div>
(I left a wreath in there for you to use for testing, so that can be anything if you have one in mind!) If the image is sitting funky behind the wreath you can change padding:10px; to situate it better. If you'd rather have the image on top of the wreath, swap z-index:1; and z-index:2; to reorder them!
Feb. 22nd, 2021 01:53 am (UTC)
Thank you sooooo much!! I love it! One more question, because I'm needy. When I swapped out the wreath you had in there for a different wreath (I tried a couple different options), all of them came out really small. I had to change the padding to 35px just to get the picture to fit, which clearly made the picture small inside. Did I do something wrong? Or is there a particular size wreath that I should be using?
Feb. 22nd, 2021 02:05 am (UTC)
LOL no problem at all. Sometimes transparent images have a lot of dead space around them, which makes them bigger and less flush than they need to be. If you have an image editing program like GIMP or Photoshop you can crop to content (full disclosure, I use GIMP so that's the program I'm familiar with and I know it has a one-click menu option for doing this.)
Jun. 22nd, 2021 04:09 pm (UTC)
Hi love this! I can't seem to get the header image to work for me (see journal). Each time I try and look in inspect element to see where I would add the img - it just says ::before

Where in the code do I add the header image?