Custom User Styles For GridironFans.com Skin!

Discussion in 'Site News' started by SRW, Feb 24, 2008.

  1. SRW

    SRW Ex-World's Worst Site Admin

    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":

    [​IMG]

    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!
     
  2. Sportsguy

    Sportsguy AKA-Sportsguy9695

    ok sounds good SRW. great job installing that
     
  3. SRW

    SRW Ex-World's Worst Site Admin

    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.
     
  4. Crowned

    Crowned Doesn't give a shit.

    sweet someone make me a Steelers skin!
     
  5. SuperBeast

    SuperBeast BANNED

    this sounds pretty cool.....thanks srw
     
  6. afjay

    afjay Click. Clack.

    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;}
     
  7. Platoon 86

    Platoon 86 Loony

    Looks good, Jay. I'm using it.
     
  8. SRW

    SRW Ex-World's Worst Site Admin

    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.
     
  9. Sweets

    Sweets All-Pro

    I'm using it too..I love it
     
  10. DawkinsINT

    DawkinsINT Tebow free since 9/5/2015.

    That's cool, afjay. Can someone make an Eagles one?
     
  11. Sweets

    Sweets All-Pro

    Dawkins we're hoping that we can get all 32 team skins done.
     
  12. DawkinsINT

    DawkinsINT Tebow free since 9/5/2015.

    That would be badass! :buttrock:
     
  13. Platoon 86

    Platoon 86 Loony

    ^Agreed.
     
  14. afjay

    afjay Click. Clack.

    I will work on the eagles next.
     
  15. DawkinsINT

    DawkinsINT Tebow free since 9/5/2015.

    Hell yeah! :buttrock:
     
  16. Dougerrrr

    Dougerrrr Laus Deo

    All 32? Does there have to be a Browns or Ravens one?:icon_cheesygrin:
     
  17. afjay

    afjay Click. Clack.

    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;}
     
  18. Platoon 86

    Platoon 86 Loony

    Again, looks awesome, Jay. Nice work.
     
  19. Crowned

    Crowned Doesn't give a shit.

    Make a Steelers one Jay! :cool:

    Also that 49ers one looks good, haven't check the Eagles,
     
  20. afjay

    afjay Click. Clack.

    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.