Help with transparency, and background images.

[kbowen0188]

Hey there. I am super new to MyBB, but I am loving it so far. This is all a new step for me in my computer knowledge, as I have never used a web host, any kind of file server, any kind of FTP software, and definitely never any of the MyBB stuff.

So, hi! Thanks for helping me out!

Alright, so, here is where I have gotten so far.

http://seconddawn.webuda.com/forum/index.php

Now, here is what I want to do. Check out this link, our Wiki.

http://seconddawn.wikia.com/wiki/Second_Dawn_Wiki

Alright, so! Notice how the Wiki has a light purple transparent area down the middle of the screen, where the texts and images are placed? If possible, I would like to take the current skin I have, trim all the excess white off the edges, make the white transparent, and add a background.

So, take the light purple of the Wiki, and replace it with our white forum. Then, make the white transparent, just a tad, and add a background image. Probably the same one as the Wiki.

Possible?

[Tindris]

This is possible and not very difficult. First off you need to upload the images to the images file on your MyBB installation.

You then need to edit the themes global CSS and add the following to the body tag.

background: url(images/nameoffile.jpg);
background-repeat: no-repeat;
background-attachment: fixed;

You will then need to change add the following code to #content, again in global CSS.

background: #fff;
opacity: .70;
-khtml-opacity: .70;
-moz-opacity: .70;

That should do the trick.

[kbowen0188]

Thank you for your help!

Alright, the background image code works perfectly.

http://seconddawn.webuda.com/forum/

However, the transparency code didn't work at all. Something else conflicting with it, perhaps? I can post the entire style sheet, if I need to.

Also, is there a way to slim down the black bar header and footer? I want to chop all that excess black off.

[Tindris]

Yes, the conflict is the background:white; in the #container. Remove that and it will work. The height of the header can be changed in the #header tag. (Adjust the height:80px But that will cause issues with the elements you have on the header.

[kbowen0188]

Perfect, thank you!

Just one last question! Well, two.

When I say "slim down" the header and the footer, I actually mean make it less wide. I want to trim off the left and right sides of the black bars that are the header and the footer. If I change the "width" attribute, that pushes the header/footer to the side. Any ideas?

Also, how do you guys know this stuff? Is it just practice, or is there somewhere I can learn this? Or do I just need to browse the forums a lot?

[Tindris]

Oh ok, you want to place the header within the container. If you go into the MyBB templates and go into the header.php template then find <div id="container">. Copy it, delete it and paste it above the <div id="header"> tag.

It is practise, time and learning. Read online coding tutorials, start with HTML and CSS then move on from there.

[kbowen0188]

Thank you! I appreciate it! This is solved. <3