Pages: 1
Posted on 10-31-19, 06:50 pm (rev. 11 by  Mirau on 10-31-19, 07:18 pm)
Mr.Saturn
General Admin

Karma: 105
Posts: 7/33
Since: 10-28-19

Last post: 98 days
Last view: 12 days


How to make a Custom Post Layout!



We're going to go on a step-by-step journey to learn how to make our post layouts look as unique and fun as we are. Our post layouts are coded up in a series of HTML and CSS parameters which will be entered into your header field within your Edit Profile tab (Edit Profile -> Post Layout).

Since our posts allow HTML we will start our header with a style tag.
<style> .. </style>

Within the style tags we will define our CSS classes. In CSS each class is defined as such:
.classname {}

We would then populate the class with parameters like this:
.classname {parameter: value !important;}

Some parameter values require quotation marks, some take multiple values for multiple things (border color, type, and thickness for example). Each parameter added needs to end with a semi-colon ";". The "!important" is not usually required, however it is good practice to include that when making a post layout to ensure your post style is used over any others.

There are five main classes that you will want to edit.
.table# .mainbar# .sidebar# .topbar#_1 .topbar#_2

Each instance of # should be replaced with your user ID. Go to the memberlist and find the number associated with your name - that is your user ID. Now when we start defining our classes (assuming our user ID is 15) we would want to put
.mainbar15 {parameters:value !important;}

Now that we know how to set up our classes it's important to know what each class refers to.
  • .table# - This controls the entire body of your post. If you want a full post background, for example, those parameters would go here.
  • .mainbar# - This is for the area set aside specifically for your posted content.
  • .sidebar# - This is where your avatar and various stats are on the left.
  • .topbar#_1 - The small area above your avatar where your username (and minipic) are located.
  • .topbar#_2 - The area above your .mainbar where the date and additional information about your post is located.

You can also create your own classes and attach them to
containers to create some really indepth designs. A few other pre-defined classes are as follows
  • .mainbar# .spoilerbutton {} - The spoiler button
  • .mainbar# .spoiler .spoiled {} - The actual spoiled content
  • .mainbar# .quote {} - How quoted text is formatted


Please notice how each class definition is paired with .mainbar#. If you don't include the mainbar you could potentially alter someone else's layout, or even the site itself. This practice should be used when making your own classes as well; as not to interupt any other layouts.

Here are some example headers to use to get started!
<style>
.table# {
background: linear-gradient(rgba(89,89,89,0.6), rgba(63,63,63,0.6)) !important;
border-radius: 8px !important;
border: 1px solid hsl(210, 20%, 7.5%) !important;
color: #FFFFFF;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 2px 2px rgba(0,0,0,0.4);
}
</style>


<style>
.sidebar# .topbar#_1 {
color: #f8f8f8 !important;
font-size: 1.5em !important;
font-weight: bold !important;
}
</style>


Do keep in mind that there is much more to what is available versus the material gone over in this thread. I didn't even get into transitions or stuff of that calibur. If you are familiar with those concepts then by all means make some cool layouts. As long as they are not broken, obstructive, or NSFW you should be fine. You will find, however, that Javascript is automatically scrubbed from the headers, posts, and footers - sorry for that. HTML and CSS should give you plenty of room to express yourself with. Experiment with layouts and have fun!

Post any questions and comments in here!

Pages: 1