Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Background Help
538251654_Inactive (New Admin) 1/15/2007 5:01 PM EST : Background Help

538251654_Inactive
Posts: 42
Becoming Adept!

Hello everyone!

I am ridiculously new to working with GuildPortal. I've been browsing through this forum, but all the help advice I've read just sails right over my head.

What I'm doing is creating a site for a guild that will be opening up sometime in the next few days. We're new enough to not even have a name/theme/ect, so bare with me when you visit the link and don't laugh too much.

Right now I have a screenshot saved that I'd like to apply as a background. Ideally I would like the background picture to cover the whole background, not repeat, and not mess up the basic layout that Guild Portal provides me with. I've tried a few things from this site, but I always get a repeating image (tiling?), and sometimes everything completely messes up: my boxes all go clear, font style changes, font colour changes, things move around, ect.

I have NO idea where to put code in, should I need it. I have NO idea how to make/write code. I need very basic, step by step instructions, if that's at all possible.

I'd love to have some help with this, but I understand if no one has the time. If you do help, please keep in mind I don't know things I imagine most children could figure out on their own.

Here is a link to the site: New Guild

Here is a link to the background picture I'd like to use for now (with proper credit until I obtain my own unique screenshot). Background Picture

My end goal is to have this picture as one big ol' happy background, and appropriately coloured-themed boxes and text, maybe with some box borders (no idea how I'll pull that off), and a banner. Somehow I'm going to try to wrangle my brain into figuring all this out over the next few days! ..good thing I'm an optimist!

Thank you in advance for your time,
-Denise
TopBottom

Neutrio (Guild Admin) 1/16/2007 12:03 PM EST : RE: Background Help
Neutrio
Posts: 165
Posts With Wolves

Denise:

To make a specific image your background & have it be stationary, you would have to use a Cascading Style Sheet (CCS).  Fortunately, GP makes it easy as they provide a way to have one using the Control Panel which they call a Custom Sytlesheet.

To do that:

1.  Login to your site with a SuperAdmin account -- i.e. your account
2.  Click on the Control Panel link in the top-middle of the page
3.  Click on the Styles & Colors link on the next page -- on the left side
4.  Click on the Custom Stylesheet link under the Advanced Style Settings heading
5.  Paste the following code into the text box:


BODY {
     BACKGROUND-IMAGE: url('http://i141.photobucket.com/albums/r42/Jaenia/WoW/07.jpg');
     background-repeat: no-repeat;
     background-position: top center;
     background-attachment: fixed;
}

6.  Checkmark/Enable the Enabled checkbox
7.  Click on the Save button
8.  Click on the OK button in the alert dialog that pops up
9.  Close the Control Panel web page -- your site will have already automatically applied the changes

NOTE:  If you notice other strange behavior, you may need more of the CSS elements in your CSS.  Best to just yell for help in the Forums again & provide links to your site and/or the afflicted area.

Enjoy!
Neutrio
Neverwinter:  Defenders of Neverwinter
      Production:  Heroes Inc

Test: Connectus Interruptus
TopBottom

538251654_Inactive (New Admin) 1/17/2007 7:02 PM EST : RE: Background Help

538251654_Inactive
Posts: 42
Becoming Adept!

Thank you so much for your reply! This was more than I expected to recieve, and I greatly appreicate it!

I do have a few more things to ask though, now that I've tried the provided instructions.

First off, is there something that could be included in the code to make that picture fit the whole screen? Or is this something I must do on my end, when saving and resizing the picture? I do not mean having the picture repeat, just so there is no confusion. I want one, big picture, if possible.

Secondly, is there a way to apply this background while still maintaining colour in the boxes of text on the page? Ideally, I'd like the boxes to be an orangey colour that goes with the picture, with the text inside, and the background picture showing around the boxes, if this makes any sense.. As it is now, when I try the code all the boxes go clear, and it seems to look incredibly unorganized this way, with this picture.

I know there was a guild site I stumbled across through this forum that had the same idea I'm looking to do. I'll search for it now, and if I find it I'll edit this post with a link to their site (I hope that's okay) as an example.

Again, thank you so much for your time, whoever reads this! And a big thanks again to Neutrio for taking the time to respond to my first post!

-Denise
TopBottom

538149821_Inactive (New Admin) 1/18/2007 3:44 AM EST : RE: Background Help

538149821_Inactive
Posts: 413
Fingers of Fury!

I'm still new to CSS, but I'm trying to learn.  Try putting the following in the CSS code and replace the colors with whatever color you prefer.  You can use the control panel color pickers to help you with the hex codes.  As for the background image, still trying to figure that one out.  Not sure if its possible with CSS.

.ContentBox {
BACKGROUND-COLOR: #ff6600;
BORDER-WIDTH: 2px 2px 2px 2px;
BORDER-STYLE: solid;
BORDER-COLOR: #993300;
PADDING: 5px 5px 5px 5px
}

.ContentBoxTitle {
BACKGROUND-COLOR: #993300;
}

TopBottom

Neutrio (Guild Admin) 1/18/2007 11:47 AM EST : RE: Background Help
Neutrio
Posts: 165
Posts With Wolves

Denise/Zeeliah:

This is my own $0.02(US) so take it for what it's worth ...

As to the picture, you could probably find some JavaScript code somewhere that might stretch out the picture but I probably wouldn't run it if there were such a thing.

If the picture was a "bitmap"/"raster" image -- .BMP, .PCT (I think GIFs & JPGs are too but I could be wrong as I'm not a graphics guy) -- it would just "pixelate" & look horrible.

If the picture was a "vector" image -- TIFF, PS (PostScript) -- then those can scale as long as something scales them -- i.e. code/program -- and then delivers/re-renders the end result in a GIF or JPG image that the web browser/client can render/display.

Again, if it was doable, I probably wouldn't do it & it would most likely require a non-GP service to render the result.  GP may not even allow that to happen either unless the service could produce a reliable HTML link to the picture.

I think the easiest thing to do would be to generate a picture the size you want -- at least width wise since your page will most likely not be constrained vertically.


As to the content boxes, Zeeliah has the right idea from my perspective regarding the .ContentBox CSS code.  You will have to use a color picker to try & match your box border, background & text colors to fit your color/design scheme.  I myself would try to pick colors that contrast the things behind & around it -- especially the text -- so that things are able to be distinguished and most importantly easily read.

Without a way to look at what you are indicating, it is difficult to paint a picture of what you mean by "... boxes go clear ..."

For the HI production site, it was really tough to do with just our 2 SG colors so if you have some more flexibility, I'd use that though I wouldn't go wild & make each button a different color & text in the titlebar another color, etc. ... just makes it harder to read & find stuff IMHO 

Good luck!
Neutrio
Neverwinter:  Defenders of Neverwinter
      Production:  Heroes Inc

Test: Connectus Interruptus
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%