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.
Available Forums
Forums : Pimp My Site! > Adding a Custom StyleSheet
Mottie (MVP) 6/12/2008 11:43 AM EST : Adding a Custom StyleSheet link
GuildPortal MVP
Mottie
Posts: 3872
Zomgawsh Poster

Get to the Custom CSS StyleSheet as follows:

Control Panel > Custom HTML & Script > Custom CSS > Full Custom CSS or CSS Additions to Standard
*NOTE* This post describes how to add Full Custom CSS. Since the time of writing this post, GuildPortal has added a "CSS Additions to Standard" tab which makes it much easier to add snippets of custom CSS instead of needing to add Full Custom CSS then adding the snippet to the end like you needed to do at the time of this post. So, if you really really want to add Full Custom CSS, then follow these directions, otherwise I'd now recommend using the CSS Additions tab.

Quick Summary

GuildPortal turns off your default CSS when you enable your custom one.
  1. View Source of your page.
  2. Copy (Ctrl-C) the CSS file name (in blue) thats within the top 25 lines of the source
         <link rel="stylesheet" media="screen" type="text/css" href="/UI/GpCss.ashx?stylesheet=Guild111111_1.css" />
  3. Middle mouse button click on this link (opens a new tab) and then paste (Ctrl-V) the filename to the end, then reload the page.
  4. Select all (Ctrl-A) the CSS then copy (Ctrl-C) it.
  5. Paste this code into the input box on CleanCSS.com, choose High compression then process the CSS.
  6. Paste this cleaned up CSS into your Custom StyleSheet, then add any new CSS at the end.
  7. Enable the Custom StyleSheet and Save.
*Note: After you've done this and find out later that you can't figure out how to change something in the CSS, you can always disable your Custom StyleSheet, make the changes, then follow these instructions and replace the original CSS you copied into the custom box.

Detailed Instructions

Ok, if you have a brand spankin' new and shiny GuildPortal website, you probably don't have a Custom CSS StyleSheet enabled... Oh by the way, CSS stands for Cascading Style Sheets... Anyway, all websites have a default CSS, when you add colors or backgrounds the site automatically updates that CSS. BUT, if you enable a Custom StyleSheet, it turns off that default CSS and only looks at what you have in the Custom CSS box. So, you need to copy that first!

Start out on any page of your website. Use the browser's "View Source" and within the top 25 lines you'll see line like this:

<link rel="stylesheet" media="screen" type="text/css" href="/UI/GpCss.ashx?stylesheet=Guild111111_1.css" />

Highlight and copy (Ctrl-C) the CSS filename in blue. Now, click on the middle mouse button on this link (opens a new browser tab) and then paste (Ctrl-V) the filename to the end, then reload the page. You should see a line that starts out with "html, body, div, p, td, form, img, h1, h2, h3, h4, h5, h6, input, select {..." and goes off the page (see example below).

Example CSS from the GuildPortal CSS file:

html, body, div, p, td, form, img, h1, h2, h3, h4, h5, h6, input, select {font-family: Verdana,Tahoma,Segoe,sans-serif;font-size: 9pt;}table, th, td { font-size: 1em !important; }.SmallDisplay { font-size: 0.9em !important; }ul { list-style-type: square; margin-top: 2px; margin-bottom: 5px; text-indent: 5px; margin-left: 4px; padding-left: 10px }li { margin-left: 5px; text-indent: 2px; }body {margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;background-color: #100E11;}div.PageWrapper {width: 99%;}form {padding: 3px;border: none;}img { border: none; }hr { border: 0; height: 2px; background-color: #2d2d2d; color: #2d2d2d; }.BannerArea {margin-top: 10px;text-align: center;-webkit-text-stroke: 1px #2d2d2d;text-shadow: 2px 2px 2px black;color: #c8c8e8;font-size: 2.5em;font-weight: bold;margin-bottom: 10px;}div.ContentWrapper {margin-top: 5px;}div.PageFooter {color: #c8c8e8;text-align: center;}.Tab { }.SelectedTab, .UnSelectedTab, .UnSelectedTabMo { border: solid 1px #2d2d2d; -moz-border-radius: 2px; -webkit-border-radius: 2px; text-align: center; padding: 4px; margin-left: 3px; font-weight: bold; }.TabBar { -moz-border-radius: 2px; -webkit-border-radius: 2px; margin: 0px;padding: 0px; padding-right: 1px;}.Tab { text-align: center; }.FirstTab div { margin-left: 0px; }.SelectedTab {background-color: #2d2d2d;color: #daca92;}.UnSelectedTab {background-color: #000000;color: #daca92;cursor: pointer;}.UnSelectedTabMo {background-color: #2d2d2d;color: #daca92;cursor: pointer;}.MoGridRow, .AltGridRow, .NormGridRow, .ActiveDiv, tr.AltGridRow td, tr.NormGridRow td, tr.MoGridRow td { padding-top: 2px; padding-bottom: 4px; padding-left: 2px; padding-right: 2px; }.MoGridRow { text-align: left; }.MessageAuthorLinkCell1 A:link, .MessageSubjectCell1 A:link { color: #daca92; }.MessageTopBottomCell1, .MessageAuthorInfoCell1 { padding: 3px; text-align: center; border-right: solid 1px #2d2d2d; }.MessageBodyCell1 { padding: 3px 2px 0px 3px; }.MessageAuthorInfoCell { overflow-x: hidden; overflow-y: hidden; }.PostItem1 div.ForumCategoryHeader { -moz-border-radius: 5px; -webkit-border-radius: 5px; }.PostItem1 { -moz-border-radius: 5px; -webkit-border-radius: 5px; }.AltGridRow{ background-color: #222222;color: #daca92;}.MessageAuthorInfoCell1, .MessageTopBottomCell1 {background-color: #222222;color: #daca92;}.NormGridRow{background-color: #111111;color: #daca92;}.ActiveDiv { }.ContentBox { margin-bottom: 5px; background-color: #000000;border: solid 1px #2d2d2d; padding-bottom: 2px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}.ContentBox, .ForumCategoryHeader { -moz-border-radius: 2px; -webkit-border-radius: 2px; margin-right: 1px; }.ContentBoxTitle { font-weight: bold; padding: 5px;background-color: #2d2d2d;color: #daca92;}.ContentBoxBody { background-color: #000000;text-align: left; color: #daca92;padding: 3px;}.blkbgl, .blkbgr { background-color: #000000 }table { color: #daca92;font-family: Verdana, Tahoma,Segoe,sans-serif;font-size: 9pt; }.StateBar {background-color: #000000;color: #daca92;text-align: center;padding: 3px;}div.ForumCategoryHeader, tr.ForumCategoryHeader, td.ForumCategoryHeader {background-color: #000000;color: #daca92;padding: 5px; border: 0px; margin: 0px; font-weight: bold; }.ContentTable { background-color: #000000;color: #daca92;font-family: Verdana,Tahoma,Segoe,sans-serif;font-size: 1em !important; border: none; width: 100%; margin-right: 0px; margin-left: 0px;  } tr.ForumCategoryHeader td { background-color: #000000;color: #daca92;padding: 5px; border: 0px; margin: 0px; font-weight: bold;  }tr.ForumCategoryHeader th { padding: 5px; }.ContentGrid th, .ContentGrid td { border-collapse: collapse; border-width: 1px; border-style: solid; border-color: transparent;  }.ContentGrid tr.ForumCategoryHeader, .ContentGrid td.ForumCategoryHeader, .ContentGrid th.ForumCategoryHeader { -moz-border-radius: 0px; -webkit-border-radius: 0px; }.ForumTitleHeaderCell { text-align: left; }.ForumTopicCountHeaderCell { text-align: center; }.ForumPostCountHeaderCell { text-align: center; }.ForumLastPostInfoHeaderCell {text-align: right;}.ForumIconCell {vertical-align: middle; text-align: center; width: 32px;}.ForumTitleCell {vertical-align: top; }.ForumTopicCountCell {vertical-align: middle; text-align: center; width: 50px;}.ForumPostCountCell {vertical-align: middle; text-align: center; width: 50px;}.ForumLastPostInfoCell {vertical-align: middle; text-align: right; width: 150px; white-space: nowrap; font-size: 90%;}.PostWrapper {border: solid 1px #2d2d2d;}.PostHeaderRow td { padding-top: 4px; padding-bottom: 4px; padding-left: 4px; }.MessageAuthorLinkCell1 { width: 135px; }.MessageAuthorInfoCell1 { text-align: center; width: 135px; vertical-align: top; }.ContentBoxTitleNoBackground {color: #daca92;margin-top: 0px;padding-top: 0px;}A:active  { color: #c8c8e8; text-decoration: none;}A:link {color: #c8c8e8; text-decoration: none;}A:hover {color: #c8c8e8; text-decoration: underline;}A:visited {color: #c8c8e8; text-decoration: none;}.wowItemContainer { border: solid 2px silver; background-color: Black; color: White; padding: 5px; } .wowItemTitleBar { font-weight: bold; } .wowItemTitleQ1 { color: #ffffff; } .wowItemTitleQ2 { color: #1eff00; } .wowItemTitleQ3 { color: #0070dd; } .wowItemTitleQ4 { color: #a335ee; } .wowItemTitleQ5 { color: #ff8000; } .wowItemTitleQ6 { color: #e5cc80; } .wowItemTitleQ7 { color: #e5cc80; } .wowItemTitleQ8 { color: #ffff98; } .wowItemSpellEffect { color: #1eff00; }.toolTipHeader {color: lime;font-weight: bold;}#dhtmltooltip {position: absolute;width: 150px;border: solid 1px white;padding: 3px;background-color: black;color: white;visibility: hidden;z-index: 100;}.UCB { padding: 5px 2px 5px 2px; margin-bottom: 10px; }

Click inside the browser window, then select all (Ctrl-A) the text and copy (Ctrl-C) it.

Now go to this site called Clean CSS and paste the code into the CSS Input box on the left.

In the code layout box, you can choose my personal preference for code compression is "High (moderate readability, smaller size)", or you can choose the one that makes it easiest for you to read. Press the "Process CSS" button and examine the output below. You can choose other compression settings to see which one you prefer.

Copy (Ctrl-C) then paste (Ctrl-V) this new code into your Custom CSS StyleSheet

You can add whatever new styles you want at the end of this text.

And finally, don't forget to enable your Custom StyleSheet!

Edit (12/11/2008): Updated the stylesheet code since there were new classes added
Edit (2/26/2009): Added notes on using the CleanCSS.com site to make the CSS more readable.
Edit (3/15/2009): GuildPortal now uses external CSS files. Updated the instructions on how to copy the code from this file.
Edit (8/3/2010): Note about using CSS Additons instead of Full Custom CSS.
>>help-site<<
Top • Bottom

TheRatedRGuy (New Admin) 6/13/2008 7:28 AM EST : RE: Adding a Custom StyleSheet link

TheRatedRGuy
Posts: 176
Posts With Wolves
BEAUTIFUL!!!

If its possible this should be stickied
Top • Bottom

Ciannon (Guild Admin) 6/13/2008 11:23 AM EST : RE: Adding a Custom StyleSheet link
Ciannon
Posts: 2000
Zomgawsh Poster
If I don't already have it on the master thread, It will be tonight. Then someone with sticky abilities can sticky the whole thread.

Master Thread


Epic quotes from Coils:
"lol out of money. I bought my system and forgot to factor in the cost of the game." - Coils 7/14/2008
"No money totaled my car. Cant play. Probly selling my computer. Adios." - Coils 8/25/2008
Top • Bottom

solonolreksilverwolf (New Admin) 11/12/2008 9:57 AM EST : RE: Adding a Custom StyleSheet link
solonolreksilverwolf
Posts: 130
Posts With Wolves
I bow down to your css geniousness.
Top • Bottom

Avandius (New Admin) 11/12/2008 11:29 AM EST : RE: Adding a Custom StyleSheet link
Avandius
Posts: 337
Fingers of Fury!

I just want to add that the source block of text is ungainly and you cannot find hardly anything in it. So i highly suggestion breaking it down by CSS code. You can add text in "/*TEXTHERE*/ to make GP ignore the code, for personal notes and such. Also it is recommended that you save a working copy in wordpad incase something messes up your site and you cannot fix it, this will be your back up and also a good reference source.

Taking that block of text above and turning it into this:

/*Page Styles Code*/
html, body, div, p, table, td, form, img, h1, h2, h3, h4, h5, h6, input, select {font-family: Verdana,Tahoma,Segoe,sans-serif;font-size: 9pt;}
body {background-color: #333333;}
form {padding: 3px;border: none;}
img { border: none; }hr { color: #333333; }

/*Banner and Tabs Code*/
.BannerArea {padding: 10px;text-align: center;color: #FFFFFF;font-size: 130%;font-weight: bold;}
.TabBar {margin: 0px;padding: 0px;}
.SelectedTab {background-color: #000000;color: #FFFFFF;border: solid 1px #333333;border-color: #333333;text-align: center;padding: 2px;}
.UnSelectedTab {background-color: #000000;color: #FFFFFF;border: solid 1px #333333;text-align: center;cursor: pointer;padding: 2px;}
.UnSelectedTabMo {background-color: #000000;color: #FFFFFF;border: solid 1px #333333;border-color: #333333;cursor: pointer;text-align: center;padding: 2px;}

/*Alternating Grid Row Color*/
.MoGridRow { text-align: left; }
.AltGridRow {background-color: #000000;color: #FFFFFF;}
.NormGridRow {background-color: #000000;color: #FFFFFF;}

/*ContentBox Code*/
.ContentBox {background-color: #000000;border: solid 1px #333333;}
.ContentBoxTitle {padding: 5px;background-color: #000000;color: #FFFFFF;}
.ContentBoxBody {background-color: #000000;color: #FFFFFF;padding-left: 5px;padding-right: 5px;padding-top: 5px;padding-bottom: 5px;}
.StateBar {background-color: #000000;color: #FFFFFF;text-align: center;padding: 5px;}

/*Forum Code*/
.ForumCategoryHeader {background-color: #000000;color: #FFFFFF;border-width: 1px 1px 1px 1px;border-style: solid;border-color: #333333;padding-left: 5px;padding-right: 5px;padding-top: 5px;padding-bottom: 5px;margin: 1px;}
.MessageAuthorLinkCell1{width: 135px;}
.MessageAuthorInfoCell1{text-align: center;width: 135px;vertical-align: top;}
.ContentBoxTitleNoBackground {color: #FFFFFF;margin-top: 0px;padding-top: 0px;}

/*Link Color Code*/
A:active {color: #CCCCCC; text-decoration: none;}
A:link {color: #CCCCCC; text-decoration: none;}
A:hover {color: #CCCCCC; text-decoration: underline;}
A:visited {color: #999999; text-decoration: none;}

/*Tooltip Code*/
.toolTipHeader {color: lime;font-weight: bold;}
#dhtmltooltip {position: absolute;width: 150px;border: solid 1px white;padding: 3px;background-color: black;color: white;visibility: hidden;z-index: 100;}
Top • Bottom

Mottie (MVP) 3/15/2009 8:16 AM EST : RE: Adding a Custom StyleSheet link
GuildPortal MVP
Mottie
Posts: 3872
Zomgawsh Poster
Updated to work with the new external CSS files that GuildPortal uses now.
>>help-site<<
Top • Bottom

Arahila (New Admin) 5/4/2010 12:03 PM EST : RE: Adding a Custom StyleSheet link
Arahila
Posts: 25
Becoming Adept!
Mottie said:

Get to the Custom CSS StyleSheet as follows:

Control Panel > Custom Code > Custom CSS
GuildPortal turns off your default CSS when you enable your custom one.
  1. View Source of your page.
  2. Copy (Ctrl-C) the CSS file name (in blue) thats within the top 25 lines of the source
         <link rel="stylesheet" media="screen" type="text/css" href="/UI/GpCss.ashx?stylesheet=Guild111111_1.css" />
  3. Middle mouse button click on this link (opens a new tab) and then paste (Ctrl-V) the filename to the end, then reload the page.
/headdesk (rinse and repeat)

Got the guild CSS file name, that was easy. Clicking on this link however, gives me this:

I can get a new tab but it is blank, view source and I get: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title></title></head><body></body></html>

I can't paste anything into the page source. Is it something to do with Firefox? Or am I missing something? About to throw in the towel on the whole thing.

Thanks in Advance
Top • Bottom

Mottie (MVP) 5/4/2010 1:38 PM EST : RE: Adding a Custom StyleSheet link
GuildPortal MVP
Mottie
Posts: 3872
Zomgawsh Poster
Hi Arahila!

The "this link" is just this URL: http://www.guildportal.com/UI/GpCss.ashx?stylesheet=

You can copy (highlight and ctrl-C) that url above, then paste it (ctrl-V) into the address bar (in a new browser tab), then add the filename (the blue part) to the end. You should end up seeing only one line that goes off the screen. From there, continue with the instructions.
>>help-site<<
Top • Bottom

Arahila (New Admin) 5/5/2010 7:22 AM EST : RE: Adding a Custom StyleSheet link
Arahila
Posts: 25
Becoming Adept!
Worked like a charm, thanks Mottie. Now I can start using all the other guides to design our site.
Top • Bottom

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%