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
Mottie (MVP) 11/20/2011 10:14 AM EST : CSS3 Gradients
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

I'm still learning css3 so I'm not much help with questions about it yet. But I found this gradient generator that allows you to add a background gradient to just about anything you want.



With this tool:
  • You can pick any of the presets (upper left), then modify the colors in the bar below the presets using an interface similar to photoshop!
  • You can change the orientation of the gradient in the dropdown below the Preview window (upper right).
  • Changing the size is for the preview only. And the IE checkbox is to see what people using IE would see - it's not a pretty!
  • Once you are done, copy the CSS from the from the box on the right and just paste it into your stylesheet (Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard) inside of any element definition, something like this:

    body {
       
    background: #000; /* remove this if it interferes with the new background gradients */
        color: #fff;
        font-familyVerdana,Tahoma,Segoe,sans-serif;
        font-size14px;
       
    margin10px
    ;
       
    /* PASTE IN THE NEW CSS HERE, and remove the background: #000 above if you want */
    }


    Or any other page element

    .BannerArea {
        width: 100%;
       
    /* PASTE IN THE NEW CSS HERE, and remove the background: #000 above if you want */
    }

  • Please note that you might have to change the color format from "rgba" to "rgb" or "hex" for older browsers, and you'll need to do a little extra work to get IE9 to work (you'll see it when you check the box at the bottom). So the message of this post would be, use a modern browser (*cough* not IE *cough*)
TopBottom

Mottie (MVP) 11/20/2011 10:19 AM EST : CSS3 Warp Text
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Here is another site that allows you to generate warped text!



It will generate the HTML needed to make the text, all you need to do is add it to any Free Form Text/HTML widget!
TopBottom

Mottie (MVP) 11/20/2011 10:30 AM EST : CSS3 <3
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

I guess I'm going to add a link here to another css3 post I made named "CSS3 Please!" which includes css to do tons of other things! Just not in IE.
TopBottom

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