CSS: HELP PLEASE

Posts

Pages: 1
Uh, hey guys. This may be the wrong section to post this question but this is the most appropriate topic I saw. So anyway, I'm having trouble implementing CSS into my game profile. (I can do HTML and XML but God forbid I know CSS) The thing is is that it shouldn't be that hard to use though. It's similar to HTML and XML in some ways.

Well back to the problem, I've tried going to top 272 on this site(the CSS article) and copied and pasted the background block into the CSS box of the profile. Even when I copy finished edits, nothing shows up. It's weird. I heard somebody mention that it may have to do with RMN 4 updates but I wouldn't count on that. OH, yeah the image is this...



Sorry if it's huge but anyway. This is what I'm trying to use. I'm trying to add transparency to it as well in the background. Is it not working because the image file is too large? Don't get frustrated with me I don't know this language yet. I just want to know how to do this, and I don't really feel like learning the entire language at the moment. Can somebody help? It'd be greatly appreciated.
What is the code you're using, and what are you trying to accomplish?

Please have in mind that CSS is not a language, it's just a set of instructions on how to show content; it basically tells a browser how to display HTML blocks.
author=Large
What is the code you're using, and what are you trying to accomplish?

Please have in mind that CSS is not a language, it's just a set of instructions on how to show content; it basically tells a browser how to display HTML blocks.

That shows how knowledgeable I am with CSS. Well, like I said I'm trying to... wait so I can use HTML in the box!? Wait, I'll be back. So it's rather an attachment than a full language. I'll see what I can do.

Here's what i'm importing btw

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('http://rpgmaker.net/media/content/users/19029/locker/Dragon_Quest.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</head>


</body>

</html>

And I'll save it as an HTML file and it works just fine. Is there something I should know here?
If that works, I'd be stumped.

You have 3 ways of using CSS, but I'm only going to talk about 2 of them: CSS in the HTML and importing CSS. You will be using the first one. The other one involves having an external CSS document and importing it into the HTML doc.

To use CSS declarations, you use the <style> tag. In it, you declare how the different HTML blocks or components (body, p, a, div, etc) will be shown. You can ALSO do this in each individual HTML tag (For example, <a href="..." style="...">), but I wouldn't reccommend it.

So, to address your code:

You open the <style> tag (Which is done inside the <head> tag)... but you don't close it; do it with </style> (HAH!). In it, you declare the properties for the <body> element. You do it by writing the properties inside brackets (You're doing it right). Each declaration needs to end with a ";".

See, if you were, for example, to write:

p {
font-weight:bold;
}

then, in every instance of <p> (paragraph) of your HTML document, your text would be bolded. All you have to do is USE the <p> tag. That's like telling the browser "Hey, when you see THIS -> <p>, paint it like THIS -> bold"

OK, next. I see you closing the </body> tag, but I don't see you opening it, which is why it would be very surprising if it worked.

I read somewhere that you wanted to have transparency, somehow, right? I don't see it anywhere in the CSS code. You need to include this:

opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */

See, IE9, Firefox, Chrome and Safari (and others) use "opacity" to display transparency. IE8 and earlier use that filter, so your code is cross-browser, you use both statements. Opacity goes from 0.0 (clear) to 1.0 (opaque); Alpha goes from 0 (clear) to 100 (opaque).

So, this is all very very very basic. You should read the documentation. See here: W3 CSS
author=Large
If that works, I'd be stumped.

You have 3 ways of using CSS, but I'm only going to talk about 2 of them: CSS in the HTML and importing CSS. You will be using the first one. The other one involves having an external CSS document and importing it into the HTML doc.

To use CSS declarations, you use the <style> tag. In it, you declare how the different HTML blocks or components (body, p, a, div, etc) will be shown. You can ALSO do this in each individual HTML tag (For example, <a href="..." style="...">), but I wouldn't reccommend it.

So, to address your code:

You open the <style> tag (Which is done inside the <head> tag)... but you don't close it; do it with </style> (HAH!). In it, you declare the properties for the <body> element. You do it by writing the properties inside brackets (You're doing it right). Each declaration needs to end with a ";".

See, if you were, for example, to write:

p {
font-weight:bold;
}

then, in every instance of <p> (paragraph) of your HTML document, your text would be bolded. All you have to do is USE the <p> tag. That's like telling the browser "Hey, when you see THIS -> <p>, paint it like THIS -> bold"

OK, next. I see you closing the </body> tag, but I don't see you opening it, which is why it would be very surprising if it worked.

I read somewhere that you wanted to have transparency, somehow, right? I don't see it anywhere in the CSS code. You need to include this:

opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */

See, IE9, Firefox, Chrome and Safari (and others) use "opacity" to display transparency. IE8 and earlier use that filter, so your code is cross-browser, you use both statements. Opacity goes from 0.0 (clear) to 1.0 (opaque); Alpha goes from 0 (clear) to 100 (opaque).

So, this is all very very very basic. You should read the documentation. See here: W3 CSS

That musta been a bad copy, heh. Here's what I actually have...

<html>
<head>
<style>
div.background
{
width:1000px;
height:1000px;
background:url(http://rpgmaker.net/media/content/users/19029/locker/Dragon_Quest.jpg) repeat;
background-repeat:no-repeat;
border:20px solid black;
background-position:center;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.2;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;

}
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p><b>THIS IS LJINK
</p>
</b>
</div>
</div>

</body>
</html>


I've been to that site as well, I even copied templates and just inserted the link to the image. To no avail. I edited the source code by viewing the source of my webpage, to no avail. I know it's something I'm doing because it works for everyone else... I tried just copying and pasting this in the box. It says it updated but absolutely nothing shows for it. Do I have to wait or something? It doesn't seem like that should happen though... I dunno.
I love web design and css! Your code works for you in your HTML document because you are able to apply your classes. Just so you know, in your CSS you do not have to or need to put "div.background". The class is called background, so you really should just call it ".background". In your game page profile, you are not able to (at least I don't see a way to edit the HTML code). So what I did, is I looked at the source code.

The <div> that contains the background picture/color is the id called "body". So you need to modify the body ID selector.

This CSS rule changed my background image to repeat over and over on the page of one of my projects.


#body {
background-image: url(http://rpgmaker.net/media/content/users/17786/locker/ZCBG.png);
background-repeat: repeat;
}




You can change that to fit your needs! :)
Read this as well: Article in RMN

Read the comments section because some selectors were changed and the original tutorial does not reflect them.
author=Orias_Obderhode
I love web design and css! Your code works for you in your HTML document because you are able to apply your classes. Just so you know, in your CSS you do not have to or need to put "div.background". The class is called background, so you really should just call it ".background". In your game page profile, you are not able to (at least I don't see a way to edit the HTML code). So what I did, is I looked at the source code.

The <div> that contains the background picture/color is the id called "body". So you need to modify the body ID selector.

This CSS rule changed my background image to repeat over and over on the page of one of my projects.


#body {
background-image: url(http://rpgmaker.net/media/content/users/17786/locker/ZCBG.png);
background-repeat: repeat;
}




You can change that to fit your needs! :)


Okey doke, I'll give it a try. Thanks.
You don't need to worry about the html tags or whatever when editing your custom gameprofile CSS on RMN. You just need to post the styles right into that textbox we provide you.

So yeah, like Orias_Obderhode said, you only need to worry about defining the custom style you want for the various IDs and classes available to you in gameprofiles.

some other background examples:

#body { background: url("[url]http://rpgmaker.net/media/content/users/105/locker/map0001_2a.png[/url]") repeat !important; }

#body { 
background: url("[url]http://rpgmaker.net/media/images/layout/transparent_grid.png[/url]") repeat-x scroll 0 0 #0066CC !important;
}

#body {
background-color: #000000 !important;
background: url("[url]http://rpgmaker.net/media/images/events/bq_tng/star-tile-far-away.jpg[/url]") fixed;
}

#body {
background-color: #D0F8F8 !important;
background: url("[url]http://rpgmaker.net/media/content/users/105/locker/background248.gif[/url]");
background-repeat: repeat-x;
background-position: bottom;
}

EDIT: yikes RMN's BBC system is trying to be smart. Maybe quote this post to see what I did. In the code above, there SHOULDN'T be a bunch of URL] /URL] tags
author=kentona
You don't need to worry about the html tags or whatever when editing your custom gameprofile CSS on RMN. You just need to post the styles right into that textbox we provide you.

So yeah, like Orias_Obderhode said, you only need to worry about defining the custom style you want for the various IDs and classes available to you in gameprofiles.

some other background examples:

#body { background: url("[url]http://rpgmaker.net/media/content/users/105/locker/map0001_2a.png[/url]") repeat !important; }

#body { 
background: url("[url]http://rpgmaker.net/media/images/layout/transparent_grid.png[/url]") repeat-x scroll 0 0 #0066CC !important;
}

#body {
background-color: #000000 !important;
background: url("[url]http://rpgmaker.net/media/images/events/bq_tng/star-tile-far-away.jpg[/url]") fixed;
}

#body {
background-color: #D0F8F8 !important;
background: url("[url]http://rpgmaker.net/media/content/users/105/locker/background248.gif[/url]");
background-repeat: repeat-x;
background-position: bottom;
}

EDIT: yikes RMN's BBC system is trying to be smart. Maybe quote this post to see what I did. In the code above, there SHOULDN'T be a bunch of URL] /URL] tags

So you don't wanna see the tags? If so, they're there. So now that I know that the site takes care of html automatically this should do the trick right?

#body {
background-color: #000000 !important;
background: url("http://rpgmaker.net/media/content/users/19029/locker/Dragon_Quest.jpg") fixed;
}


'Tis the background that I'm using but it shows up gray... dark gray. I read the article and you said that shift+F5 should apply the CSS changes but I don't see anything that's changed.

I'm pretty sure the double quote is invalid. Try it with single quote.
author=Large
I'm pretty sure the double quote is invalid. Try it with single quote.

Like this?

#body {
background: url('http://rpgmaker.net/media/content/users/19029/locker/Dragon_Quest.jpg') fixed;
}


I even tried this in a htm file and it worked there.

#body
{
background-image:url('http://rpgmaker.net/media/content/users/19029/locker/Dragon_Quest.jpg');
background-repeat:no-repeat;
background-size:100%;
}


Because it still isn't working. I know something is happening because when I apply it the background turns gray. When I delete it it goes back to being blue again. I even type it in on W3 schools on their editor and it shows up just fine. Here's the file that I have obviously marked up. Click Here What the heck is going on? Is there a size limit?
OKAY, I got it to work. The URL tags and the quote were the problem! THANKS Orias_Obderhode, Large, and Kentona! I guess I wont bother you guys and see if I can figure out this table opacity thing...
Pages: 1