I installed a new feature which allows users to create their own custom style to use on the forum using CSS, which can be generated using a built in generator. (Some basic HTML knowledge is needed and understanding CSS is a plus) To access this new feature go to your UserCP and click on "Edit Options". From there scroll down to the "Miscellaneous Options" section where you will see a new field entitled "Custom Style": Click on the "CSS Generator" link and it will take you to a page where you can now use hex code to create your own GridironFans.com skin. Once you are done choosing your colors and/or images you scroll to the bottom of the page, click on "Generate Code" and copy the code given to you. Now....go back to to the "Custom Style" portion of the "Miscellaneous Options" section and paste the code generated in the text field and save. Now you have a custom skin!
Yeah it's a pretty cool feature. People should have fun tinkering with it and seeing what they come up with. Maybe if someone has time they can put together team skins people can plug in.
Here is one for 49er fans body {background: #C1BFBF;color: #000000;font: 8pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;margin: 0px 10px 10px 10px;padding: 0px;} a:link, body_alink {color: #C0241F;} a:visited, body_avisited {color: #C0241F;} a:hover, a:active, body_ahover {color: #000000;} .page {background: #C1B38F;color: #000000;} td, th, p, li {font: 8pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .tborder {background: #C0241F;color: #000000;} .tcat {background: #C0241F;color: #FFFFFF;font: bold 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .tcat a:link, .tcat_alink {color: #FFFFFF;text-decoration: none;} tcat a:visited, .tcat_avisited {color: #FFFFFF;text-decoration: none;} .tcat a:hover, .tcat a:active, .tcat_ahover {color: #FFFF66;text-decoration: underline;} .thead {background: #C0241F;color: #FFFFFF;font: bold 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .thead a:link, .thead_alink {color: #FFFFFF;} .thead a:visited, .thead_avisited {color: #FFFFFF;} .thead a:hover, .thead a:active, .thead_ahover {color: #FFFF66;} .tfoot {background: #C1B38F;color: #E0E0F6;} .tfoot a:link, .tfoot_alink {color: #E0E0F6;} .tfoot a:visited, .tfoot_avisited {color: #E0E0F6;} .tfoot a:hover, .tfoot a:active, .tfoot_ahover {color: #FFFF66;} .alt1, .alt1Active {background: #C1B38F;color: #000000;} .alt2, .alt2Active {background: #C1B38F;color: #000000;} td.inlinemod {background: #37B400;color: #003600;} .wysiwyg {background: #F5F5FF;color: #000000;font: 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} textarea, .bginput {font: 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .button {font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} select {font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} option, optgroup {font-size: 11px;font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .smallfont {color: #000000;font: 10px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .time {color: #C0241F;} .navbar {color: #000000;font: 10px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .highlight {color: #FF0000;font-weight: bold;} .fjsel {background: #3E5C92;color: #E0E0F6;} .fjdpth0 {background: #F7F7F7;color: #000000;} .panel {background: #E4E7F5 url(images/gradients/gradient_panel.gif) repeat-x top left;color: #000000;padding: 10px;border: 2px outset;} .panelsurround {background: #C1B38F;color: #0#D1D4E0 url(images/00000;} legend {color: #000000;font: 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .vbmenu_control {background: #738FBF;color: #FFFFFF;font: bold 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;padding: 3px 6px 3px 6px;white-space: nowrap;} .vbmenu_control a:link, .vbmenu_control_alink {color: #FFFFFF;text-decoration: none;} .vbmenu_control a:visited, .vbmenu_control_avisited {color: #FFFFFF;text-decoration: none;} .vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover {color: #FFFFFF;text-decoration: underline;} .vbmenu_popup {background: #FFFFFF;color: #000000;border: 1px solid #0B198C;} .vbmenu_option {background: #BBC7CE;color: #000000;font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;white-space: nowrap;cursor: pointer;} .vbmenu_option a:link, .vbmenu_option_alink {color: #22229C;text-decoration: none;} .vbmenu_option a:visited, .vbmenu_option_avisited {color: #22229C;text-decoration: none;} .vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover {color: #FFFFFF;text-decoration: none; .vbmenu_hilite {background: #8A949E;color: #FFFFFF;font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;white-space: nowrap;cursor: pointer;} .vbmenu_hilite a:link, .vbmenu_hilite_alink {color: #FFFFFF;text-decoration: none;} .vbmenu_hilite a:visited, .vbmenu_hilite_avisited {color: #FFFFFF;text-decoration: none;} .vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover {color: #FFFFFF;text-decoration: none;} .bigusername {font-size: 14pt;} td.thead, div.thead {padding: 4px;} .pagenav a {text-decoration: none;} .pagenav td {padding: 2px 4px 2px 4px;} .fieldset {margin-bottom: 6px;} .fieldset, .fieldset td, .fieldset p, .fieldset li {font-size: 11px;} form {display: inline;} label {cursor: default;} .normal {font-weight: normal;} .inlineimg {vertical-align: middle;} Here is a slightly different version that I like better body {background: #C1BFBF;color: #000000;font: 8pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;margin: 0px 10px 10px 10px;padding: 0px;} a:link, body_alink {color: #C0241F;} a:visited, body_avisited {color: #C0241F;} a:hover, a:active, body_ahover {color: #000000;} .page {background: #C1B38F;color: #000000;} td, th, p, li {font: 8pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .tborder {background: #C0241F;color: #000000;} .tcat {background: #C0241F;color: #FFFFFF;font: bold 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .tcat a:link, .tcat_alink {color: #FFFFFF;text-decoration: none;} tcat a:visited, .tcat_avisited {color: #FFFFFF;text-decoration: none;} .tcat a:hover, .tcat a:active, .tcat_ahover {color: #FFFF66;text-decoration: underline;} .thead {background: #C0241F;color: #FFFFFF;font: bold 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .thead a:link, .thead_alink {color: #FFFFFF;} .thead a:visited, .thead_avisited {color: #FFFFFF;} .thead a:hover, .thead a:active, .thead_ahover {color: #FFFF66;} .tfoot {background: #C1B38F;color: #E0E0F6;} .tfoot a:link, .tfoot_alink {color: #E0E0F6;} .tfoot a:visited, .tfoot_avisited {color: #E0E0F6;} .tfoot a:hover, .tfoot a:active, .tfoot_ahover {color: #FFFF66;} .alt1, .alt1Active {background: #C1B38F;color: #000000;} .alt2, .alt2Active {background: #C7C4C4;color: #000000;} td.inlinemod {background: #37B400;color: #003600;} .wysiwyg {background: #F5F5FF;color: #000000;font: 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} textarea, .bginput {font: 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .button {font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} select {font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} option, optgroup {font-size: 11px;font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .smallfont {color: #000000;font: 10px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .time {color: #C0241F;} .navbar {color: #000000;font: 10px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .highlight {color: #FF0000;font-weight: bold;} .fjsel {background: #3E5C92;color: #E0E0F6;} .fjdpth0 {background: #F7F7F7;color: #000000;} .panel {background: #E4E7F5 url(images/gradients/gradient_panel.gif) repeat-x top left;color: #000000;padding: 10px;border: 2px outset;} .panelsurround {background: #C1B38F;color: #0#D1D4E0 url(images/00000;} legend {color: #000000;font: 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .vbmenu_control {background: #738FBF;color: #FFFFFF;font: bold 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;padding: 3px 6px 3px 6px;white-space: nowrap;} .vbmenu_control a:link, .vbmenu_control_alink {color: #FFFFFF;text-decoration: none;} .vbmenu_control a:visited, .vbmenu_control_avisited {color: #FFFFFF;text-decoration: none;} .vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover {color: #FFFFFF;text-decoration: underline;} .vbmenu_popup {background: #FFFFFF;color: #000000;border: 1px solid #0B198C;} .vbmenu_option {background: #BBC7CE;color: #000000;font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;white-space: nowrap;cursor: pointer;} .vbmenu_option a:link, .vbmenu_option_alink {color: #22229C;text-decoration: none;} .vbmenu_option a:visited, .vbmenu_option_avisited {color: #22229C;text-decoration: none;} .vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover {color: #FFFFFF;text-decoration: none; .vbmenu_hilite {background: #8A949E;color: #FFFFFF;font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;white-space: nowrap;cursor: pointer;} .vbmenu_hilite a:link, .vbmenu_hilite_alink {color: #FFFFFF;text-decoration: none;} .vbmenu_hilite a:visited, .vbmenu_hilite_avisited {color: #FFFFFF;text-decoration: none;} .vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover {color: #FFFFFF;text-decoration: none;} .bigusername {font-size: 14pt;} td.thead, div.thead {padding: 4px;} .pagenav a {text-decoration: none;} .pagenav td {padding: 2px 4px 2px 4px;} .fieldset {margin-bottom: 6px;} .fieldset, .fieldset td, .fieldset p, .fieldset li {font-size: 11px;} form {display: inline;} label {cursor: default;} .normal {font-weight: normal;} .inlineimg {vertical-align: middle;}
Jay's working on cleaning up the CSS so we can officially add it to our list of skins. I have also updated the GridironFans-Lite skin so all the site's features are now available using this skin.
The finished 49ers one is here body {background: #E1E1E2;color: #000000;font: 8pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;margin: 0px 10px 10px 10px;padding: 0px;} a:link, body_alink {color: #39100B;} a:visited, body_avisited {color: #39100B;} a:hover, a:active, body_ahover {color: #FF4400;} .page {background: #8B6F49;color: #000000;} td, th, p, li {font: 8pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .tborder {background: #9F1606;color: #000000;} .tcat {background: #7F1003;color: #FFFFFF;font: bold 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .tcat a:link, .tcat_alink {color: #FFFFFF;text-decoration: none;} tcat a:visited, .tcat_avisited {color: #FFFFFF;text-decoration: none;} .tcat a:hover, .tcat a:active, .tcat_ahover {color: #FFFF66;text-decoration: underline;} .thead {background: #7F1003;color: #FFFFFF;font: bold 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .thead a:link, .thead_alink {color: #FFFFFF;} .thead a:visited, .thead_avisited {color: #FFFFFF;} .thead a:hover, .thead a:active, .thead_ahover {color: #FFFF66;} .tfoot {background: #7F1003;color: #E0E0F6;} .tfoot a:link, .tfoot_alink {color: #E0E0F6;} .tfoot a:visited, .tfoot_avisited {color: #E0E0F6;} .tfoot a:hover, .tfoot a:active, .tfoot_ahover {color: #FFFF66;} .alt1, .alt1Active {background: #9D9463;color: #000000;} .alt2, .alt2Active {background: #BEB687;color: #000000;} td.inlinemod {background: #37B400;color: #003600;} .wysiwyg {background: #F5F5FF;color: #000000;font: 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} textarea, .bginput {font: 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .button {font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} select {font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} option, optgroup {font-size: 11px;font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .smallfont {color: #000000;font: 10px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .time {color: #AF2215;} .navbar {color: #000000;font: 10px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .highlight {color: #FF0000;font-weight: bold;} .fjsel {background: #7F1003;color: #E0E0F6;} .fjdpth0 {background: #F7F7F7;color: #000000;} .panel {background: #E4E7F5 url(images/gradients/gradient_panel.gif) repeat-x top left;color: #000000;padding: 10px;border: 2px outset;} .panelsurround {background: #D1D4E0 url(images/gradients/gradient_panelsurround.gif) repeat-x top left;color: #000000;} legend {color: #000000;font: 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;} .vbmenu_control {background: #7F1003;color: #FFFFFF;font: bold 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;padding: 3px 6px 3px 6px;white-space: nowrap;} .vbmenu_control a:link, .vbmenu_control_alink {color: #FFFFFF;text-decoration: none;} .vbmenu_control a:visited, .vbmenu_control_avisited {color: #FFFFFF;text-decoration: none;} .vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover {color: #FFFFFF;text-decoration: underline;} .vbmenu_popup {background: #8B6F49;color: #000000;border: 1px solid #0B198C;} .vbmenu_option {background: #8B6F49;color: #000000;font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;white-space: nowrap;cursor: pointer;} .vbmenu_option a:link, .vbmenu_option_alink {color: #39100B;text-decoration: none;} .vbmenu_option a:visited, .vbmenu_option_avisited {color: #39100B;text-decoration: none;} .vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover {color: #FFFFFF;text-decoration: none; .vbmenu_hilite {background: #8A949E;color: #FFFFFF;font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;white-space: nowrap;cursor: pointer;} .vbmenu_hilite a:link, .vbmenu_hilite_alink {color: #FFFFFF;text-decoration: none;} .vbmenu_hilite a:visited, .vbmenu_hilite_avisited {color: #FFFFFF;text-decoration: none;} .vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover {color: #FFFFFF;text-decoration: none;} .bigusername {font-size: 14pt;} td.thead, div.thead {padding: 4px;} .pagenav a {text-decoration: none;} .pagenav td {padding: 2px 4px 2px 4px;} .fieldset {margin-bottom: 6px;} .fieldset, .fieldset td, .fieldset p, .fieldset li {font-size: 11px;} form {display: inline;} label {cursor: default;} .normal {font-weight: normal;} .inlineimg {vertical-align: middle;}
Steve put the finished 49ers one up. Some things were added, check it out. Steelers might be difficult because of their colors to make not hurt the eyes, but I will try.