Site registration now fixed. Oops! |
||||||
|
Views:
434,518 |
  
Sections: Documents
| Utilities
| ROM Hacks
| Games
| Translations
| Homebrew
| Fonts
Site: Main | Rules/FAQ | Discord | Memberlist | Latest posts | Stats | Ranks | Online users |
09-19-24 11:53 PM |
||||
| Guest: Register | Login | ||||||
| 0 users currently in Meta | 6 bots |
| Main - Meta - Basic Guide to Post Layouts on NeoRHDN (6) |
| Oz74 |
| |||||||||
|
Level: 7 Posts: 14/31 EXP: 1012 Next: 436 Since: 08-16-24 From: Erebonia Last post: 3 days Last view: 1 day |
Table of contents:
1. Introduction to Post Layouts 2. Basic Example 3. Common HTML on the Board 4. Classes in Your Posts 5. A Small CSS Glossary 6. Tips and Tricks 7. Special Considerations 1. Introduction to Post Layouts Acmlmboard software has a slew of personalization features. One of the coolest flairs you can add is a post layout. These decorate your entire post and give you a unique presence! It does require HTML and CSS knowledge. Markup (your HTML) is decorated by the stylesheet (your CSS) and the bulk of this tutorial covers the some of the various CSS declarations that are useful for an Acmlmboard post layout. The first thing you'll want to do is save your profile page to work offline, since at time of writing, NeoRHDN does not feature a "preview post layout" option, and when it does, if your login session expires while you're previewing, you're going to lose your progress. Open your offline HTML page in a good text editor - syntax highlighting for HTML will help you see it easily! CTRL+F and find text you know is in the sample post, and there you'll find all the pieces you can edit. Anything named in tags or any names of classes can be modified, but it is important that you use the box names that have your userid as a parent to ensure your modifications are unique to your own posts (this will be elaborated on later.) Your post is a table is divided into quadrants. The table cells in a row are going to be the same size as whichever the largest is, unlike divs, which require more CSS input to control size and will otherwise default to ending immediately after the content. Inside your post body, you can add more HTML. It's a lot easier IMO to keep your layout's CSS in its own external file. To use it, put <style type="text/css">@import url ("filename.css");</style>. When you edit the file, any CSS changes will show in your post. 2. Basic Example For a single new box around your post, you can add a <div> in the header and close with a </div> in the footer. If you want another box around your signature, you can open another <div> and put your signature in here, then close it with another </div>. But wait, did you notice how the two boxes are touching? Giving them classes lets you modify the divs differently, and you can add a margin-top to give your boxes space in between. Let's say our divs' classes are "mypost" and "mysig". We want 8px of padding within and all around them, we want them both to be black with light grey text and neon green borders, and we want the main post background to be dark green, so to make this happen, the CSS file should contain:
The post header will contain:
The post footer will contain:
And here's our post layout. After this is the footer: This is my signature. 3. Common HTML on the Board a is an anchor, most often used to create links. To change effects based on the status of the anchor, use a:link, a:visited, a:hover, a:active - in that order. blockquote surrounds each quote. code should be used for code. div is a divider. It draws a box around content. hr is a horizontal rule. i.e. a straight line across. These are baked into quoted content, before and after the quote content. i italicizes. This is baked into quote headers. img inserts an image span deals with content from its start to finish and does not separate the content like div does. 4. Classes in Your Posts Your unique classes: topbarUID_1: This is the table cell containing your username. topbarUID_2: This contains the time stamp and options for your post. sidebarUID: This contains your avatar, level, post count, and last activities. mainbarUID: This is your post body. Relevant Acmlmboard classes in your posts: cd appears around the code block and defines the background as #000 raw, so you'll have to use !important if you want to override it. prettyprint is the main class of your code, while com, kwd, pln, pun, and str are spans that appear within for syntax highlighting. spoiler1 decorates a spoiler before it is moused over. spoiler2 decorates a spoiler after it is moused over. quotedby is specifically the span used to head quotes. 5. A Small CSS Glossary Here's a rundown of most of the stuff you'll want to consider when making your post layout. This glossary and set of examples might be enough for your intentions, but its aims are not to be a complete CSS tutorial. You can run live practice demonstrations and explore more fine tuning options at w3schools. background - colors can be passed as hexadecimal (3 or 6-digit) or decimal. Transparency can be done with rgba(r,g,b,a) where rgb are 0-255 and a is decimal from 0 to 1. Pictures can be rolled into the background with url("...") and both anchoring, stretch, and tiling can be attributed per-picture. You can also use absolute positioning if relative positions aren't suitable for your needs. Multiple background images can be ascribed to a single HTML property by using a comma (,) instead of a semicolon (;) to itemize them, but you must use a semicolon on the final background property. Example:
border - width, color, and style. Common styles include solid, dotted, ridge, double. Example:
border-image - draws a border using tiling sides with non-repeating corners. You can slice a source image into components to assign to the corners and sides. (Way back before CSS3 standardizations, we would draw table cells or use background anchoring to simulate this. I'm not going to lie - this one is alien to me because it was browser-specific and changing frequently when I was in practice.) This one gets deep really fast, so you might want to jump right into here to practice with it. box-shadow - draws a shadow under that blurs with increased radius. x, y, size, and color. Example:
color - assigns the text's color. content - squeezes a piece of text or a picture into an otherwise baked-in thing. Look at my layout's CSS to see how I added a Unicode star to quotes. font - assigns font-family and size. Fonts can also be itemized with a comma where each font in succession is a fallback for its previous font. font-weight - how thick the font is. Bold or normal are generally all you'd care about. display - useful if you want to mask some baked-in attributes you don't want. Example:
margin - how much you want to offset this box from the property it's inside. You can do it from all four directions in the order of top, right, bottom, left. Example:
padding - how much you want to offset the contents within the box from the edges of the box. Like margin, you can also control all four directions in the same order. text-align - the default is left, but you can align it to the center, right, or justify it. text-decoration - Underline or none. text-shadow - draws a shadow or glow around the text, with the same syntax as box-shadow. text-style - the slant of the font. Italic or normal. Single argument. transition - especially for mouse-over or clicking effects, fades in or out. Declared in decimal of seconds. Example:
6. Tips and Tricks
7. Special Considerations
|
| NinCollin |
| ||||||||||||||||||||||||||||||||||||||||
Root Administrator
 Koopa Level: 12 Posts: 65/105 EXP: 6706 Next: 1215 Since: 08-12-24 Last post: 1 day Last view: 1 day |
|
| Yuri Bacon |
| ||
 Red Goomba Level: 8 Posts: 27/41 EXP: 1530 Next: 657 Since: 08-16-24 Last post: 2 days Last view: 14 hours |
Congrats on the stick, your guide deserves it! ____________________ Build a man a fire, and he's warm for a night. Set a man on fire, and he's warm for the rest of his life. |
| Mattrizzle |
| ||
|
Newcomer Level: 3 Posts: 3/6 EXP: 89 Next: 39 Since: 08-13-24 From: United States Last post: 7 hours Last view: 7 hours |
Noticed some errors:
Under 4. Classes in Your Posts, topbar1_UID and topbar2_UID should be topbarUID_1 and topbarUID_2, respectively. This is still great! ____________________ |
| Oz74 |
| ||
|
Level: 7 Posts: 19/31 EXP: 1012 Next: 436 Since: 08-16-24 From: Erebonia Last post: 3 days Last view: 1 day |
Thank you - I'm gonna fix that right now! |
| Main - Meta - Basic Guide to Post Layouts on NeoRHDN (6) |
 Acmlmboard v2.5.6+neo (2024-08-13) © 2005-2024 Acmlm, Emuz, NinCollin, et al. |
|
MySQL - queries: 62, rows: 425/433, time: 0.030 seconds. |
