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 2020

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

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 inspected some of the effected 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 ♥