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

November 2020

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
2930     

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

DW Code Push Info

Intro

Hey guys! Link me wonky codes effected by the DW code push here (or via email!) and I'll see if I can start a comprehensive list of issues—and ideally how to fix them. 💖

Issue: Content sizing

The issue: The new push has implemented box-sizing:border-box; on all site elements, which is a method I also use in my layouts; you'll find that it's going to make elements smaller than desired in some codes.

The fix: When this happens, add: box-sizing:content-box; to the effected element. What the spec in the code push is doing is saying, "subtract the padding and/or border from the container's width/height declaration" rather than "add them in addition to," which ends up shrinking the size. This makes calculating how a layout's elements fit together MUCH easier because you aren't needing to account for padding and borders, but it IS going to make some entry codes wonky.

How it works: If an icon's styling is width:70px;padding:10px;border:1px solid; the icon without box-sizing:border-box; is going to have a width of 92px (the width, plus the padding on each side, plus the border on each side.) With box-sizing:border-box; it will be 70px wide regardless, subtracting those measurements from the base width rather than adding them on.

Issue: Unwanted Table Backgrounds

The issue: The table tag has a default background color of #fff now. It's also adding border-bottom:1px solid #ddd to the table tag. Additionally, table tr:nth-of-type(even) has a default background color of #eaeaea now (this is every other table row.)

This issue only occurs on some tables due to whether or not your table has a background color declared already; if it does, it will override the base style. This does not apply to codes styled purely with divs, which is another reason the error may look inconsistent. If a code doesn't use tables, it will not be effected by this.

The fix: If your table code is displaying unintended backgrounds, I would add style="background:transparent!important;" to both table and each tr to counteract it (or add a set background color if preferred.)

Note: I'd also like to add that, when pasting the same advertisement code linked into an entry and posting it, it stripped the intended background color from the table rows that had them. Using bgcolor="color" no longer works in entries for table elements and it will need to be formatted as inline styling with style="background:color;" instead.

DW base table styling This may be incomplete, but here's what I was able to compile while inspecting some of the affected tables.

Issue: TBD

Coming soon!

Edited Codes

Using on DW?

Comments

Jul. 30th, 2020 10:25 am (UTC)
Thank you for your help, Tess, oh my gosh.

Something that I noticed since the code push: Tables coming out with a bright, almost painful, white background to them but not all of them. As shown in the linked example, some advertisements are showing off a white background when they originally did not but some advertisements managed to dodge this change.
Jul. 30th, 2020 07:11 pm (UTC)
Absolutely!! I'll try and fix as many as I can that are sent my way. 💖

The issue: the table tag has a default background color of #fff now. It's also adding border-bottom:1px solid #ddd to the table tag. Additionally, table tr:nth-of-type(even) has a default background color of #eaeaea now (this is every other table row.)

This issue only occurs on some tables due to whether or not your table has a background color declared already; if it does, it will override the base style.

This does not apply to codes styled purely with divs, which is another reason the error may look inconsistent. If a code doesn't use tables, it will not be effected by this. [While I'm always the first to press for divs over tables, this aspect of the code push is... Well. I don't agree with it, we'll say that. In my opinion, these style declarations should have been prefaced with specifying class declarations or pseudo selectors to exclude the innermost div of entry and comment content, but instead they seem to apply to the base HTML tag(s) as a whole. An odd move for a site that knows its users display custom content coding in their entries and comments. No tea no shade.]

The fix: If your table code is displaying unintended backgrounds, I would add style="background:transparent!important;" to both table and each tr to counteract it (or add a set background color if preferred.)

Note: I'd also like to add that, when pasting the same advertisement code linked into an entry and posting it, it stripped the intended background color from the table rows that had them. Using bgcolor="color" no longer works in entries for table elements and it will need to be formatted as inline styling with style="background:color;" instead.
Jul. 30th, 2020 07:15 pm (UTC)
Quick addition! I added this issue and fix to the entry above, and included the DW base table styling for reference!
Aug. 1st, 2020 03:34 am (UTC)
Aug. 2nd, 2020 09:32 pm (UTC)
😂 Happy to help!
Aug. 3rd, 2020 01:36 am (UTC)
thank you for explaining all of this; i have so much of my own code to go back in and try to fix, and it's been really disheartening and frustrating.

http://tessisamess.insanejournal.com/44851.html - this one cuts off the white/actual content part of the display on DW; the only way I was able to get around it was by messing with the height of the character entry div, but I'd love to know if there's a better way to do it.
Aug. 3rd, 2020 02:07 am (UTC)
Yeah, I can't imagine, dude. Just the amount of work some of you have ahead of you, I know the feeling and it sends me right into "shut down about it" mode, especially if I'm not sure where to start/how to fix the issue. I really hope this helps make it less daunting! 💖

As for this code, it's definitely the first issue listed, since this is an older code of mine from before I started using flex and I'd use padding to push content to a specific area of a container. I've updated the original code to work with DW without needing editing for future usage (as well as updated the whole install page in general to the new format lmao.) Here's the change I made:

Cast & Locations: height:93px;padding-top:157px; becomes height:250px;display:flex;flex-direction:column;justify-content:flex-end;

Single Block: padding-top:157px; becomes height:250px;display:flex;flex-direction:column;justify-content:flex-end;
Aug. 3rd, 2020 02:09 am (UTC)
Yeah, I've definitely hit the "lol screw it, let it stay broken" point a couple of times, lol. This is very appreciated, truly.

And thank you for that! I def was only messing with heights and I expect that to make things screwy, so I'll apply this instead ♥
Aug. 16th, 2020 05:55 pm (UTC)
Omg thank you so much for this! I think I have an issue with the cut ids?
They all work like links, as if I set them as "display:none" but I actually want the arrow-thingie to open the content in the post like a spoiler rather than send them to the post...?

https://deerna.dreamwidth.org/ here's the journal in question.
Aug. 16th, 2020 08:43 pm (UTC)
Okay, this one might actually be out of my control. :C I poked around and compared the cut with the missing feature to a different account where they were still working, as well as check my DW, where the same issue is present (I definitely used to have the expansion arrows on mine.) I think they may have removed the feature from non-DW core layouts, so anything from the S2 core over here might not have them anymore. I couldn't tell you if this was meant to be implemented, or if it was an unintended side effect of something else.

I'm really sorry I couldn't help you! 😩 If I find any additional information, I'll absolutely let you know.
Aug. 21st, 2020 09:53 pm (UTC)
oh what a pity!! thank you so much for looking into it
Aug. 21st, 2020 09:55 pm (UTC)
* sorry, it cut off in a weird way for some reason djkfgh

thank you so much for looking into it, i hope it's not the case bc it would be annoying. oh well. i'll keep using the layout because it's too pretty not to (i love all your work SO MUCH) i hope it gets fixed in some update or something!

thanks again for your help!
Aug. 16th, 2020 08:24 pm (UTC)
hey! I was using one of your codes as a game history here.

As you can see the display feature is totally borked, if you could help please!
Aug. 16th, 2020 09:49 pm (UTC)
Hey! This is definitely a box sizing issue. I'll get you a fix for it and update the code post ASAP. 💖
Aug. 17th, 2020 09:58 pm (UTC)
I've updated the original post! Since your cast list is a larger code and the restructuring of this code was a little more involved I didn't want you to have to run the updates through the whole thing yourself, so I did that as well. Is there a good email to send this over to you? You can PM it over if you'd rather it be private!
Aug. 18th, 2020 02:15 pm (UTC)
ah thank you so much! I'll PM you with my e-mail.
Oct. 22nd, 2020 04:40 pm (UTC)
Hello again! Much appreciation in advance for your time here. I have a question regarding the
[Error: Irreparable invalid markup ('<h*r>') in entry. Owner must fix manually. Raw contents below.]

Hello again! Much appreciation in advance for your time here. I have a question regarding the <h*r> (sans *, obviously) tags; I have some of these in codes on DW of various sizes and colors, aaand the styling seems to be borked and I've tried everything and cannot figure out why and I'm hoping you may have an answer for me as to why in the heck?

For example: <h*r color="000000" width="100%" /> isn't showing up as anything other than a default HR tag, when it used to show up as a black line at a certain width.
Oct. 22nd, 2020 06:05 pm (UTC)
No problem at all!! It looks like DW's updates are going to need you to style via inline CSS from now on. Using the following works for me, so you should be able to replace any reverted horizontal rules with this and edit as needed!

<hr style="border:none;border-bottom:1px solid #000;width:100%;margin:10px 0;">
Nov. 9th, 2020 03:53 pm (UTC)
I know this isn't your code, Tess, but could you help me?

Checked this profile out on a whim and I'm super shocked at how much was changed due to the code update. If I turn off Beta Testing it looks okay but that will go away this year, I think, and I'll be stuck with this. :<

I'm trying to figure out what's causing this and I'm honestly a bit stumped? Is the text/background-shadow overpowering the font's color? I'm also puzzled by the gradient just being gone since others' gradient code come out untouched.
Nov. 9th, 2020 06:30 pm (UTC)
Okay, so this one actually needed extensive editing due to DW's new code push onto table styling. I've stripped the table formatting and redone it with div-based inline styling, and converted you from floats to flex. This will definitely break the character limit though, so could I get a good email for you?

(Basically, using tables now on DW means your font styling is going to be overpowered by the site's table styling, unless you put it into every td tag and add !important to it. Which no one wants to do lmao, so if you're using table-based codes going forward this unfortunately means either having to do that or reformat to table-less.)
Nov. 9th, 2020 10:41 pm (UTC)
!!!!

Oh my goooosh- Thank you so much, Tess. You're a lifesaver since I was having legit dreams trying to figure out what was happening with the code. I've sent my e-mail via PM but if you need me to comment here, I can do that too. :'>