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!
×

August 2019

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: Signature


preview: sidebar | preview: no sidebar | [info]tess067


Information

Hey guys! This month we've got another ultra compact, mobile-geared layout that echoes Generator-based layouts. I felt the need to do something a little teenier after all that big Mod Bundle stuff, haha. Signature comes with both a sidebar and no-sidebar version, so there's an option for either preference and, as always, this is extremely easy to retheme to fit any aesthetic. If anyone decides to theme this into a more masculine or blocky feel please show me, because I'm dying to see that! (And make sure to hover links in the live demo—they're pretty fun!) Enjoy! ♥

Layout Coding



Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title and subtitle if desired, then save.
♡ Fill in your Links List if desired (Two Column Left only), 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) for sidebar-enabled
Two Column (Sidebar on Right) for no sidebar, credit only
Disable customized comment pages for your journal: Yes
Link text to leave a comment: Comment
Navigation link names: Recent/Archive/Friends/Profile

Fill in sticky note if desired.
Fill in custom sidebar modules if desired. For the demo, I've done a basic image tag for the first custom text and basic text for the second custom text. Easy-peasy!
Person to credit if you have an individually created layout: Tessisamess
URL to link the credit to: http://tessisamess.insanejournal.com/

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!
Auction!

Comments

Feb. 14th, 2019 02:55 pm (UTC)
Oh this is so pretty! I love it!
Feb. 14th, 2019 04:58 pm (UTC)
It's gorgeous and I'm so using it! ♥
Feb. 15th, 2019 02:10 am (UTC)
I really like this a lot!
Mar. 18th, 2019 01:07 am (UTC)
And I am trying it out with some edits on this journal :)
Feb. 15th, 2019 09:01 am (UTC)
So, I broke something, and I'm hoping you can help me figure out a way to do what I'm hoping to accomplish. I'm using an altered version over at [info]alexmanes with the background gradient code from your Fleeting Feelings layout, and... honestly, I know absolutely nothing about how gradient backgrounds work, so I can't troubleshoot this.

It isn't working right, but I've narrowed down exactly what part of my altered coding is breaking it. (By breaking, I mean that the gradient overlay repeats on the page visibly and doesn't provide the scrolling effect.) I don't understand why or how this is making a difference, and unfortunately it's the only way I know how to accomplish the intended aesthetic.

The code that's breaking the gradient is:

#alpha {position: absolute;left: 4vw; width: 62vw;}

Which I'm using to align the #alpha section along the left and control its width to screen width, so that (aside from on the smallest of screen widths), the content section doesn't overlap the 'background' image and doesn't appear a disproportionate size.

Can you please help me figure out either how to make it stop breaking and/or how to achieve the same effect with different code?
Feb. 15th, 2019 09:45 am (UTC)
No need, actually! You were very close to getting what you wanted, but you were overriding the max width and centering coding of #container when it needs to be changed to the new width and margin that you want. I'd remove the custom #alpha positioning you mentioned and change your #container to this:

.layout-two-column-right #container-inner{margin-left:4vw;width:62vw;}

However, if your intention was to keep the header centered on the whole page and not centered above the entries I would do this instead:

.layout-two-column-right #container-inner{} /* leave blank or delete entirely */

And change #alpha to incorporate the positioning and width instead:

#alpha{background:transparent;border:none;padding:0;margin-left:4vw;width:62vw;}

This is super gorgeous btw, ugh!! ♥
Feb. 15th, 2019 10:01 am (UTC)
You're a saint! Thank you so much! ♥ I won't be back at my laptop for a while, but if I manage to break anything else when implementing the fix I'll press the panic button again.

Also, tbh, you kind of just made my day saying it's gorgeous. ♥ I was initially aiming for making it a little masculine like you suggested on the post, then I found the promo poster and that colour scheme was too cool to pass up. One Photoshop mask later and my alterations came to life.

Which, btw? Bless your new variables method of changing layout colours. It's the most amazing and convenient thing ever!
Feb. 15th, 2019 07:19 pm (UTC)
Got it done without breaking anything else! Tweaked the title sizes and comment link sizes a little, but otherwise it's mostly the same just fixed thanks to you. :) I decided to go with the journal title centered on page.
Apr. 12th, 2019 02:27 am (UTC)
Oh my goodness, this edit is so beautiful. GUH. <333 I love it.
Apr. 12th, 2019 02:56 am (UTC)
♥♥♥

Thank you so much!
Feb. 17th, 2019 11:05 pm (UTC)
Hi! So I followed you're steps to import a layout over onto DW (which thank you for that, btw. It was easily and made me less angry about being over there -- pretty layouts, yay!) however, when I use this layout, I can't seem to get the sidebar to show up: here

Is that one of the downsides of DW or did I do something wrong?

Feb. 18th, 2019 08:20 am (UTC)
Looks like you're not using the page setup that has a sidebar enabled! You'll need to switch the Two Column (Sidebar on Left) for the sidebar version of this layout in the Presentation section.
Feb. 24th, 2019 12:31 am (UTC)
LOVE THIS
Feb. 25th, 2019 01:08 am (UTC)
Love it! I'm trying to use it on this journal and can you tell me how to change the color of the header that's in script? In your journal example it reads "signature" I'm just trying to figure out how to make it a color other than pink1
Feb. 25th, 2019 01:23 am (UTC)
Hey, thank you!! ♥ if you want the accent color across the whole layout changed, change #B58682 in the :root but if you want only the title color changed, you'll want to change the color here: #header-text a{color:var(--accent);} (you can change just the variable's title to a different color already in the CSS, or you can change the whole variable to a regular HEX color!)
Feb. 25th, 2019 01:28 am (UTC)
thanks you're the absolute best!
Mar. 15th, 2019 05:53 pm (UTC)
Gonna be using it at this journal, among other things of yours. Thank you, Tess. <333333
Mar. 19th, 2019 10:40 pm (UTC)
Aw, you're welcome!!! ♥♥♥
Mar. 22nd, 2019 05:55 am (UTC)
Hello! I can't figure out exactly how I broke it, but my link list and blurb text seems to be switched as opposed to yours and I'm sure its an obvious fix staring me in the face, but I was hoping you could help me! <3
Mar. 22nd, 2019 06:52 am (UTC)
Hey! You'll just want to swap Links and Custom Text Two in the sidebar dropdown ordering and you should be all set! ♥
Apr. 6th, 2019 01:04 am (UTC)
I love this layout so much! I've used it in a couple different places already but I wanted to show you this one since I used the gorgeous star background that you've been posting with some of the sci-fi month stuff. And I was able to change the colors in the header after reading what you said above so thank you.

http://thatkidcanfly.insanejournal.com/
Apr. 6th, 2019 01:28 am (UTC)
Ooooh that looks SO CUTE with that background!! ♥
Apr. 9th, 2019 10:44 pm (UTC)
This layout is seriously amazing! The only issue I've run into so far is that my seamless background image is HUGE and when I've used the same size as this in another of your s2 Complete layouts, I was able to just put in a 'background-size:25%;' after the url, but that isn't working in this code. Is there some new trick that I've missed out on from not playing with journal codes in so long?

Literally just trying to avoid resizing the image in photoshop lol but thank you for any help or insight you can give!

Apr. 10th, 2019 09:50 pm (UTC)
Sorry I missed this, it looks like you've already resized the image! (Fwiw, though, your previous method should have worked!)
Apr. 10th, 2019 09:53 pm (UTC)
I resized it in imgur, but I'm still confused as to why it wasn't working the way I'd done it before. I noticed that the code was written as "bg-img: url()" rather than spelled out and thought that might play into it, but still couldn't figure out a tweak.

Oh well, the layout is still absolutely stunning!
Apr. 10th, 2019 09:57 pm (UTC)
Hmmm, okay so!

You have, in the :root the replacement values that carry throughout the layout. These are essentially telling the placeholders in the actual layout CSS what to be replaced with. So then we have background:var(--darkest) var(--bg-img); in the body styling, that's saying replace the color and image of the background with the variables that match these names in the :root directory.

So to resize a background image you'd want background:var(--darkest) var(--bg-img);background-size:25%; in the body styling and not the :root directory. OR you could have background:var(--darkest) var(--bg-img);background-size:var(--bg-size); in the body styling and --bg-size: 25%; above in the directory.

I hope that helps for next time!
Apr. 10th, 2019 10:00 pm (UTC)
That is extremely helpful! I don't think I've seen the :root directory used in code before (or at least not that I've noticed/edited for journals) so it was a new (to me) tweak.

Thank you so much, Tess! You're the best! ♥
Apr. 10th, 2019 10:04 pm (UTC)
No problem at all!! ♥ I switched to this method sometime last year and honestly I'll never look back, because it makes editing the layout so much easier once it's posted to use and completely eliminates the need for running 'replace all' before installing. 😍 The faster someone else can edit a layout without it being frustrating or confusing, the happier I am LOL.
Apr. 10th, 2019 10:08 pm (UTC)
Oh, I bet! I'm totally going to comb through the code once I have more of a brain (thanks college, right at the end of a course so mushy brain!) and make sense of it. Because I am going to LOVE not having to run 'replace all' when editing layouts!
May. 15th, 2019 03:19 pm (UTC)
I love this!
Is there a way to add an opacity for the background image? Where would I put it? (I keep breaking things when I try...)
May. 15th, 2019 07:57 pm (UTC)
There isn't, I'm sorry! The lowered opacity in the demo was done to the image itself.
May. 15th, 2019 07:59 pm (UTC)
That's fine!
This is why I kept breaking it!

Thank you for your help <3
May. 29th, 2019 01:03 pm (UTC)
Thank you!
May. 30th, 2019 09:23 pm (UTC)
Hey!!

Using this beautiful layout in this journal and just noticed that it seems to be confusing the eff out of my browser on iPhone 6s (basically, it looks like it’s pulsating as the size of elements and text bounce back and forth between larger and smaller). Any thoughts before I start tinkering with @media to see if I can fix it?
May. 30th, 2019 09:26 pm (UTC)
Eta: in looking at it closer, it appears it may just be the font size in entries increasing and decreasing)
May. 30th, 2019 09:30 pm (UTC)
Oh man that's strange, I have no clue since I don't have an iPhone, I'm sorry! I'd try doing a media query like you were thinking and setting it to a max width of 600px, like so:

@media only screen and (max-width:600px){
/* YOUR ALTERATIONS FOR MOBILE HERE */
}


Just remember to put it at the end of your layout after everything else or it's going to conflict. I hope that fixes it!
May. 30th, 2019 09:43 pm (UTC)
TY. I’m mobile only for the weekend (the only reason I noticed because I usually don’t RP mobile) but will report back as soon as I have a chance to try it!
Jun. 1st, 2019 10:33 pm (UTC)
Hi there! Love your codes, I've been using them for a long time.

I'm trying to install this layout on Dreamwidth, and I've figured out how to get the sidebar to display but I can't figure out how to put an image in the sidebar like it is in the preview. Any help?