HomeMottie's Help SiteResourcesSupport Tickets
Sign Up! • Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help. If you need to report a problem or want to make a feature request, please send in a support ticket.
Available Forums
Forums : Pimp My Site! > Guild Progression box
Prev 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15Next
RLMariz (Guild Admin) 5/28/2008 3:42 AM EST : RE: Guild Progression box link

RLMariz
Posts: 310
Fingers of Fury!
I have it in the progression box, beneath a ventrilo code that I somehow miraculously got working. I don't think I understand fully how the Custom Style Sheet works, and the banner. I am decently sure that is the problem. I have kind of picked up the job of running the website from someone else, and I am a work in progress. I went into admin and into site style and then went into custom style sheet from there and pasted the code, and then the same for banner, but when I went to preview, it just listed the code instead of the actual progression box. Also, it somehow turned my background white on my whole site. When you alter that Custom Style Sheet from the admin box there, how do you specify which page you are wanting to alter? Or can you?

Sorry if I sound like a newb.. it's because I am a newb.

Mariz.

No alternate text supplied.

No alternate text supplied.

No alternate text supplied.
Top • Bottom

Mottie (MVP) 5/28/2008 4:30 AM EST : RE: Guild Progression box link
GuildPortal MVP
Mottie
Posts: 3872
Zomgawsh Poster
Ok, first off when using the editor... look in the bottom left corner of the edit box you'll see three icons: (design) (HTML) (Preview), click on the icon before posting it.

The Banner area is just a place to put code or images that are usedon every page of your forum. It's not needed anymore thanks to Pentamorous

Now for the code, if you've never enabled your CSS StyleSheet, GuildPortal adds a default one. Once you enable it, it starts out blank. I don't have the exact original, but I pieced together this basic CSS... add this to your Custom StyleSheet only if it started out blank when you first enabled it.

Custom StyleSheet (basic)
html, body, div, p, table, td, form, img, input, select {
 font-family: Verdana,Tahoma,Segoe,sans-serif;
 font-size: 10pt;
}

body {
 background-color: #000000;
}

form {
 border: medium none;
 padding: 0px;
 margin: 0px;
}

img { border: none; }

a:link, a:visited { color: #ffcc00; text-decoration: none; }
a:hover { color: #ffffff; text-decoration: none; }
a:active { color: #cccc00; text-decoration: none; }

.MessageAuthorInfoCell1 { vertical-align: top }

.StateBar {
 color: #ffffff;
 background-color: #000000;
 border: 1px solid #222222;
 text-align: center;
 padding: 5px;
}

.AltGridRow {
 color: #ffffff;
 background-color: #222222;

 border: 0px;
}

.NormGridRow {
 color: #ffffff;
 background-color: #000000;
 border: 0px;
}

.ContentBox {
 color: #ffffff;
 background-color: #000000;
 border: 0px;
 padding: 0px;
}

.ContentBoxTitle {
 color: #ffffff;
 font-weight: bold;
 text-align: center;
 border: 0px;
 margin: 0px;
 padding: 5px;
}

.ContentBoxBody {
 color: #ffffff;
 background-color: #000000;
 padding: 5px;
}

.ForumCategoryHeader {
 color: #ffffff;
 font-size: 120%;
 background-color: #000000;
 padding: 8px;
}

.ContentBoxTitleNoBackground {
 color: #ffffff;
 margin: 0px;
 padding: 0px;
}

Edit: Opps left out the body part at the top

>>help-site<<
Top • Bottom

RLMariz (Guild Admin) 5/28/2008 4:34 AM EST : RE: Guild Progression box link

RLMariz
Posts: 310
Fingers of Fury!
Ok that part is done. I clicked enable at the bottom there and it made my background go white again, and somehow I lost the running man icon I had there before, but if it will let me understand, I will deal with that later. How do you go from having that basic CSS to the one mentioned here? Is it added to that one? Sorry for taking so much of your time, I am just full of determination now.

Mariz.

No alternate text supplied.

No alternate text supplied.

No alternate text supplied.
Top • Bottom

Pentamorous (New Admin) 5/28/2008 4:34 AM EST : RE: Guild Progression box link
Pentamorous
Posts: 2317
Zomgawsh Poster
=====
EDIT:   Oh Hi Mottie.    Looks like you replied first, and more better too. lol
=====


Enabling the custom style sheet on GP will disable some (maybe most) of the site settings made in the admin screens.

You can get the same look for your site with a custom style sheet, but if you decide to use it, you should probably be ready to commit to using it for every style setting on your site.

The Admin guild has a pretty decent section on CSS and which tags affect which areas of your site.  http://www.axiomfiles.com/docs/AdminsGettingStartedWithGP.pdf


I've used CSS for everything on my site:  http://quintessential.guildportal.com

If you want to use pieces of it I'll see if it can be pasted in this thread:


----------


html, body, div, p, table, td, form, img, h1, h2, h3, h4, h5, h6, input, select {
    font-family: Tahoma,Verdana,Segoe,sans-serif;
    font-size: 8pt;
}

body {
    background-color: #FFFFFF;
}

form {
    padding: 3px;
    border: none;
}

img {
    border: none;
}

hr {
    color: #CCCCCC;
}


A:link
{
    color: #101066;
    text-decoration: none;
}


A:visited
{
    color: #101066;
    text-decoration: none;
}

A:hover
{
    color: #101066;
    text-decoration: underline;
}

A:active
{   
    color: #101066;
    text-decoration: underline;
}




.TabBar {
    margin: 0px;
    padding: 0px;
}

.SelectedTab {
    background-color: #555566;
    font-weight: bold;
    font-size: 10pt;
    color: #FFFFFF;
    border: inset 1px #101066;
    text-align:
    center;padding: 5px;
}


.SelectedTab A:link {
    color: #F0F0FF;
    text-decoration: none;
}


.SelectedTab A:visited {
    color: #F0F0FF;
    text-decoration: none;
}

.SelectedTab A:hover {
    color: #F0F0FF;
    text-decoration: none;
}

.SelectedTab A:active {
    color: #F0F0FF;
    text-decoration: none;
}



.UnSelectedTab {
    background-color: #EEEEEE;
    font-weight: bold;
    font-size: 10pt;
    color: #000000;
    border: solid 1px #CCCCCC;
    text-align: center;
    cursor: pointer;
    padding: 5px;
}


.UnSelectedTab A:link {
    color: #101066;
    text-decoration: none;
}


.UnSelectedTab A:visited {
    color: #101066;
    text-decoration: none;
}

.UnSelectedTab A:hover {
    color: #101066;
    text-decoration: none;
}

.UnSelectedTab A:active {
    color: #101066;
    text-decoration: none;
}



.UnSelectedTabMo {
    background-color: #CCCCDD;
    font-weight: bold;
    font-size: 10pt;
    color: #000000;
    border: solid 1px #CCCCCC;
    border-color: #CCCCCC;
    cursor: pointer;
    text-align: center;
    padding: 5px;
}


.UnSelectedTabMo A:link {
    color: #101066;
}


.UnSelectedTabMo A:visited {
    color: #101066;
}

.UnSelectedTabMo A:hover {
    color: #101066;
}

.UnSelectedTabMo A:active {
    color: #101066;
}

.AltGridRow{
    background-color: #;color: #000000;
}

.NormGridRow{
    background-color: #FBFBFA;color: #000000;
}

.ContentBox {
    background-color: #EEEEEE;
    border: solid 1px #CCCCCC;
}

.ContentBoxTitle {
    padding: 5px;background-color: #CCCCDD;
    color: #000000;
}

.ContentBoxBody {
    background-color: #EEEEEE;color: #000000;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.StateBar {
    background-color: #EEEEEE;
    color: #000000;
    text-align: center;
    padding: 5px;
}

.ForumCategoryHeader {
    background-color: #EEEEEE;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #CCCCCC;
    padding-left: 5px;color: #000000;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.MessageAuthorInfoCell1 {
        vertical-align:top;
        text-align:left;
}

.MessageBodyCell1
{
        vertical-align:top;
        text-align:left;
}


#wrapper
{
        width:100%;
        border:1px solid #CCCCCC;;

}

#wrapper div:hover { background-color: #FFFFFF; }



#ExpandHeader
{
        width:100%;
        margin:0 auto;
        cursor:pointer;
        background:#f2f2f2;
        color: #101066;
        padding:0px;
}


.ExpandBody
{

        background-color: #FFFFFF;
        padding: 20px;

}


/* --------------------------------------- */
/* Guild Progression box Style */
/* Inspired by "Motie" http://admins.guildportal.com/Guild.aspx?GuildID=3780&ForumID=22042&TabID=27537&TopicID=6975112&Page=1#34985758 */
/* --------------------------------------- */

.progBox {font-size: 100%; padding:4px; color: #101066;}

/* Burning Crusade */
.s_Kara {background: url(http://www.axiomfiles.com/Files/32850/kara.gif) left top no-repeat; height:32px; padding-left:30px; font-size: 90%; width:100% }
.s_ZulAman {background: url(http://www.axiomfiles.com/Files/32850/za.gif) left top no-repeat; height:32px; padding-left:30px; font-size: 90%; width:100% }
.s_DLKazzak {background: url(http://www.axiomfiles.com/Files/32850/dlk.gif) left top no-repeat; height:32px; padding-left:30px; font-size: 90%; width:100% }
.s_Doomwalker {background: url(http://www.axiomfiles.com/Files/32850/dmw.gif) left top no-repeat; height:32px; padding-left:30px; font-size: 90%; width:100% }
.s_Gruul {background: url(http://www.axiomfiles.com/Files/32850/gruul.gif) left top no-repeat; height:32px; padding-left:30px; font-size: 90%; width:100% }
.s_Mags {background: url(http://www.axiomfiles.com/Files/32850/mag.gif) left top no-repeat; height:32px; padding-left:30px; font-size: 90%; width:100% }
.s_Serpent {background: url(http://www.axiomfiles.com/Files/32850/coilfang.gif) left top no-repeat; height:32px; padding-left:30px; font-size: 90%; width:100% }
.s_theEye {background: url(http://www.axiomfiles.com/Files/32850/tempest.gif) left top no-repeat; height:32px; padding-left:30px; font-size: 90%; width:100% }
.s_MtHyjal {background: url(http://www.axiomfiles.com/Files/32850/cot3.gif) left top no-repeat; height:32px; padding-left:30px; font-size: 90%; width:100% }
.s_BlackTemple {background: url(http://www.axiomfiles.com/Files/32850/btemp.gif) left top no-repeat; height:32px; padding-left:30px; font-size: 90%; width:100% }
.s_Sunwell {background: url(http://www.axiomfiles.com/Files/32850/sunwell.gif) left top no-repeat; height:32px; padding-left:30px; font-size: 90%; width:100% }

/* Original WoW */
.s_ZG {background: url(http://www.axiomfiles.com/Files/32850/zg.gif) left top no-repeat; height:32px; padding-left:30px; font-size: 90%; width:100% }
.s_AQ20 {background: url(http://www.axiomfiles.com/Files/32850/aq20.gif) left top no-repeat; height:32px; padding-left:30px; font-size: 90%; width:100% }
.s_Ony {background: url(http://www.axiomfiles.com/Files/32850/onx.gif) left top no-repeat; height:32px; padding-left:30px; font-size: 90%; width:100% }
.s_MC {background: url(http://www.axiomfiles.com/Files/32850/mc.gif) left top no-repeat; height:32px; padding-left:30px; font-size: 90%; width:100% }

.hide { display: none; width:100%; }
.show { display: inline; width:100%; }
/* --------------------------------------- */
Top • Bottom

Mottie (MVP) 5/28/2008 4:41 AM EST : RE: Guild Progression box link
GuildPortal MVP
Mottie
Posts: 3872
Zomgawsh Poster
To add your background image back, you'll need the url of the image first, then place the address inside the brackets of the "url" (replace the green text)

body {
 background: #000000 url(http:// );
}
>>help-site<<
Top • Bottom

RLMariz (Guild Admin) 5/28/2008 5:06 AM EST : RE: Guild Progression box link

RLMariz
Posts: 310
Fingers of Fury!
Ok, I got the running man back on the background (Thank you Mottie, you rock!) and I have CSS enabled. I did push the <> at the bottom when applying the code for the progression box, but I am still getting gibberish. I went over the guide mentioned before. Should I go through it in depth to figure this out and stop bugging you guys? I appreciate the help you have all given me so far, but I am wondering if I am not a lost cause. I hate to take up all your time.

Mariz.

No alternate text supplied.

No alternate text supplied.

No alternate text supplied.
Top • Bottom

RLMariz (Guild Admin) 5/28/2008 5:17 AM EST : RE: Guild Progression box link

RLMariz
Posts: 310
Fingers of Fury!
Ok, that did it! You guys rock! I went back and looked at what Pentamorous had posted, found his code that he had for the progression box (site looks awesome, by the way) copied that over and pasted that on the page and poof it popped up.
Now I just have to find the color and change it for the wording of the pop up stuff, because black on black doesn't come out real well. Thank both of you for the help!

Mariz.

No alternate text supplied.

No alternate text supplied.

No alternate text supplied.
Top • Bottom

Mottie (MVP) 5/28/2008 5:41 AM EST : RE: Guild Progression box link
GuildPortal MVP
Mottie
Posts: 3872
Zomgawsh Poster
Hehe, glad I could help... I looked at your site again. I guess I left out the tabs colors and a bunch of other stuff LOL. Look at the CSS that Pentamorous posted above and add everything that says tab

*waves back at Pentamorous*
>>help-site<<
Top • Bottom

Mottie (MVP) 6/1/2008 10:29 AM EST : RE: Guild Progression box link
GuildPortal MVP
Mottie
Posts: 3872
Zomgawsh Poster
I added a few things to this script so the tooltip will have color added... changes made to original post too

Custom StyleSheet
.killedBoss { color:#888888; text-decoration: line-through; }
.toKillBoss { color: #dddddd; text-decoration: none; }
.killed { color: #8f0000; }

Content Box (replace only this function)
// *************************************
// Don't change anything below this line
// *************************************
function showKills (list,kills) {
var i = 0;
var tipstr = "<table>";
 for (var j=0; j<list.length; j++) {
  if (kills[j] == 1) {
   var tmp = "<td class=killedBoss>" + list[j] + "</td><td class=killed>(Killed)";
   i++
  } else {
   var tmp = "<td class=toKillBoss>" + list [j] + "</td><td>";
  }
 tipstr += "<tr>" + tmp + "</td></tr>";
 }
 tipstr += "</table>";
 return tipstr;
}

>>help-site<<
Top • Bottom

TheRatedRGuy (New Admin) 6/12/2008 9:46 AM EST : RE: Guild Progression box link

TheRatedRGuy
Posts: 176
Posts With Wolves
This is so great! thank you all for sharing.

I do some webpage design and think I will become comfortable with it eventually.

However is there a very basic tutorial page (I cant seem to find one) that describes how to create an empty content box and where to insert the css etc using guild portal?

Im sorry for the novice question- Ive been looking through the posts for an "intro to inserting content boxes/elements" but I havent had my coffee today.


*Edit I think I might have found a very helpful thread here. Ill let you know how it goes in a few moments.



**Edit Okay Ive read that if you change the master css that it takes the entire background to white, which it did to mine. I also read that if you manipulate the master css that you then have to manipulate all of the admin related customization via css to get things back to how you originally created.

Is there a way keep admin based custom color/text changes and just simply change what you would like to show up within the content boxes without having to re design your entire site via css on gp?


I have a guild progression box on the left:

http://www.guildportal.com/Guild.aspx?GuildID=223672&TabID=1885132
Top • Bottom

Prev 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15Next
Admins Online
There are   members online.
GuildPortal Home • Frequently Asked Questions • Videos • Recent Updates • Support • Terms of Use • Privacy Policy
GuildPortal™ Axiom Shift, LLC.  All Rights Reserved. All game-related trademarks are properties of their respective owners. Several adorable monkeys were harmed during the creation of this site, and for that, we are wholly unapologetic.
So-and-so has logged on!
%title%
%message%