Register - Login
Views: 94248088
Main - Memberlist - Active users - Calendar - Wiki - IRC Chat - Online users
Ranks - Rules/FAQ - Stats - Latest Posts - Color Chart - Smilies
08-17-18 02:15:39 PM

Jul - Projects and Creations - I can't make layouts, halp! New poll - New thread - New reply
Next newer thread | Next older thread
Lunaria

Moon Bunny! :3
Level: 132


Posts: 5457/5578
EXP: 26473182
For next: 658751

Since: 07-28-07

Pronouns: she/her
From: pile of fluff

Since last post: 33 days
Last activity: 1 day

Posted on 02-15-18 07:16:37 PM (last edited by Lunaria at 02-15-18 07:33:53 PM) Link | Quote
Silly thread title aside, I was wondering if someone could help me out making a layout. I used to know html and css fairly well, but I don't ever use it so I have kind of forgotten. My current one that I'm using is one that I have actually recycled a couple of times as I changed it and added things to it, but the last time I messed with it was many years ago.

I could probably dive into it and make myself a new layout but I would appreciate if someone could help me. What I want isn't that complex but I simply don't know what standards are used for styling anymore or how to make it work on most browsers out there (I even needed help with that part for my current one). I don't really expect anyone to actually do this for me, but I figured I might as well ask, because I'm kind of sick of my current one in a major way.

Anyway, the layout I had in mind is like this:


Where BG 1 and 2 repeats on both the X and Y axis, though I suppose that would be a bit given? I don't actually need any graphical assets or that sort of work since I can create those things myself. It's just the code part of the layout I can't do.

Optionally I would like the image (purple block) that is selected from the image block to draw a specific one based on what mood avatar is, but I'm honestly not even sure how that could be handled even. (I kinda want my avatar as part of the box rather than where it is currently.)

I also drafted up, an, um, slightly more advanced version that I would sort of prefer but that's a bit more complex and I'm not even sure if I'm allowed to have it anyway? Since it eats up the left side field of my post (where the avatar and junk is located). I just kind of want something a bit cleaner and plain than all that info stuff. Nvm, this seems like it would be a bad idea.
Xkeeper

Level: 244


Posts: 23358/23358
EXP: 227561303
For next: 2625963

Since: 07-03-07

Pronouns: they/them, she/her, etc.

Since last post: 2 days
Last activity: 21 hours

Posted on 02-15-18 07:18:05 PM Link | Quote
Consuming the sidebar for posts is discouraged because there are thread layouts that don't have the sidebar, so your post ends up very wonky.
Lunaria

Moon Bunny! :3
Level: 132


Posts: 5458/5578
EXP: 26473182
For next: 658751

Since: 07-28-07

Pronouns: she/her
From: pile of fluff

Since last post: 33 days
Last activity: 1 day

Posted on 02-15-18 07:22:14 PM Link | Quote
Wait, that's a thing that exists, does anyone use them?
Xkeeper

Level: 244


Posts: 23358/23358
EXP: 227561303
For next: 2625963

Since: 07-03-07

Pronouns: they/them, she/her, etc.

Since last post: 2 days
Last activity: 21 hours

Posted on 02-15-18 07:30:39 PM Link | Quote
The option in the profile edit page notes how many users are selected to use each type. There aren't many, but it's more than zero.
Kak
heh
Level: 72


Posts: 1747/1786
EXP: 3210515
For next: 113247

Since: 09-03-13

From: ???

Since last post: 2 days
Last activity: 8 hours

Posted on 02-15-18 07:57:35 PM Link | Quote
Originally posted by Xkeeper
Consuming the sidebar for posts is discouraged because there are thread layouts that don't have the sidebar, so your post ends up very wonky.
heh, I was one of those guilty of the CSS margin hacks for achieving that

.topbar-[user id] like selectors only in the regular layout would a good solution, since they would allow easy editing of some sidebar features without relying on CSS hacks which are incompatible with other thread layouts


AB 2.5.x does this and it's a pretty nifty feature
RanAS
Member
Level: 38


Posts: 387/448
EXP: 355693
For next: 14754

Since: 10-10-14

From: Brazil

Since last post: 17 days
Last activity: 10 days

Posted on 02-16-18 05:18:15 AM Link | Quote
The corner images and repeating images (the red and green ones) can be implemented using border-image, which can be a bit tricky sometimes. The purple image on the top left corner of the post box is simple enough, though I'm not sure if you want the text to flow below the image or not:

text text text
text text text
text text text
text text text
text text text
text text text
text text text
text text text
text text text
text text text


text text text
text text text
text text text
text text text
text text text
text text text
text text text
text text text
text text text
text text text


The blue centered images are going to require a bit more thinking. border-image doesn't have a no-repeat option, so I'm not sure what should be used instead. Possibilites include tables, "position: absolute;", grids, etc. I'm going to be trying a few different things here to see if I can find something that works well.
Lunaria

Moon Bunny! :3
Level: 132


Posts: 5463/5578
EXP: 26473182
For next: 658751

Since: 07-28-07

Pronouns: she/her
From: pile of fluff

Since last post: 33 days
Last activity: 1 day

Posted on 02-16-18 05:30:50 AM Link | Quote
Oh, um, like in your second example with the text. Thanks for taking the time. 'o'
RanAS
Member
Level: 38


Posts: 388/448
EXP: 355693
For next: 14754

Since: 10-10-14

From: Brazil

Since last post: 17 days
Last activity: 10 days

Posted on 02-16-18 06:58:28 AM Link | Quote

<style>
.lunaria998 {background: #777; /* BG1 */ min-height: 200px; padding: 25px; color: #FFF; font-family: 'Lucida Console', monospace;}
.lunaria999 {
border-style: solid;
border-width: 8px;
border-image: url('data:image/gif;base64,R0lGODlhGAAYAKEDAAAAAO0cJCKxTP///ywAAAAAGAAYAAACQIxvoqvoHxiDNMpW38UZbdE5X+ht5DFCH8C27Le6LbzJMy3ZL87oAN/TARe+oaJoUiVPKeaS1IQ+Q1HqtFM9FAAAOw==') 8;
/* the border-image website will generate the values for the properties above */
background: #222; /* BG2 */
display: flex;
}
.lunaria1000 {
margin: -8px; /* always needs to match the border-width above, except it's negative */
padding: 8px; /* always needs to match the border-width above */
background:
url('data:image/gif;base64,R0lGODlhEAAIAIABAD9IzP///yH5BAEKAAEALAAAAAAQAAgAAAIKhI+py+0Po5ysAAA7') center 0 no-repeat, /* top image */
url('data:image/gif;base64,R0lGODlhCAAQAIABAMzGP////yH5BAEKAAEALAAAAAAIABAAAAIKhI+py+0Po5ysAAA7') 100% no-repeat, /* right image */
url('data:image/gif;base64,R0lGODlhEAAIAIABAD9IzP///yH5BAEKAAEALAAAAAAQAAgAAAIKhI+py+0Po5ysAAA7') center 100% no-repeat, /* bottom image */
url('data:image/gif;base64,R0lGODlhCAAQAIABAMzGP////yH5BAEKAAEALAAAAAAIABAAAAIKhI+py+0Po5ysAAA7') 0 no-repeat; /* left image */
flex: 1;
}
.lunaria1001 {background: url('https://i.imgur.com/vGYfWuts.jpg') 5px 5px no-repeat; padding: 7px 5px 7px 100px; /* this last number has to match the image's width */}
/* extra unecessary CSS below */
.lunaria1001 a {color: #F80; font-weight: normal;} .lunaria1001 a:hover {text-decoration: underline;}
.lunaria1001 hr {border: 0; height: 1px; background: #FFF;}
</style><div class="lunaria998"><div class="lunaria999"><div class="lunaria1000"><div class="lunaria1001">


POST SIGNATURE:
</div></div></div></div>


This code is a bit messy as you can see. It requires 4 divs, I tried merging a few together but I wasn't able to.

The base64 images can be replaced with proper URLs. BG1 and BG2 can also be replaced with URLs. ex.: url('https://i.imgur.com/vGYfWuts.jpg')
Lunaria

Moon Bunny! :3
Level: 132


Posts: 5465/5578
EXP: 26473182
For next: 658751

Since: 07-28-07

Pronouns: she/her
From: pile of fluff

Since last post: 33 days
Last activity: 1 day

Posted on 02-16-18 08:07:33 AM (last edited by Lunaria at 02-16-18 08:10:12 AM) Link | Quote
Mmm, well, this is certainly something, but I think I need to tweak it a bit more. (These are all still, sort of, test images). The centred images don't seem to build onto the frame in the way I was imagining it. :V
Lunaria

Moon Bunny! :3
Level: 132


Posts: 5512/5578
EXP: 26473182
For next: 658751

Since: 07-28-07

Pronouns: she/her
From: pile of fluff

Since last post: 33 days
Last activity: 1 day

Posted on 03-03-18 05:05:36 PM Link | Quote
Oh, I forgot. Thank you so much for making this! I still need to tweak it a bit more and get the images configured that I actually wanted to use. What with, hmmm, all the university work stress and stuff I have atm it was put on the backburner.
Chalcedony

Level: 11


Posts: 9/51
EXP: 5272
For next: 713

Since: 01-19-18

Pronouns: she/they (dual)

Since last post: 26 days
Last activity: 1 day

Posted on 03-04-18 09:17:03 PM Link | Quote
How are these “layouts” being done, anyway? Is this purely via the HTML prefix/suffix stuff in the profile, or is there a separate layout editor which we're not currently aware of? The terminology's a bit inconsistent…
RanAS
Member
Level: 38


Posts: 405/448
EXP: 355693
For next: 14754

Since: 10-10-14

From: Brazil

Since last post: 17 days
Last activity: 10 days

Posted on 03-05-18 07:53:15 AM (last edited by RanAS at 03-05-18 07:53:31 AM) Link | Quote
Originally posted by Chalcedony
How are these “layouts” being done, anyway? Is this purely via the HTML prefix/suffix stuff in the profile, or is there a separate layout editor which we're not currently aware of? The terminology's a bit inconsistent…

You just add HTML/CSS to the "header" and "footer" areas on Edit Profile. That basically wraps the entire post around <div></div> tags and then you can style them using CSS. A dedicated editor could be made, but it's kinda pointless...
Next newer thread | Next older thread
Jul - Projects and Creations - I can't make layouts, halp! New poll - New thread - New reply




Rusted Logic

Acmlmboard - commit 5d36857 [2018-03-03]
©2000-2018 Acmlm, Xkeeper, Inuyasha, et al.

27 database queries, 2 query cache hits.
Query execution time: 0.153739 seconds
Script execution time: 0.021811 seconds
Total render time: 0.175550 seconds
Memory used: 1310720