Sep. 17th, 2018
Layout: Intersectional
image preview: left sidebar | image preview: right sidebar |
![[info]](http://www.insanejournal.com/img/userinfo.gif){kind=small}
tess058Information
Hey guys, it's time for another layout remake! This time around I'm remaking Cerchio, an S1 Generator layout from 2014! I remember being really proud at the time because I'd gotten some pretty sketch stuff to work, haha. This time around things are more fluid, there's more padding on elements, and there are two sidebar options: One to center-align it like in the original, and one to bottom align it. This layout also features more link capabilities than the last, and you can put as much or little in your sidebar blurb as you like! Enjoy! ♥Layout Coding
Installation Guide
♡ Go to Basics and choose S2 for your style system, fill in your title, 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) for a center-aligned sidebar♡ Disable customized comment pages for your journal: Yes
Two column (sidebar on right) for a bottom-aligned sidebar
♡ Fill in sticky note if desired. Check below for a custom span class for this journal's sticky and/or entry for block links as shown in the demo!
♡ Fill in custom sidebar module if desired. This is your sidebar title and subtitle/blurb.
♡ Person to credit if you have an individually created layout: ©
♡ URL to link the credit to: http://tessisamess.insanejournal.com/
♡ Custom stylesheet: Input the CSS provided and save!
Custom Block Links
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!
Comments
Just one thing - as the previous commenter says, there's a thing with the Broadcast font. For me it shows up but it takes maybe 5 seconds or more, before that it just shows as Times New Roman. It's the Dropbox link that is a bit slow (there's a thing at the bottom of the page saying "waiting for dl.dropbox.com), so I just wanted to check in and see if you have any idea if it's something on the coding end or if it's my computer that's slow?
Unfortunately, that's just a hazard of hosting on Dropbox. :\ IJ is super finicky about where it allows outside files from, but I know there are other options for importing a font URL; I'm just not sure what to recommend since my backup would be to just store it on my web host, yk?
(If you need to look at the code in question to answer this, just view source on the journal I'm commenting from btw.)
.lj-view-friends .mid-entry-userpic{display:initial;float:l
Any idea why the sidebar is so much thicker than normal? I was hoping the Nav Links would fix both problems, but no such luck.
For that, I'd check the customtext box your content is in and remove any hard returns (enter key) that don't need to be there. Those boxes are super finicky about that, so unwanted whitespace is usually that.
body:background:var(--light-accent);To this:
background:var(--light-accent) url(BG_URL)center repeat fixed;And you should be all set!
noembedin their entry on your friends page? I can't see the issue on your current friends page since the entries are locked, so is there any way you could view source on the page that's got the issue and copy the contents for me? Email or pastebin is fine!I wish I had an actual fix for you, I'm sorry! Maybe toss up a note in OOC and ask people to give their codes a quick double check before posting since they're causing unintended effects on people's ability to read through posts?
One tiny issue -- I tried using this on Dreamwidth and the 4th circle on the sidebar (the little "i") links to the tags page instead of the profile page. I have no idea what I'm doing but I think it's this line in the code:
.module-viewlinks li:nth-of-type(4) a{background:var(--dark) url(https://i.imgur.com/EubFs7h.png)cenWhen I changed the 4 to 6 it linked to the profile but moved the circle to the right by two spaces. I checked your post on how to use IJ layouts on Dreamwidth and couldn't see a solution. Help??
.module-viewlinks{position:absolute;top:.module-viewlinks ul{list-style:none;margin:0;padding:0;di
.module-viewlinks li{margin-right:9px;}
.module-viewlinks li a{display:block;width:40px;height:40px;l
.module-viewlinks li:nth-of-type(1) a{background:var(--dark) url(https://i.imgur.com/T9zbBoB.png)cen
.module-viewlinks li:nth-of-type(2) a{background:var(--dark) url(https://i.imgur.com/729usXf.png)cen
.module-viewlinks li:nth-of-type(3) a{background:var(--dark) url(https://i.imgur.com/lHVzejZ.png)cen
.module-viewlinks li:nth-of-type(6) a{background:var(--dark) url(https://i.imgur.com/EubFs7h.png)cen
.module-viewlinks li:nth-of-type(4), .module-viewlinks li:nth-of-type(5){display:none;}
.module-viewlinks li a:hover{opacity:1;background-size:20px;}
Thanks so much for taking the time to help me, I stuck the modified code in and it works perfectly (of course!!). You're a star! ♥
And actually, while I'm here, that really cool gradient effect on one of your other layouts (which I've tweaked colour wise over on
Thanks in advance!
bodyyou'd just want to replace the current background styling inbodywithin the layout, so for this one you'd be replacing thebackground:var(--light-accent);spec inbody.Most of my layouts don't have
htmlspecified, so you can just put that above the body styling on any layout when using these. If a layout of mine does have this spec already, I always put it right abovebody.Image Background (large):
body{background:#555 url(IMG_URL)center fixed;background-size:cover;}Image Background (repeating):
body{background:#555 url(IMG_URL)center fixed;}Gradient Background:
body{background:linear-gradient(to bottom,#555,#000);min-height:100vh;}Gradient & Image Background (for transparent images):
html{background:linear-gradient(to bottom,#555,#000);}body{background:url(IMG_URL)center fixed;min-height:100vh;}
(Change color values as needed!)