Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Theme > Please read this before adding a Custom StyleSheet!
Mottie (SuperAdmin) 6/10/2008 7:02 PM EST : Please read this before adding a Custom StyleSheet!
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi and welcome to my site!

This site only exists to help people add content to their website and make it purdy! I'm going to apologize in advance for being long-winded and maybe a little too descriptive... but sometimes you need it



GuildPortal admin site link to original post

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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Eochain (Applicant) 12/10/2008 7:25 AM EST : RE: Please read this before adding a Custom StyleSheet!
Eochain
Posts: 518

0
Like

0
Dislike

Hmm I keep getting this error when trying to save my CSS on GP

The provided custom CSS contained invalid characters, such as HTML mark-up, that are not valid for a Cascading Style Sheet.  Please modify your code, removing any mark-up, before submitting.
TopBottom

Necrodead (Applicant) 6/4/2009 2:28 AM EST : RE: Please read this before adding a Custom StyleSheet!

Necrodead
Posts: 20

0
Like

0
Dislike

Eochain said:
Hmm I keep getting this error when trying to save my CSS on GP

The provided custom CSS contained invalid characters, such as HTML mark-up, that are not valid for a Cascading Style Sheet.  Please modify your code, removing any mark-up, before submitting.


Well i didn't get it on the cleaned one but it goes off on anything i try to add in like the guild proggression box =)
TopBottom

Mottie (SuperAdmin) 6/4/2009 1:11 PM EST : RE: Please read this before adding a Custom StyleSheet!
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Necrodead!

Make sure you're not adding the <style> or </style> tags into the Custom CSS.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%