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! > Design? Oh god help....
vdpruett (New Admin) 11/3/2009 3:46 PM EST : Design? Oh god help....

vdpruett
Posts: 8
Getting Started!

I am trying desperately, DESPERATELY, to figure out how to design my webpage for my guild.  We are a teeny, itsy bitsy guild, and I'm it.  I have beautiful images saved to my hard drive, even some very lovely ambient sound file urls....but I can't get them to go in.  I can't upload my pictures.  I can't get the stupid page to show anything but over used generic layouts and themes provided for me.  I've read the tutorial, but since I've never done this before....it's like reading greek.  I desperately want beautiful things for my guildmates.....quest trackers, info links, neat stuff!  ~throws herself on the chair~  I'm lost.  Hopelessly, hopelessly lost.  Please help.  Anyone?

~Aelondra, Chainfire Guild Boss
TopBottom

Mottie (MVP) 11/3/2009 3:55 PM EST : RE: Design? Oh god help....
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi vdpruett!

Which part of the process are you getting stuck on?

I've tried to put together a help site (link in my sig) to make the process a bit easier, but it would help if you could show us where you are stuck and what you want to do. 
TopBottom

Draylor (New Admin) 11/3/2009 6:10 PM EST : RE: Design? Oh god help....
Draylor
Posts: 424
Fingers of Fury!

Do you have the URL also? I could assist some (Not as much as Mottie Mottie = Guru here We love em!!

~Draylor
TopBottom

vdpruett (New Admin) 11/3/2009 10:50 PM EST : RE: Design? Oh god help....

vdpruett
Posts: 8
Getting Started!

I'm completely CSS illiterate.  I only know what it is because there is a big box for it that says CSS...I can't find a pretty banner image small enough to NOT make the page look warped and amateur...um....Background images, okay...I can upload one....how do I make it look seamless and continous in the background instead hidden and stumpy?  Oh!  And don't forget the themes!  I want nice boxing and to arrange the stuff just so.....I don't know how to do ANY of it.  I don't know where to find the stuff on the internet....and Mottie...I tried reading your website.  I really really did!  It's a neat website.  Unfortunately it wasn't the "guild portal website building for complete morons" version....so I still don't understand anything.

I'm the worst novice ever.

Yeah...I'm going to go find a small, dark corner and stick my head in it now.
TopBottom

Mottie (MVP) 11/3/2009 11:56 PM EST : RE: Design? Oh god help....
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi vdpruett!

Well you have two options:
  1. Try to learn CSS and HTML.

    Start with the basics by finding some tutorials online...

    • W3Schools has a great overview of both HTML and CSS, but I wouldn't say it's the best starting point
    • Also look at w3.org.

    Or be specific about your problem, like in the last post you asked about adding a background image - if you're not using the control panel, you can add an entire page background as follows:
    body {
     background-color: #000000;
     background-image: url(http://my-hosting-site.com/my-background-image.jpg);
     background-position: center center;
     background-repeat: no-repeat;
     background-fixed: fixed;
    }
    or using the shortcut method:
    body { background: #000000 url(http://my-hosting-site.com/my-background-image.jpg) center center no-repeat fixed; }
    • Alter the color of the background by changing the hex color code (in blue) or make it "transparent"
    • Change the image URL by changing the URL in orange.
    • Change the background position as follows...  "x y".

      • Replace the x with "left, center, right or #% or #px" (#% with any number from 0% to 100% and #px with any number within the width of the browser window)
      • Replace the y with "top, center, bottom, #% or #px".

    • If you want you image to repeat, you can use "no-repeat, repeat-x or repeat-y" or leave it out to have it repeat both x and y.
    • To have the image not scroll with your page, set the image to fixed... leave it out if you want it to scroll with the page.

  2. Pay someone else to do all the work for you (like GuildHelper).
Of course the first option is the cheapest and the most time consuming, but we are here to help 
TopBottom

Josewales (New Admin) 11/4/2009 5:58 AM EST : RE: Design? Oh god help....
Josewales
Posts: 4064
Zomgawsh Poster

If your are new to GP I suggest clicking on everything in the control box...next thing u are saying "O cool this does that".  Then when your site is a complete mess after a week or so, just reload a default template and start over...at this point you should know a bunch of new tricks:)  If you are not paying to remove ads then use a host like photobucket to store images for importing.  Dont try using your comp as a host hehe.  Anyways there are tons of tools here that can easily be learned by trial and error (except scripting of couse heh).
TopBottom

vdpruett (New Admin) 11/4/2009 8:08 AM EST : RE: Design? Oh god help....

vdpruett
Posts: 8
Getting Started!

um....so I need to copy and paste a long formula thing like what you have here and then go in and  change some of the little parenthesis  things to image urls?  What is a pixel?
TopBottom

Mottie (MVP) 11/4/2009 10:16 AM EST : RE: Design? Oh god help....
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi vdpruett!

Well, my example above was very specific to the background image of your site. You could copy and paste it, then make the changes you want, but it would be better if you learned what it is you are doing first. That way you also understand how to tweak it to do exactly what you want.

Honestly, at this point of your experience, it might be best to start out your site (if you are in a hurry to get it up and running) to stick with the modifying the site style through the control panel or pick a theme. Then make a test site and play with it. Take your time learning how to use HTML and CSS together. Don't rush in and try to do it all at once, you'll only get more confused.



As for a pixel, it's a dot on the screen. According to dictionary.com: a pixel is the smallest element of an image that can be individually processed in a video display system....

So, if your monitor resolution is 1024 x 768, that is the number of pixels you see, 1024 pixels from side to side and 768 pixels from top to bottom - you can multiply the two numbers together (1024 x 768 = 786432) to get the number of pixels that you see on your screen at the same time (786,432 pixels). Now if you change your resolution to 800 x 600, there are only 480,000 pixels on the screen at once, in the same area. What that means is the size of the pixel has actually changed, it's bigger! That's why when you read about printers, they report their resolution as dots (or pixels) using dots per inch (dpi) or dots per centimeter (dpcm) as they are more limited in changing their dot size (300 dpi, 600dpi, 1200 dpi, etc).

It's not used as much, but the pixel size on your screen also depends on your monitor size, so if you have a 21-inch monitor running at the following resolution you will see the corresponding dpi:
  1. 1024x768 pixels: This is equivalent to 61 dpi, vertically and horizontally.
  2. 1280x1024 pixels: 76.2 dpi horizontally, 81.3 dpi vertically.
  3. 1600x1200 pixels: 95.2 dpi, vertically and horizontally.
This doesn't usually mean anything until you need to print whats on your screen.


 
TopBottom

Draylor (New Admin) 11/4/2009 8:39 PM EST : RE: Design? Oh god help....
Draylor
Posts: 424
Fingers of Fury!

V,

        I'd start like Jose said - use the default Control Panel tools - learn where to add/remove stuff. After this you can move to what I call Hybrid mode (what I am at currently) where you use some control panel and some custom (Thank you Mottie as usual) - after this, you can move to full CSS/HTML. Mottie has a super nice Help Site (Click link in his Sig) and a resource thread <CLICK HERE> This is very useful ... Also use Photobucket (or another image hosting site) to place your images etc ... you can then (for example) upload say your banner, go under control panel - site wide style and paste the URL to your Banner Image click Save and boom it's now on your GP Site

~Draylor
TopBottom

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