Pages: 12 »
Posted on 05-23-16, 07:46 pm (rev. 29 by Sherry_ on 02-06-17, 03:55 pm)


Karma: 1390
Posts: 230/355
Since: 05-26-15
If you're wondering how to make a layout, this guide is for you.

The parts of the post
___________________________________________________________________________________________________________

First of all, you should know what are ".mainbarX" ".sidebarX" ".topbarX_1" ".topbarX_2" ".tableX" and what's X.

What's .mainbarX? It is this part of the post (where is written your post):
NOTE: This is only a sample post.



What are .topbarX_1 and _2? .topbarX_1 is the part of post where is written your username, .topbarX_2 is the part of post where is written the date of when you have posted it.



What is .sidebarX? It is the part of the post where is your avatar, and where is written your karma and your post number.



What's .tableX .tableX is all the post (for example if you put a BG code in .tableX, it will affects all the post).

What's X? X is your profile ID, for example mine is 1556.


Where I have to insert my code?
___________________________________________________________________________________________________________

Go in your profile, then click on Edit my profile, click on Post layout, and write your code in Header.


Basics
___________________________________________________________________________________________________________

Everything concerns with the code must be stored between

<style>*Insert code here*</style>

(Don't put *Insert code here* in header!)

For example if you want a color BG (background) only in your .mainbar, the code should be like this:

<style> .mainbarX { background: rgba(10, 0, 0, 1.0)!important; </style>


This simple code make your .mainbar black.
You (if you are new to CSS), are wondering how you can change the color of the .mainbar, you just have to change this part:

rgba(10, 0, 0, 1.0)!important;


You can find the right color with this.
Instead if you want an image as BG, you can use this:

background: url("*Insert image URL here*")!important;


For have a fixed repeat, just add

repeat fixed


next to the round brackets.

Here's a few examples for change some things:

Font
.mainbarX { font-family: "*Font name here*" !important; }

URL Link
.mainbarX a { color: #HEX COLOR !important; }

Spoiler Button
.mainbarX .spoilerbutton { background-color: #HEX COLOR !important; color: #HEX COLOR !important; }

Font Color
.mainbarX { color: #HEX COLOR !important; }

Spoiler Content
.mainbarX .spoiler .spoiled { background-color: #HEX COLOR !important; }

Quote Content
.mainbarX .quote { background-color: #HEX COLOR !important; }

Codeblock Content
.mainbar1556 .codeblock { background-color: #HEX COLOR !important; }


Example Code
___________________________________________________________________________________________________________

Here's an example:

<style> .tableX { background: url("*Insert image URL here*") !important; } .mainbarX { font-family: "*Font name here*" !important; font-size: 110% !important; border-left: 1px solid #FFFFFF !important; border-top: 1px solid #FFFFFF !important; } </style>

Remember to replace the X with your user ID.


"FAQ"
___________________________________________________________________________________________________________


Q: Some things I've changed work, but other things I've changed don't work... What can I do?
A: Try to add an "!important". If it still doesn't work, you have done something wrong.

Q: How can I get my user ID?
A: Go in your profile page, then view the URL bar, there should be written something like that: "http://nsmbhd.net/profile/1556-sherry/". The numbers before the username are your user ID (in this case my ID is 1556).

Q: Where can I upload my BG image?
A: You can upload it on Imgur, or just on NSMBHD.net.

Q: With CSS can I customize everything? For example my username on .table_1?
A: Yes, for example, you can modify the username font, but you can't change your username color! (actually you can, but it's not allowed, so...)

Q: What's an HEX COLOR?
A: This.


Other
___________________________________________________________________________________________________________


If you have some questions, don't hesitate to post it here!
And before make your layout, please read these guidelines.

Enjoy your new layout!

(post layout disabled for readability)
Posted on 05-23-16, 08:01 pm
Paragoomba


Karma: 215
Posts: 38/69
Since: 02-01-14
That might come in handy for some people
_________________________
Posted on 05-23-16, 08:15 pm



Karma: 457
Posts: 66/139
Since: 04-08-16
We needed this a while ago

It's well explained and easy to understand

Good job, Sherry_ *tumbs up*
The Legendary Sprite 326:
Posted on 05-23-16, 08:20 pm (rev. 1 by  gridatttack on 05-23-16, 08:24 pm)
Birdo


Karma: 3175
Posts: 1846/2004
Since: 06-28-11
Thanks for the tutorial.

Surprised to see that there wasn't one before.
(I thought there was one, but turns out it was on the other boards)

Also, another thing to note is that in order to edit the Spoiler area, the class to stylize it is ".mainbarX .spoiler .spoiled" and to modify the quote part is ".mainbarX .quote"
_________________________

Posted on 05-23-16, 08:39 pm (rev. 1 by Sherry_ on 06-07-16, 05:25 pm)


Karma: 1390
Posts: 231/355
Since: 05-26-15
Thanks for the thanks.

Posted by gridatttack
Also, another thing to note is that in order to edit the Spoiler area, the class to stylize it is ".mainbarX .spoiler .spoiled" and to modify the quote part is ".mainbarX .quote"


Added ".codeblock", too.
Posted on 05-23-16, 11:02 pm
Once upon a time there was a tiger.

Karma: 4799
Posts: 1864/2603
Since: 01-17-13
#element_1>#element_2 { *whatever* }
This works if element_2 is the immediate child of element_1.

#element_A #element_B { *whatever* }

This works if element_B is a child of element_A. Any child. If you put only a space, it affects any 'element_B' element inside element_A, and not only the immediate child, unlike when you use >.

Note:
#element_A > #element_B { *whatever* }


This here will work like the first example, and not the second one. As long as there is the >.

Posted by gridatttack
to edit the Spoiler area, the class to stylize it is ".mainbarX .spoiler .spoiled"

Just
.mainbarX/.tableX .spoiled
can do. Not that it matters much, I'm just saying.

______


Also, Sherry_, I have a question. Why did you do this?:
Posted by Hypernova99
<style>
.spoilerbutton {
background-color: #000028 !important;
color: white !important;
border: 1px solid white !important;
border-radius: 3px !important;
font-size: 120% !important;
}
.spoiled {
background-color: #333333 !important;
color: white !important;
border-radius: 10px !important;
font-family:"Trebuchet MS" !important;
}
.codeblock {
background-color: #0a0f0f !important;
color: white !important;
border-radius: 10px !important;
}
</style>

You made this tutorial, so I assume you know very well this code applies to everyone.

I do not have authority nor anything, I'm just asking why you did this. Common sense tells it break the website rules.
Posted on 05-24-16, 02:58 pm (rev. 2 by Sherry_ on 10-07-16, 10:32 am)


Karma: 1390
Posts: 232/355
Since: 05-26-15
Posted by Thierry
Also, Sherry_, I have a question. Why did you do this?:
Posted by Hypernova99
*Code was here*

You made this tutorial, so I assume you know very well this code applies to everyone.

I do not have authority nor anything, I'm just asking why you did this. Common sense tells it break the website rules.


I did this because I like that spoiler buttons, and I know it affects all the post, but I have completly forgot that...
EDIT: In every case I removed it.
Posted on 05-24-16, 03:22 pm
Once upon a time there was a tiger.

Karma: 4799
Posts: 1865/2603
Since: 01-17-13
In that case, how about you just do this:


This way, it would only affect the elements inside the post 48178.
Posted on 05-29-16, 04:41 am (rev. 1 by  cros107 on 05-29-16, 04:42 am)
Lantern Ghost
Will never finish a hack

Karma: 1771
Posts: 43/773
Since: 03-25-16
How do I put in a background in the main bar like, say, Thierry? I put:

background: url("my url in here") !important;

Thanks
_________________________
hey look, I did a thing
Posted on 05-29-16, 04:58 am (rev. 2 by Thierry on 01-31-17, 12:58 am)
Once upon a time there was a tiger.

Karma: 4799
Posts: 1884/2603
Since: 01-17-13
About the image you used.

http://imgur.com/cWu7c2E is the link to the page the image is displayed on.

http­://i.imgur.com/cWu7c2E­.jpg is the link of the image itself.

Guess which one you have to use.


I'm not sure it will look good though, since the image doesn't quite tile. And is pretty bright compared to the white text.
Posted on 05-29-16, 05:00 am (rev. 5 by  cros107 on 05-29-16, 07:44 am)
Lantern Ghost
Will never finish a hack

Karma: 1771
Posts: 45/773
Since: 03-25-16
Ahh thanks, might see how it looks and edit it accordingly. I quite like that background

Edit: Oh, was expecting it to stay in spot while the page scrolls...

Edit 2: Got it, but tiling looks really bad. No background for now then.

Edit 3: Finally got something I'm happy with
_________________________
hey look, I did a thing
Posted on 05-31-16, 05:21 pm (rev. 4 by Sherry_ on 06-27-16, 06:53 pm)


Karma: 1390
Posts: 246/355
Since: 05-26-15
Hello,
Just for you a new code:

html body div#body div#body-wrapper div#main div#page_contents table.post.margin.tableX tbody tr.rowX_1 td.side.userlink.topbarX_1 a span.nc10:hover { color: #HEX COLOR !important; }
What this code do? Try to put the mouse pointer on my username on .topbarX_1, then you will know.
Remember to replace X with your user ID, and replace "10" (next to ".nc") with 00 if your username is blue, with 20 if your username is violet.
Posted on 06-04-16, 07:19 pm (rev. 1 by ImageBot on 11-21-16, 03:21 am)
Boomerang Brother
under probation

Karma: 3299
Posts: 798/1013
Since: 11-29-11
Could somebody help me?

I'm trying to change my post's font with this code:

<style type="text/css"> @font-face { font-family: MyCustomFont; src: url("http://nsmbhd.net//file/9b43475cbcb82a32a02f/Krabby-Patty.ttf") } </style> <style> .mainbar102 { background: url("http://nsmbhd.net/file/49d52ad439640ef4511a/3.%20Underground.PNG") !important; font-family: "MyCustomFont" !important; text-shadow: 1.5px 1.5px black !important; color: #ffffff !important; border: 1px solid #FFFFFF !important; } </style>


Unfortunately, I don't get that font to work. Have I done something wrong in this code?
Posted on 06-04-16, 09:21 pm (rev. 1 by Thierry on 06-04-16, 09:23 pm)
Once upon a time there was a tiger.

Karma: 4799
Posts: 1894/2603
Since: 01-17-13
@ KingYoshi: I tried to make it work, but failed. Can you try hosting your font somewhere else, like on a private space such as a Dropbox?

@Hypernova99:
Posted by Sherry
html body div#body div#body-wrapper div#main div#page_contents table.post.margin.tableX tbody tr.rowX_1 td.side.userlink.topbarX_1 a span.nc10:hover { color: #HEX COLOR!important; }


..or alternatively, just:
.topbarX_1 span:hover {color: *hex color*;}


See, I just used this very code in my post.


Edit: I didn't notice before, but you messed up again.
Posted on 06-05-16, 11:03 am
Boomerang Brother
under probation

Karma: 3299
Posts: 801/1013
Since: 11-29-11
Posted by Thierry
@ KingYoshi: I tried to make it work, but failed. Can you try hosting your font somewhere else, like on a private space such as a Dropbox?



Didn't work.
Posted on 06-06-16, 04:37 pm
Death by cuteness

Karma: 6274
Posts: 404/598
Since: 05-01-13
 KingYoshi, you might want to replace:
.pipemenu

with:
.topbar102_2 > ul

so that it doesn't affect posts that are not made by you
Posted on 06-06-16, 05:08 pm
Boomerang Brother
under probation

Karma: 3299
Posts: 806/1013
Since: 11-29-11
Posted by MeroMero
 KingYoshi, you might want to replace:
.pipemenu

with:
.topbar102_2 > ul

so that it doesn't affect posts that are not made by you


Oh sure, thanks
Posted on 06-07-16, 12:13 pm (rev. 4 by Sherry_ on 10-07-16, 10:35 am)


Karma: 1390
Posts: 254/355
Since: 05-26-15
Custom Post Layout Fonts
_________________________________________________________________________________________________________________

It seems like NSMBHD.net doesn't load custom fonts if directly written in the header.

Well, first of all, download this .css file: @myfont.css. (EDIT: nsmbhd.net doesn't download the file, so make a text file, rename it @myfont.css, and copy what's written in @myfont.css in the new @myfont.css)

There will be written in it:
@font-face { font-family: 'Krabby Patty'; src: url('https://www.dropbox.com/s/drb21qt29bumycr/Krabby%20Patty.ttf?dl=0') format('ttf'); }


(yes  KingYoshi, it is exactly the font that you have tried to use)

Krabby Patty is the font name, a name that will be used later.
The link means where is stored the font file.
format('ttf') means the font format (in this case it it a .TTF, but it can be a .OTF, etc.).

Now, edit the file you have just downloaded.
Then, upload that file on Dropbox (I've used Dropbox, but you can use new.nsmbhd.net too).
So, in the header:

@import url(filelink);


And for edit the font, for example in .mainbarX:

.mainbarX { font-family: "Krabby Patty" !important; }

Insert the exact name you've used here:

@font-face { font-family: 'Krabby Patty';


And, here's all.

Tips
_________________________________________________________________________________________________________________

Try to upload @myfont.css file on new.nsmbhd.net.

Font Problems
_________________________________________________________________________________________________________________

The font is too big/small... What can I do?
Add
font-size: 100% !important

(in your .mainbarX/.sidebarX etc.). Replace 100% with a smaller number, if you want smaller font, replace 100% with a bigger number, if you want bigger font.

NOTE: this could work as this could not work. I don't know why.

_________________________________________________________________________________________________________________

Enjoy your new font.
Posted on 11-16-16, 01:01 am
Fuzz Ball
Watched the Endless Eight twice.

Karma: 1942
Posts: 104/974
Since: 02-12-16
So here's my code:
<style> .table1844 { @import url(https://www.dropbox.com/s/91o1h3xe8wia2ex/%40myfont.css?dl=1); !important } </style

Why doesn't it work?
_________________________
Nothing to say, so jadnjkfmnjamnfjkldnajfnjkanfjdksan jsdnvj m.

Posted on 11-16-16, 02:27 am
Once upon a time there was a tiger.

Karma: 4799
Posts: 1992/2603
Since: 01-17-13
All you did was link a CSS file containing a fontface. You did not apply said font to your table element. Just look up on google how to apply a font-face on some element.
Pages: 12 »