Register - Login
Views: 95768433
Main - Memberlist - Active users - Calendar - Wiki - IRC Chat - Online users
Ranks - Rules/FAQ - Stats - Latest Posts - Color Chart - Smilies
11-15-18 02:28:57 PM

Jul - Meta - post layouts? New poll - New thread - Thread closed
Pages: 1 2Next newer thread | Next older thread
Xkeeper

Level: 250


Posts: 22878/24691
EXP: 250041848
For next: 487163

Since: 07-03-07

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

Since last post: 20 hours
Last activity: 13 hours

Posted on 01-19-18 01:38:44 PM (last edited by Xkeeper at 01-19-18 05:45:26 PM) Link
To anybody reading this: the OP deleted all of their posts in this thread for some reason, sorry. This was a thread about how post layouts worked here. Other posts are left for posterity.





"Post header" and "Signature" fields in your profile edit page control that. You can use (most) HTML there.

Play with it some and observe the results on your profile page! Just note that all of it is already inside the html/body/table/tr/td from the board itself, so you'll probably want to use a simple <div>. (If you're crafty, you can also use CSS, but you'll have to strip out newlines or host it offsite on HTTPS somewhere...)

E: For example, here's my header and footer, respectively. These totally broke the tables oops


(no longer needed)
Sanqui
1760
🦉
Level: 78


Posts: 1630/1761
EXP: 4214442
For next: 167784

Since: 12-20-09

Pronouns: any
From: Czechia (NEW!)

Since last post: 3 days
Last activity: 4 min.

Posted on 01-19-18 01:45:50 PM (last edited by Sanqui at 01-19-18 01:46:01 PM) Link
A good thing to note here is that the board automatically replaces all newlines with <br>, even in a <style> tag. So either avoid them entirely, or a trick I've used is to stick /* and */ around each newline, turning it into a CSS comment.
Xkeeper

Level: 250


Posts: 22880/24691
EXP: 250041848
For next: 487163

Since: 07-03-07

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

Since last post: 20 hours
Last activity: 13 hours

Posted on 01-19-18 01:49:29 PM Link
Originally posted by Sanqui
A good thing to note here is that the board automatically replaces all newlines with <br>, even in a <style> tag. So either avoid them entirely, or a trick I've used is to stick /* and */ around each newline, turning it into a CSS comment.

There should probably be a way to fix that, honestly. I've been thinking that it might be a good idea to add in a new field for CSS (instead of stuffing it into headers), and then we can just show that at the top of each page, once; and not convert it.

I know we did something to fix that with tables, though? Because they would cause a ton of newlines if you didn't smoosh all the tags together, I thought.

test message please ignore


I just, amusingly, can't find where that lives in the code. But I'm also not checking very hard at the moment. (Something similar would probably need to be done for ul/ol/li and friends, too. Bah. Maybe a "raw HTML" pseudotag like Dreamwidth has.)
RanAS
Member
Level: 40


Posts: 309/498
EXP: 430005
For next: 11304

Since: 10-10-14

From: Brazil

Since last post: 12 hours
Last activity: 3 hours

Posted on 01-19-18 02:36:42 PM Link
Originally posted by maple
hmmm ok i think i'm getting the hang of it

but i feel like there could be a bit more documentation? like what the forum uses in things like blockquotes so you know to expect those in your css or something...

This is all the CSS that the website applies to posts by default (I think):


<style> body {font-size: 13px; font-family: Verdana; color: #FFFFFF;}
.fonts {font-size: 10px; font-family: Verdana;} .blockquote {margin: 1em 40px 1em 40px;}
a {color: #BEBAFE; text-decoration: none; font-weight: bold;} a:visited {color: #9990C0;}</style>



And this is the HTML for the sample posts:


Sample text.
<blockquote>
<font class="fonts"><i>Originally posted by fhqwhgads</i></font>
<hr>
A sample quote, with a <a href="about:blank">link</a>, for testing your layout.
<hr>
</blockquote>
This is how your post will appear.
<br>
<blockquote>
<hr>
<code>
Code test.
</code>
<hr>
</blockquote>



I generally use this website here to test out post layouts without having to edit my profile every time, but there are many other websites for previewing HTML code.

Originally posted by maple
as for hosting css elsewhere does it absolutely need to be https or can it be http? how would i do that, is <link> supported rather than <style>?

I believe it needs to be HTTPS in order to load properly, but I'm not sure. You don't need to use <link>, you can use <style> @import url('URLGOESHERE'); </style>
Xkeeper

Level: 250


Posts: 22882/24691
EXP: 250041848
For next: 487163

Since: 07-03-07

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

Since last post: 20 hours
Last activity: 13 hours

Posted on 01-19-18 03:20:39 PM Link
The "preferred" way to use CSS is using @import instead of <link> (just because one is async), but that might have changed over the last 13 years.

HTTPS is required for it to work if you browse Jul over HTTPS (which is generally the default, but you can browse insecurely if you want; it works either way)
Kak
heh
Level: 73


Posts: 1645/1815
EXP: 3369884
For next: 115984

Since: 09-03-13

From: ???

Since last post: 8 days
Last activity: 20 hours

Posted on 01-19-18 03:25:49 PM Link
Originally posted by Xkeeper
There should probably be a way to fix that, honestly. I've been thinking that it might be a good idea to add in a new field for CSS (instead of stuffing it into headers), and then we can just show that at the top of each page, once; and not convert it.
That would be kinda interesting. Being able to cleanly separate the CSS from the rest also means you could show the multi line CSS directly in the profile page without being forced to navigate through the page source. Would have saved a lot of hassle for 2014 me, heh.

Though I guess implementing it would also require to save separately old versions of the CSS and the header.


Of course, the easy correct alternative would be "just don't convert newlines in the header and screw over plain text headers as a bonus". It's just one less sbr() in the edit profile page

*Kak runs
Xkeeper

Level: 250


Posts: 22884/24691
EXP: 250041848
For next: 487163

Since: 07-03-07

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

Since last post: 20 hours
Last activity: 13 hours

Posted on 01-19-18 03:28:05 PM Link
I think it might've fallen out of use but it's apparently still alive and well. One of its original properties back in the day was that the page would still load and display as normal, it would just re-style the content once the file downloaded. <link> on the other hand would wait until the CSS finished downloading until rendering the rest of the content — this could get real bad if someone's CSS went down (in which case every time they posted it'd delay rendering even more...)

For some reason, your layout is mostly invisible. I don't see any issues with the code, but the border does not appear properly in Chromium here. Hmm...
Xkeeper

Level: 250


Posts: 22885/24691
EXP: 250041848
For next: 487163

Since: 07-03-07

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

Since last post: 20 hours
Last activity: 13 hours

Posted on 01-19-18 03:30:28 PM (last edited by Xkeeper at 01-19-18 03:31:31 PM) Link
Originally posted by Kak
Originally posted by Xkeeper
There should probably be a way to fix that, honestly. I've been thinking that it might be a good idea to add in a new field for CSS (instead of stuffing it into headers), and then we can just show that at the top of each page, once; and not convert it.
That would be kinda interesting. Being able to cleanly separate the CSS from the rest also means you could show the multi line CSS directly in the profile page without being forced to navigate through the page source. Would have saved a lot of hassle for 2014 me, heh.

Though I guess implementing it would also require to save separately old versions of the CSS and the header.


Of course, the easy correct alternative would be "just don't convert newlines in the header and screw over plain text headers as a bonus". It's just one less sbr() in the edit profile page

*Kak runs

The problem with that is you have to also do that for editing posts, and you're introducing an inconsistency for users who expect to be able to use normal signatures that are mostly-text, of which quite a few people still do!

Saving different versions isn't actually that complicated as it is — the board stores every header and signature already by checking for a unique version. (Though this could probably be optimized so that they're only stored once used one time, instead of being looked up every time you post. But at the same time we have to be sure that you aren't just editing your layout repeatedly without posting, which would save a new version each time. Ah, decisions.)


E: Saving styles separately would also mean that &tags& would stop working, but I don't know if that's an issue worth caring about since you shouldn't be using those in CSS anyway. Unless you're being really weird and styling your entire layout per-post (which is even worse...)
Xkeeper

Level: 250


Posts: 22886/24691
EXP: 250041848
For next: 487163

Since: 07-03-07

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

Since last post: 20 hours
Last activity: 13 hours

Posted on 01-19-18 03:40:04 PM Link
The first thing I checked was MDN and supposedly it's supported there (and the example even works), so now I'm really confused.
Xkeeper

Level: 250


Posts: 22887/24691
EXP: 250041848
For next: 487163

Since: 07-03-07

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

Since last post: 20 hours
Last activity: 13 hours

Posted on 01-19-18 03:42:00 PM Link
Of course:

Though the specification requires that border-style must be present if border-image is used, some browsers may not implement this.


This is the case. I can get it to sort of show up if I manually insert a border: 30px solid; rule (but obviously that isn't quite correct in this case); I guess Chrome just requires this but Firefox doesn't.
Xkeeper

Level: 250


Posts: 22888/24691
EXP: 250041848
For next: 487163

Since: 07-03-07

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

Since last post: 20 hours
Last activity: 13 hours

Posted on 01-19-18 03:51:19 PM (last edited by Xkeeper at 01-19-18 03:51:41 PM) Link
ah, continually shitty software, or css for short. i love the web

FUN RETRO FACT: back in my day we would have made that layout using tables
Xkeeper

Level: 250


Posts: 22891/24691
EXP: 250041848
For next: 487163

Since: 07-03-07

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

Since last post: 20 hours
Last activity: 13 hours

Posted on 01-19-18 03:57:57 PM Link




If you can somehow make the uncolored parts the background color it will probably be fine, but good lord this is 2018 why is everything still this awful
Xkeeper

Level: 250


Posts: 22892/24691
EXP: 250041848
For next: 487163

Since: 07-03-07

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

Since last post: 20 hours
Last activity: 13 hours

Posted on 01-19-18 03:58:27 PM Link
Oh, it's also possible that it's conflicting with your older layouts (style rules and such), whoops. You can try editing it into your other posts or just removing the layout from those or whatever.
Ben_
User
Level: 6


Posts: 5/13
EXP: 833
For next: 74

Since: 01-03-18

From: Sweden

Since last post: 37 days
Last activity: 33 days

Posted on 01-19-18 03:59:51 PM Link
Webdev is finicky and often infuriating, because things that should otherwise work don't.
Xkeeper

Level: 250


Posts: 22893/24691
EXP: 250041848
For next: 487163

Since: 07-03-07

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

Since last post: 20 hours
Last activity: 13 hours

Posted on 01-19-18 03:59:59 PM Link
The good news is that this is a new page and it looks fine. Hooray!

You can turn on auto-updating layouts in your profile, but that only changes it for you (and makes everyone's posts use their latest layout, always).

It's usually not a problem as long as you use unique styles per post layout.
RanAS
Member
Level: 40


Posts: 310/498
EXP: 430005
For next: 11304

Since: 10-10-14

From: Brazil

Since last post: 12 hours
Last activity: 3 hours

Posted on 01-19-18 04:20:24 PM Link
border-image is a mess to work with for some reason, so I usually let this website take care of the issue for me. You don't need any of the prefixed versions that the website provides (example: "-moz-border-image") since all major browsers simply accept border-image now.

in theory I should actually learn how it works instead of relying on generators, but border-image can be counter-intuitive at times
maple
Member
Level: 19


Posts: 14/153
EXP: 32782
For next: 2995

Since: 01-19-18

From: a linode vps

Since last post: 272 days
Last activity: 129 days

Posted on 01-20-18 02:37:50 PM (last edited by maple at 01-21-18 04:44:49 AM) Link
hi. sorry about deleting my posts here, i had a panic attack yesterday and yeah i was trying to delete the thread itself.

anyway i have an animated bg now
maple
Member
Level: 19


Posts: 24/153
EXP: 32782
For next: 2995

Since: 01-19-18

From: a linode vps

Since last post: 272 days
Last activity: 129 days

Posted on 01-21-18 04:43:31 AM (last edited by maple at 01-21-18 04:43:53 AM) Link
double post just cause i wanted to ask a new question

so i got a uwsgi python script working here at the moment which returns a plaintext string

is there any js-less way of including that as html content, namely to be used in the window title of my post layout?
RanAS
Member
Level: 40


Posts: 314/498
EXP: 430005
For next: 11304

Since: 10-10-14

From: Brazil

Since last post: 12 hours
Last activity: 3 hours

Posted on 01-21-18 05:41:48 AM Link
Originally posted by maple
double post just cause i wanted to ask a new question

so i got a uwsgi python script working here at the moment which returns a plaintext string

is there any js-less way of including that as html content, namely to be used in the window title of my post layout?

I generally see people do that with images rather than text. You'd just generate the text on the server and then convert it to an image somehow, and put an <img> on the post. I assume generating images is easier to do with PHP than Python though...

There's another way, and that is having the server generate a CSS file. It would generate, for example:


.maple-window-title > span::before {content: "Hello World";}

Then you'd just need to randomize the content property and @import the file that Python generates, and there you go probably. It should show up as normal text.
maple
Member
Level: 19


Posts: 25/153
EXP: 32782
For next: 2995

Since: 01-19-18

From: a linode vps

Since last post: 272 days
Last activity: 129 days

Posted on 01-21-18 01:23:08 PM (last edited by maple at 01-21-18 08:12:06 PM) Link
Originally posted by RanAS
There's another way, and that is having the server generate a CSS file.

ohhh i didn't think of that! that's a pretty elegant solution, thank you!

i didn't want to generate images cause it feels a bit wasteful, can't be selected as text, and probably would break layout on different screens
Pages: 1 2Next newer thread | Next older thread
Jul - Meta - post layouts? New poll - New thread - Thread closed




Rusted Logic

Acmlmboard - commit 220d144 [2018-11-04]
©2000-2018 Acmlm, Xkeeper, Inuyasha, et al.

28 database queries, 4 query cache hits.
Query execution time: 0.172035 seconds
Script execution time: 0.033146 seconds
Total render time: 0.205181 seconds