Register - Login
Views: 99393378
 Main - Memberlist - Active users - Calendar - Wiki - IRC Chat - Online users
Ranks - Rules/FAQ - Stats - Latest Posts - Color Chart - Smilies		 04-24-22 10:25:02 AM
Jul - Meta - Trying to figure out post layouts New poll - New thread - New reply
Next newer thread | Next older thread
Shining Wing

Shyguy
Level: 18


Posts: 5/84
EXP: 25748
For next: 4149

Since: 04-01-19

Pronouns: she/her
From: Nova Scotia, Canada

Since last post: 55 days
Last activity: 27 days
Posted on 04-02-19 02:35:27 AM Link | Quote
Hi, so I'm trying to figure out how to do post layouts. I'm trying to use a <style> tag since I can't even begin to figure out inline styles (I basically know no HTML, only CSS for stuff like Stylus), but I'm clearly having difficulties here... the biggest problem is that I think I'm trying to theme the wrong things...? I'm trying to theme general elements that just end up hitting the site body and such without actually theming the post itself... I have no idea what I'm actually supposed to be doing with this. Here's the stuff I put together anyway... I really have no idea what I need to change to have this theme the actual post

Here's the HTML/CSS I have:

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono');

body {
font-size: 14;
margin: 24px;
font-family: Roboto, Verdana;
background: #212121;
}

.fonts {
font-size: 12px;
font-family: Roboto, Verdana, sans-serif;
color: rgba(255,255,255,0.60);
}

blockquote {
margin: 16px 0px;
border-left: 2px solid #FF4081;
padding: 12px 24px 8px 24px;
background-color: #424242;
border-radius: 2px;
}

blockquote>hr {
border-width:0;
margin: 4px 0px
}

a {
color: #FF80AB;
}

a:visited {
color: #FF4081;
}

code {
font-family: 'Roboto Mono', monospace;
}
</style>

Note that I run this through a minify tool which strips out the line breaks and such before I use this on the site, so ignore those.

I just feel super confused by this... I'd really appreciate any help in figuring out how to make this work as a post layout
xdaniel
980
Level: 64


Posts: 824/982
EXP: 2151650
For next: 62447

Since: 12-04-08

Pronouns: he/they
From: Germany

Since last post: 17 days
Last activity: 2 hours
Posted on 04-02-19 03:41:39 AM Link | Quote
Julbench3.1  94% full, 55K free, 824K in use
You'll want to put your post into a container, and then only apply the style to said container - or at least that's what I do and it works, I don't really know if there's another way.

For example, make all your style bits only apply to elements of a certain ID, say #shiningwing-post { ... } or whatever, then put the <style> block into the post header, then open a <div> with the ID you specified, hence ex. <div id="#shiningwing-post"> - don't close it here yet. Put the closing </div> tag into the footer/signature, that'll wrap your post in the container and, because of the ID, only apply the style to that instead of the whole page.

Practical example, my layout as of right now:



I hope that helps and made sense? Tho I'm not too great with HTML and CSS myself ^^"


____________________
cu xdaniel -- Follower of the Church of Madoka -- @xdanieldzd (Twitter) -- xdanieldzd (Twitch) -- stapled tech (YouTube)



It doesn't even matter if there is no hope, as the madness of the system grows

Shining Wing

Shyguy
Level: 18


Posts: 6/84
EXP: 25748
For next: 4149

Since: 04-01-19

Pronouns: she/her
From: Nova Scotia, Canada

Since last post: 55 days
Last activity: 27 days
Posted on 04-02-19 04:13:37 AM (last edited by Shining Wing at 04-02-19 09:07:31 PM) Link | Quote
Originally posted by xdaniel
You'll want to put your post into a container, and then only apply the style to said container - or at least that's what I do and it works, I don't really know if there's another way.

For example, make all your style bits only apply to elements of a certain ID, say #shiningwing-post { ... } or whatever, then put the <style> block into the post header, then open a <div> with the ID you specified, hence ex. <div id="#shiningwing-post"> - don't close it here yet. Put the closing </div> tag into the footer/signature, that'll wrap your post in the container and, because of the ID, only apply the style to that instead of the whole page.

Practical example, my layout as of right now:



I hope that helps and made sense? Tho I'm not too great with HTML and CSS myself ^^"

That's exactly what I needed to know, thanks a bunch! It seems to be working just fine now~ ♥

____________________

I'm on Twitter apparently
But more importantly, check out my awesome girlfriend's Twitter ♥
My post layout is a work in progress!
Next newer thread | Next older thread
Jul - Meta - Trying to figure out post layouts New poll - New thread - New reply


Rusted Logic
Acmlmboard - commit 47be4dc [2021-08-23]
©2000-2022 Acmlm, Xkeeper, Kaito Sinclaire, et al.

28 database queries, 1 query cache hits.
Query execution time:  0.097624 seconds
Script execution time:  0.013338 seconds
Total render time:  0.110962 seconds


TidyHTML vomit below
line 1 column 1 - Warning: missing <!DOCTYPE> declaration
line 2 column 301 - Warning: unescaped & or unknown entity "&page"
line 119 column 11 - Warning: <form> isn't allowed in <table> elements
line 118 column 10 - Info: <table> previously mentioned
line 120 column 11 - Warning: missing <tr>
line 120 column 119 - Warning: missing </font> before </td>
line 124 column 16 - Warning: plain text isn't allowed in <tr> elements
line 120 column 11 - Info: <tr> previously mentioned
line 125 column 68 - Warning: missing </nobr> before </td>
line 141 column 68 - Warning: missing </nobr> before <tr>
line 147 column 35 - Warning: missing <tr>
line 147 column 50 - Warning: missing </font> before </td>
line 148 column 37 - Warning: unescaped & or unknown entity "&id"
line 147 column 186 - Warning: missing </font> before </table>
line 149 column 35 - Warning: missing <tr>
line 149 column 50 - Warning: missing </font> before </td>
line 149 column 91 - Warning: missing </font> before </table>
line 156 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 158 column 9 - Warning: missing <tr>
line 176 column 13 - Warning: missing <tr>
line 177 column 102 - Warning: unescaped & or unknown entity "&postid"
line 230 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 232 column 9 - Warning: missing <tr>
line 250 column 13 - Warning: missing <tr>
line 251 column 102 - Warning: unescaped & or unknown entity "&postid"
line 253 column 74 - Warning: <style> isn't allowed in <td> elements
line 253 column 9 - Info: <td> previously mentioned
line 270 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 272 column 9 - Warning: missing <tr>
line 290 column 13 - Warning: missing <tr>
line 291 column 102 - Warning: unescaped & or unknown entity "&postid"
line 293 column 74 - Warning: <style> isn't allowed in <td> elements
line 293 column 9 - Info: <td> previously mentioned
line 309 column 17 - Warning: missing <tr>
line 309 column 17 - Warning: discarding unexpected <table>
line 312 column 35 - Warning: missing <tr>
line 312 column 50 - Warning: missing </font> before </td>
line 312 column 91 - Warning: missing </font> before </table>
line 314 column 35 - Warning: missing <tr>
line 314 column 50 - Warning: missing </font> before </td>
line 315 column 37 - Warning: unescaped & or unknown entity "&id"
line 314 column 186 - Warning: missing </font> before </table>
line 316 column 17 - Warning: discarding unexpected </textarea>
line 316 column 28 - Warning: discarding unexpected </form>
line 316 column 35 - Warning: discarding unexpected </embed>
line 316 column 43 - Warning: discarding unexpected </noembed>
line 316 column 53 - Warning: discarding unexpected </noscript>
line 316 column 64 - Warning: discarding unexpected </noembed>
line 316 column 74 - Warning: discarding unexpected </embed>
line 316 column 82 - Warning: discarding unexpected </table>
line 316 column 90 - Warning: discarding unexpected </table>
line 318 column 9 - Warning: missing </font> before <table>
line 330 column 25 - Warning: discarding unexpected </font>
line 339 column 57 - Warning: discarding unexpected </font>
line 317 column 1 - Warning: missing </center>
line 120 column 63 - Warning: <img> lacks "alt" attribute
line 125 column 19 - Warning: <td> attribute "width" has invalid value "120px"
line 125 column 93 - Warning: <img> lacks "alt" attribute
line 141 column 19 - Warning: <td> attribute "width" has invalid value "120px"
line 141 column 98 - Warning: <img> lacks "alt" attribute
line 148 column 44 - Warning: <img> proprietary attribute value "absmiddle"
line 148 column 142 - Warning: <img> proprietary attribute value "absmiddle"
line 148 column 246 - Warning: <img> proprietary attribute value "absmiddle"
line 160 column 11 - Warning: <img> lacks "alt" attribute
line 161 column 22 - Warning: <img> lacks "alt" attribute
line 161 column 63 - Warning: <img> lacks "alt" attribute
line 161 column 112 - Warning: <img> lacks "alt" attribute
line 161 column 162 - Warning: <img> lacks "alt" attribute
line 162 column 11 - Warning: <img> lacks "alt" attribute
line 172 column 15 - Warning: <img> lacks "alt" attribute
line 227 column 1828 - Warning: <img> proprietary attribute value "absmiddle"
line 227 column 1828 - Warning: <img> lacks "alt" attribute
line 234 column 15 - Warning: <img> proprietary attribute value "absmiddle"
line 234 column 15 - Warning: <img> lacks "alt" attribute
line 234 column 58 - Warning: <img> proprietary attribute value "absmiddle"
line 234 column 58 - Warning: <img> lacks "alt" attribute
line 234 column 101 - Warning: <img> proprietary attribute value "absmiddle"
line 234 column 101 - Warning: <img> lacks "alt" attribute
line 234 column 144 - Warning: <img> proprietary attribute value "absmiddle"
line 234 column 144 - Warning: <img> lacks "alt" attribute
line 234 column 187 - Warning: <img> proprietary attribute value "absmiddle"
line 234 column 187 - Warning: <img> lacks "alt" attribute
line 234 column 230 - Warning: <img> proprietary attribute value "absmiddle"
line 234 column 230 - Warning: <img> lacks "alt" attribute
line 234 column 273 - Warning: <img> proprietary attribute value "absmiddle"
line 234 column 273 - Warning: <img> lacks "alt" attribute
line 234 column 316 - Warning: <img> proprietary attribute value "absmiddle"
line 234 column 316 - Warning: <img> lacks "alt" attribute
line 234 column 359 - Warning: <img> proprietary attribute value "absmiddle"
line 234 column 359 - Warning: <img> lacks "alt" attribute
line 234 column 402 - Warning: <img> proprietary attribute value "absmiddle"
line 234 column 402 - Warning: <img> lacks "alt" attribute
line 235 column 22 - Warning: <img> lacks "alt" attribute
line 235 column 63 - Warning: <img> lacks "alt" attribute
line 235 column 112 - Warning: <img> lacks "alt" attribute
line 235 column 162 - Warning: <img> lacks "alt" attribute
line 236 column 11 - Warning: <img> lacks "alt" attribute
line 246 column 15 - Warning: <img> lacks "alt" attribute
line 259 column 1048 - Warning: <img> lacks "alt" attribute
line 264 column 1591 - Warning: <img> lacks "alt" attribute
line 264 column 1702 - Warning: <img> lacks "alt" attribute
line 274 column 11 - Warning: <img> lacks "alt" attribute
line 275 column 22 - Warning: <img> lacks "alt" attribute
line 275 column 63 - Warning: <img> lacks "alt" attribute
line 275 column 112 - Warning: <img> lacks "alt" attribute
line 275 column 162 - Warning: <img> lacks "alt" attribute
line 276 column 11 - Warning: <img> lacks "alt" attribute
line 286 column 15 - Warning: <img> lacks "alt" attribute
line 299 column 1560 - Warning: <img> lacks "alt" attribute
line 315 column 44 - Warning: <img> proprietary attribute value "absmiddle"
line 315 column 142 - Warning: <img> proprietary attribute value "absmiddle"
line 315 column 246 - Warning: <img> proprietary attribute value "absmiddle"
line 324 column 25 - Warning: <img> lacks "alt" attribute
line 329 column 267 - Warning: <img> lacks "alt" attribute
line 149 column 50 - Warning: trimming empty <font>
line 309 column 17 - Warning: trimming empty <tr>
line 312 column 50 - Warning: trimming empty <font>
line 125 column 68 - Warning: <nobr> is not approved by W3C
line 141 column 68 - Warning: <nobr> is not approved by W3C
line 177 column 27 - Warning: <nobr> is not approved by W3C
line 251 column 27 - Warning: <nobr> is not approved by W3C
line 291 column 27 - Warning: <nobr> is not approved by W3C
Info: Document content looks like HTML5
Info: No system identifier in emitted doctype
Tidy found 118 warnings and 0 errors!


The alt attribute should be used to give a short description
of an image; longer descriptions should be given with the
longdesc attribute which takes a URL linked to the description.
These measures are needed for people using non-graphical browsers.

For further advice on how to make your pages accessible
see http://www.w3.org/WAI/GL.
You are recommended to use CSS to specify the font and
properties such as its size and color. This will reduce
the size of HTML files and make them easier to maintain
compared with using <FONT> elements.

You are recommended to use CSS to control line wrapping.
Use "white-space: nowrap" to inhibit wrapping in place
of inserting <NOBR>...</NOBR> into the markup.

About HTML Tidy: https://github.com/htacg/tidy-html5
Bug reports and comments: https://github.com/htacg/tidy-html5/issues
Official mailing list: https://lists.w3.org/Archives/Public/public-htacg/
Latest HTML specification: http://dev.w3.org/html5/spec-author-view/
Validate your HTML documents: http://validator.w3.org/nu/
Lobby your company to join the W3C: http://www.w3.org/Consortium

Do you speak a language other than English, or a different variant of
English? Consider helping us to localize HTML Tidy. For details please see
https://github.com/htacg/tidy-html5/blob/master/README/LOCALIZE.md