What will my monobook.css look like with what I have?

[Kerrigan]

body {
 font-family: verdana
 color: #BF6E00;
 font-size: 30px
 background-image: url"RoyNSMBU.png"
 }
a { color: #00F1FE; }
a:active { color: #00FE04; }
a:visited { color: #7AA300; }
#p-personal a.new { color: #FEB600 }

this is what I have now.

 

[Lakituthequick]

Your CSS contains errors. When fixed, it becomes:

body {
 font-family: verdana;
 color: #BF6E00;
 font-size: 30px;
 background-image: url("/images/b/bd/RoyNSMBU.png");
 }
a { color: #00F1FE; }
a:active { color: #00FE04; }
a:visited { color: #7AA300; }
#p-personal a.new { color: #FEB600 }

And when used, the Wiki would look like this:

Spoiler: large image

I'm fairly sure you don't want that. You probably want a smaller font-size and a smaller size image.

Font-size I'm sure you can figure out, to make the image smaller either use a smaller image that already exists pregenerated by the Wiki software, or use the following within the body { ... }:

background-size: 1200px 600px;

Where the first value is the width, the second the height. If you only provide one of the two, it will only set the width, and auto-calculates the height.



By the way, you can test your CSS by editing your monobook.css page, and using the Preview button like you would on any ordinary page.

 

[Kerrigan]

I found that out after I posted this. Let me try that, I'll update you.

 

[Kerrigan]

So I tried a new picture, and the code looks like this:

body {
 font-family: verdana;
 color: #BF6E00;
 font-size: 10px;
 background-image: url("/images/b/bd/MK8 Roy Icon.png");
 }
a { color: #00F1FE; }
a:active { color: #00FE04; }
a:visited { color: #7AA300; }
#p-personal a.new { color: #FEB600 }

p.oblique {
 font-style: oblique;
}

However, not much had changed. What am I doing wrong?

 

[freakworld]

well use the background size thing.

 

[Lakituthequick]

You did very well change things. Just the URL of the image is wrong.

Change it into "/images/3/3e/MK8_Roy_Icon.png".

Colors are still the same as with last time, olivegreen, skyblue and stuff.

E: screenshot:

Spoiler: image

 

[Kerrigan]

I edited the picture name but it doesn't show up.

 

[Lakituthequick]

You should have this:

body {
 font-family: verdana;
 color: #BF6E00;
 font-size: 10px;
 background-image: url("/images/3/3e/MK8_Roy_Icon.png");
 }
a { color: #00F1FE; }
a:active { color: #00FE04; }
a:visited { color: #7AA300; }
#p-personal a.new { color: #FEB600 }

p.oblique {
 font-style: oblique;
}

This looks exactly as in my screenshot.

 

[Kerrigan]

Is there a way to get the picture not to show over the text on the left?

 

[Lakituthequick]

Spoiler: Like this?

Add this to the rest:

.portlet h3 {
 background: #FFF;
}

 

[Viper26]

#p-logo a { background: url(http://www.mariowiki.com/images/b/b3/Viper26_logo.png) 35% 50%
 no-repeat !important; }
body {
 font-family: Comic Sans MS;
 color: #4B0082;
 font-size: 10px;
 background-image: url("/images/3/39/Viper26.png");
 }
a { color: #939; }
a:active { color: #63F; }
a:visited { color: #639; }
#p-personal a.new { color: #96F }
#p-personal a.new:visited { color: #66F }
#bodyContent a.external { color: #66F }
#bodyContent a.extiw:active { color: #66F }
p.oblique {
 font-style: oblique;
}
.portlet h3 {
 background: #4B0082;
}

The above is a sample. It is my monobook.css.

 

[Kerrigan]

the other thing is that the font isn't slanted.

Edit: And Viper, how did you get your logo to show as the wiki logo?

E2: For some reason, the regular links-I-haven't-clicked are still blue and normal text (like on an article) is black but they should be magenta. Code for the entire thing:

body {
 font-family: verdana;
 color: #FF00FF;
 font-size: 10px;
 background-image: url("/images/3/3e/MK8_Roy_Icon.png");
 }
a { color: #FF00FF; }
a:active { color: #FF00FF; }
a:visited { color: #FF00FF; }
#p-personal a.new { color: #FF00FF }

p.oblique {
 font-style: oblique;
}

.portlet h3 {
 background: #FFF;
}

 

[Lakituthequick]

the other thing is that the font isn't slanted.

Use font-style: italic for that.

Edit: And Viper, how did you get your logo to show as the wiki logo?

Add this:

#p-logo a {
 background: url(<your image URL here>) center no-repeat !important;
}

...replacing <your image URL here> for the actual URL.

E2: For some reason, the regular links-I-haven't-clicked are still blue and normal text (like on an article) is black but they should be magenta.

Unvisited links are magenta alright. For magenta text you also need this:

div#content {
 color: #FF00FF;
}

Resulting in:

Spoiler

body {
 font-family: verdana;
 color: #FF00FF;
 font-size: 10px;
 font-style: italic;
 background-image: url("/images/3/3e/MK8_Roy_Icon.png");
 }
div#content {
 color: #FF00FF;
}
a { color: #FF00FF; }
a:active { color: #FF00FF; }
a:visited { color: #FF00FF; }
#p-personal a.new { color: #FF00FF }

p.oblique {
 font-style: oblique;
}

.portlet h3 {
 background: #FFF;
}

 

[Kerrigan]

then one last thing: is it possible to resize the logo image?

 

[Lakituthequick]

Yes, use background-size from my first post in this thread.