CSS Generator

Custom CSS Generator for Magistream Profile pages

Welcome to the Custom Profile CSS generator for Magistream profiles!

There are a few things to note in order to make the best use of this tool:

If you use your own header image make sure it's 850 pixels wide and 250 pixels tall to make it display well. Here's a tutorial showing how to do your own header image: [link]
This tool uses javascript to pick colours so check that it's enabled on your browser. If you have javascript turned off you'll need to manually enter the hex value (e.g., 000000 for black or FFFFFF for white) into the colour fields. If you want to add them manually here are a couple of charts showing the hex values of colours: W3School's colour chart and another colour chart
Any fields that asks you to enter a colour will bring up a small window for picking a colour as you click on the field. You can also enter the colour's hex value manually and the field's background colour will change to represent the chosen colour
You can leave fields empty if you wish, a default setting will then be used
Please note that this will generate a very basic Magistream Profile CSS, nothing fancy or complicated
If you are unsure of what is meant with "whole page" or "wrap area", check this image: [image] for reference
If you encounter any errors with the CSS generator, send a PM to Rosehill on Magistream
A small mention of the code being generated will appear on the bottom of the page. Please do not remove that unless you heavily modify the code after generating it with the generator
This tool is meant for anyone to use freely. You are allowed to make CSSs by request with this but please do not ask for any kind of payment.

Alright, now back to the good part!

Whole page background

Background image for the whole page: (image's URL, leave empty for no image)
Repeat background image?: Yes; No; Only once from top to bottom; Only once from left to right
Make background image scroll with the page or always stay glued to its position?: Scroll; Glued
Background colour for the whole page:: Make it transparent:

Wrap area

Background image for the wrap area: (image's URL, leave empty for no image)
Repeat wrap area background image?: Yes; No; Only once from top to bottom; Only once from left to right
Background colour for the wrap area:: Make it transparent:
Round wrap area's corners?: No; Yes, a little; Yes, a lot
Make a border on the wrap area?: No; Yes, Thickness: Colour: Style:

Header

Note that in order to work like the default Magistream header image your header image needs to be 850 pixels wide and 250 pixels tall and it's good to have the words "Forum" "Shops" "Trades" "The Keep" "World" and "Donate" at approximately the same position as in the default header link bar. [Tutorial]

Background image for the header: (image's URL, leave empty for no image): Use default magistream header image:
Background colour for the header area:: Make it transparent:
Round header area's corners?: No; Yes, a little; Yes, a lot
Make a border on the header area?: No; Yes, Thickness: Colour: Style:

Navigation panels

This section will affect both the top navigation section and the bottom navigation section.

Background image for the navigation panels: (image's URL, leave empty for no image)
Repeat navigation panel background image?: Yes; No; Only once from top to bottom; Only once from left to right
Background colour for the navigation panels:: Make it transparent:
Round navigation panels' corners?: No; Yes, a little; Yes, a lot
Make a border on the navigation panels?: No; Yes, Thickness: Colour: Style:

Avatar panel and content panels

This section will affect both the avatar panel and the other content (contact, statistics, about me and signature) panels.

Background image for the content panels: (image's URL, leave empty for no image)
Repeat content panel background image?: Yes; No; Only once from top to bottom; Only once from left to right
Background colour for the content panels:: Make it transparent:
Round content panels' corners?: No; Yes, a little; Yes, a lot
Make a border on the content panels?: No; Yes, Thickness: Colour: Style:

Miscellaneous

Here you can define e.g. the spoiler appearance, spoiler button appearance, quotes, links etc.

Background colour for the opened spoiler:: Make it transparent:
Round spoiler corners?: No; Yes, a little; Yes, a lot
Make a border on the spoiler area?: No; Yes, Thickness: Colour: Style:
Background colour for the spoiler button:: Make it transparent:
Text colour for the spoiler button:
Text colour for the spoiler button when the mouse is hovered over it:
Round spoiler button corners?: No; Yes, a little; Yes, a lot
Make a border on the spoiler button?: No; Yes, Thickness: Colour: Style:
Round quote corners?: No; Yes, a little; Yes, a lot
Round code box corners?: No; Yes, a little; Yes, a lot
Link colour:
Link colour when mouse is hovering over:
Visited link colour:
Font colour (for most of the page):
Content heading colour:
Profile heading colour: