Jump to content


Photo

Re-Colorize your 2015 Skin

CSS Colors Skin 2015 Design

This topic has been archived. This means that you cannot reply to this topic.
34 replies to this topic

#1 quickolas1

quickolas1

    Veteran

  • Members
  • PipPipPip
  • 953 posts

Posted 21 June 2015 - 11:22 AM

*** Do-It-Yourself cut & paste code to Change the Color Accents on the 2015 MFL Skin ***
 
You don't need to know CSS. You do need to edit / upload one (simple) image.
 
Foreword:
 
A direct quote and something I've often seen or heard:
 

I was in a free fantasy sharks league last year. It was my first experience with MFL. It was almost a deterrent from using MFL, as the skin and layout were so crappy. I recommend MFL step in and buy or create a better skin or template. And get rid of all those old skins, they just make MFL look terrible.

 
Concur and MFL should probably scrap most of the skins. Ugh. Cmon. 1975 wants its banner image back. Fix the caption width, lazy.. Old department store. Skidmark comes to mind. Literally crap. The only ones really worth keeping are probably the 2015 MFL, 2012 MFL, 2010 Blue, Stones, Red Football and Huddle 2012. I'd include the Social Network and NFL-Team-Inspired Ones except the page structure (tables) is terrible. Why so many people still use this one I don't know... the 'look' would come off much better by using dark (black/gray) accent colors on top of the 2015 Skin (and this thread will show you how). What MFL should do to get new customers is scrap all those skins and put those deleted resources towards basic functionality improvements! Easy execution: send an email to all of us that in 30 days all those older skins (list them) will be removed and all sites using them will be mapped over onto their closest color-counterpart or the 2015 skin or just default to no skin.
 
Intro: How to Re-Color the 2015 Skin

Now that we have a much better-coded skin (which MFL adopted for their own home page):
2015 MFL Skin
 
A few tweaks can change the accent colors... here's a CBS-inspired example and the code is below to copy & paste:
Skin Re-Colored with CBS blue(s)
 
The code to follow will only change the accent colors (links and the dark gray/red menu bar backgrounds on the 2015 skin)...
...not the white page background.
 
The following code really should be uploaded via a CSS file and the instructions to do so can be found here.*
*Quick Version: Copy the code without the <style></style> tags and paste it into Microsoft Notepad. Save the file as design.css (you need the .css in the filename) and then upload the file in the Cascading Style Sheet Upload box in Images & Other URLs in the Commish setup. Do not use Microsoft Word.
 
Or you can place the following code into one of your 20 Home Page Modules (HPMs) and designate the HPM as a Header HPM by checking the box. It should be your first Header HPM or placed at the top of your existing Header HPM if you already have one. Keep the <style></style> tags as they are necessary inside an HPM.
Downside: You will see a flickering effect (the HPM loading) of the old skin colors changing to your new colors if you use this less desirable HPM method - every time you visit your MFL page!
 
Suggestion: Try the HPM method first, double-check your new color scheme... once perfected, then do the upload method.
If you don't have Microsoft Notepad, someone else in your league will.
 
 
The Code
 
CBS color code now located here.
 
ESPN color code now located here.
 
 
Instructions
 
1. Optional
This section is optional if you want to use a Google Font, hide the MFL [brand] logo (as it probably won't match your new colors), move your uploaded League Banner up or down a bit (margin-top/margin-bottom), or add a text-shadow to the different menu bars depending on the accent color you choose. You can delete any line in this section you don't want.
  • I wanted to replicate CBS Commissioner leagues so I chose Montserrat. If you wanted, say Roboto, you would simply replace Montserrat with Roboto in the two instances of the code. Only replace the font's name, don't touch any of the other punctuation or characters around it.
2. Pick & Update Your New 3-Color Scheme
  • Primary (links/menu bar backgrounds)
  • Accent (for hovering/current selection backgrounds)
  • Warning (injury status, etc... this color should stand out as its rare/noteworthy to see on any page)
Find Color Hex codes
 
Just go through the code and change the colors, using the color key provided. My example used CBS' dark blue #004a8f as Primary. So if you want your Primary to be black #000000 then you'd go through the code and change each occurrence as follows:

{color: #004a8f; } into {color: #000000; }
 
Only change the 6-digit color hex code. Keep all the punctuation and symbols in place otherwise.
Do the same for your Accent color & Warnings color (only found once in the code).
Update your color key for Primary / Accent / Warning hex-code future reference.
 
 
3. Final Step: Create your Header Image
 
You do need to create an image to finish the job. The 2-tone background behind the top line menu bar is an image, not code.
You can save the image below and edit it. The image is 9 pixels wide x 34 pixels high. The width really doesn't matter as the image repeats horizontally. The height does need to be 34 pixels high to match and the top 30 pixels should be your Primary color with the bottom 4 pixels being the Accent color. Microsoft Paint is plenty good enough to edit this image. Use the color hex code webpage posted above for reference to find the RGB value if necessary to get your colors in Paint or another program (for example black RGB is 0,0,0 and white is 256,256,256).
 
54195_avatar.jpg
 
Once you have the image saved with your color scheme, you need to put it to a webspace and get the link into the code. One workaround is to upload the image as your Commish Icon if you don't care about your Commish Icon. Find the link to your image and replace it here in the code inside the parenthesis (leave all punctuation and symbols around the URL):
 
body {background: #FFF url(http://YOURhostedIMAGE.jpg) repeat-x scroll 0% 0%; }
 
You're done.
 
-------------

#2 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,404 posts

Posted 21 June 2015 - 01:23 PM

nice work quick !

 

MFL really needs to unload all those old skins , i talked to Tony about redoing them all using same css for the 2015 skin and do various colors , it would look soooo much better imo . Same css for all the skins , aside of the coloring , make it simple for users to alter the css from skin to skin . I built all my personal 2015 sites using the same skin and altering it a bit for my needs. We could do custom scoreboard skins / habman popups / player news popups to match and load them into the MFL default system as well. I almost did that for the MFL2015 but decided to wait until they decide to overhaul them all or not.

 

 

A nice banner , bg image and caption image is really all you need , then add on a few of the many scripts available and you have a simple customized site


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#3 DA-G-GURU

DA-G-GURU

    Veteran

  • Members
  • PipPipPip
  • 1,165 posts

Posted 21 June 2015 - 02:27 PM

I have seen hundreds of sites, you would be surprised how many folks use and like those old skins... Sad but true.
Simply The Best in Grafix and CSS webdesign since 2005

www.dagrafixdesigns.com

---------------
Twitter @DA_Sticks

#4 quickolas1

quickolas1

    Veteran

  • Members
  • PipPipPip
  • 953 posts

Posted 21 June 2015 - 03:46 PM

well those people probably won't see this anyway.

EDIT: first post finished. let's see if anyone uses this.



#5 Juiblex

Juiblex

    Veteran

  • Members
  • PipPipPip
  • 55 posts

Posted 22 June 2015 - 07:06 AM

Great stuff. Lol... Skidmark comes to mind. Obviously, I agree, but I will admit the 2015 MFL skin is much nicer than most other skins. I think an equally big problem on most sites is the layout (if its not changed from default). Every time I see that standings module with those generic square icons and team names next to them I get dry heaves.

#6 Screaming Eagle

Screaming Eagle

    Veteran

  • Members
  • PipPipPip
  • 321 posts

Posted 22 June 2015 - 08:15 AM

Nice work quick. 

 

I am dumbfounded as to why any logical person would be using any of those old skins. Even if some people like to use them, it will best serve mfl to discard them in order to drive in new potential customers. One look at an old skin and people could go running for the hills. 

 

A lot of mfl's newer skins look pretty good. My only complaint with every one of them is that it is difficult to read line after line if they are the same color. So the odd and even table rows should be different colors on every single skin. 


Gridiron Tavern, the best IDP league available.

#7 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,404 posts

Posted 22 June 2015 - 08:59 AM

would be nice to create a skin color generator , to spit out the css to color a skin , with inputs on text coloring , report , th , caption , table row coloring


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#8 Screaming Eagle

Screaming Eagle

    Veteran

  • Members
  • PipPipPip
  • 321 posts

Posted 22 June 2015 - 09:16 AM

would be nice to create a skin color generator , to spit out the css to color a skin , with inputs on text coloring , report , th , caption , table row coloring


I actually started doing that a few months back, but have since stopped due to time constraints. It is a daunting task. I can send you what I have if you are looking to make that happen. There are various different routes to go with the code though, and you would probably come to an impass where you would need to rework the minimal code that I have so far. Let me know if you'd be interested.
Gridiron Tavern, the best IDP league available.

#9 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,404 posts

Posted 22 June 2015 - 10:15 AM

SE you using php? Yes this would take considerable time but would be nice , pm me what you have pls will take a look

We could even set up a database on my server to house loaded images and the generated CSS would link them as the user loaded the skin images , maybe a sample mfl page to see the output before loading

This is really something MFL could/should offer

FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#10 quickolas1

quickolas1

    Veteran

  • Members
  • PipPipPip
  • 953 posts

Posted 23 June 2015 - 09:10 AM

If anything, I would think the easy answer is for MFL to make the 2015 skin the default ground zero level CSS.

Then MFL's Color-Option page can work: people can change the colors of links, the pagebody, menu bars, etc. without having to paste in code.



#11 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,404 posts

Posted 26 June 2015 - 04:22 PM

just off the phone with Habman ( really pleasant fella ), he is getting started on this project . I won't be much help , but had a chance to view the demo skin change portal and looks promising for sure . This will be a time consumer , so wanted to thank him . I'll be whipping up a new default css file , with every possible effect for each id/class i can think of , so by the end this should cover 90% of the needs of those using it . Of course custom add on need their own css in many instances , and a few tweaks here or there to fit your aesthetic as always.


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#12 quickolas1

quickolas1

    Veteran

  • Members
  • PipPipPip
  • 953 posts

Posted 03 July 2015 - 07:24 AM

Someone here did implement the above re-coloring!

http://www12.myfanta...2015/home/48647



#13 edytwinky

edytwinky

    Veteran

  • Members
  • PipPipPip
  • 178 posts

Posted 22 July 2015 - 11:45 AM

Thanks, will definitely give this a try later tonight. 



#14 phelpsmeister

phelpsmeister

    Member

  • Members
  • PipPip
  • 10 posts

Posted 04 August 2015 - 04:10 PM

Man a 1000% up-votes to this thread.  I've always thought MFL was hands down the best from a functionality standpoint, but man the UI templates were the worst!  Us without the CSS skills need those templates!  Please MFL...for the love of god, overhaul those things!



#15 kychop

kychop

    Member

  • Members
  • PipPip
  • 14 posts

Posted 07 September 2015 - 06:56 PM

Hello all. Im trying to use the new 2015 skin with the CBS theme but the problem is my banner is not positioned correctly. I cant seem to figure out how to move it. It worked with the old skins but not now. I uploaded the banner image through Images and other URLs under appearance setup. The image size is 1020 x 170.  Also, the banner doesn't appear anymore on my older tablet. When i load the JQuery Library in header of all pages Modules, older tablets (that worked using older skins) makes the page unresponsive. 

 

http://www20.myfanta...15/home/31353#0

 

Thanks for any help in advance.

 

Here is CSS im using

 

/*************** OPTIONAL ***************/
 
 
body, #hsubmenu a, #homepagetabsdiv #homepagetabs li
{font-family: 'Montserrat',Helvetica,Arial,sans-serif; }
 
.brandlogo
{display: none; }
 
img.leaguelogo
{margin-top: -20px; margin-bottom: 50px; }
 
.mmenucontainer, #homepagetabs, input[type="button"], input[type="submit"], input[type="reset"]
{text-shadow: 0 2px 0 #000000;}
 
 
/*************** NEW COLOR KEY ***************
Primary (2015 Dark Gray) = Dark Blue #004a8f
Accent (2015 Red) = Light Blue #80baf1
Warning (2015 Red) = Flat Red #d8383a
**********************************************/
 
 
/*************** HEADER IMAGE: 9 x 34 (height = 30 main+4 accent) ***************/
 
body
{background: #FFF url(http://i211.photobuc...zpsyjnwpr05.jpg) repeat-x scroll 0% 0%; }
 
 
/*************** WARNING/STANDOUT COLOR ***************/
 
.pageheader a:link, .pageheader a:active, .pageheader a:visited,
.homepagemessage span.warning, .homepagemessage h4.warning,
.warning, th.warning, .oddtablerow td.status span.freeagent, .eventablerow td.status span.freeagent,
h2, h3, h3 a:hover,
#league_chat b,
#body_board_show th.messageboardbar, #body_board_show th.messageboardbar a,
.playoffbracket td b,
#commissioner_setup th
{color: #d8383a; }
 
 
/*************** LINKS ***************/
 
.oddtablerow a:link,.oddtablerow a:active,.oddtablerow a:visited,.oddtablerow,
.eventablerow a:link,.eventablerow a:active,.eventablerow a:visited,.eventablerow,
a:link, a:active, a:visited
{color: #004a8f; }
 
a:hover, .oddtablerow a:hover,.eventablerow a:hover
{color:#80baf1; }
 
 
/*************** TEXT AREAS & MENU BARS ***************/
 
.pageheader,
.pageheader a:link:hover, .pageheader a:active:hover, .pageheader a:visited:hover,
.pagetitle h1,
th a:hover,
h3 a:link, h3 a:visited, h3 a:active,
#body_board_show th.messageboardbar a:hover,
#monthly_calendar th,
#vsubmenu ul li, #vsubmenu ul li a:hover,
#hsubmenu a
{color: #004a8f; }
 
.pagefooter,
.mainmenuoff, a.mainmenuoff:link, a.mainmenuoff:visited, a.mainmenuoff:hover, a.mainmenuoff:active, a.mainmenucurrent:link, a.mainmenucurrent:visited, a.mainmenucurrent:hover, a.mainmenucurrent:active,
#homepagetabsdiv #homepagetabs li
{color: #80baf1; }
 
.pagefooter,
.mainmenuoff, a.mainmenuoff:link, a.mainmenuoff:visited, a.mainmenuoff:hover, a.mainmenuoff:active, a.mainmenucurrent:link, a.mainmenucurrent:visited, a.mainmenucurrent:hover, a.mainmenucurrent:active,
#homepagetabs,
.mainmenuon, A.mainmenuon:link, A.mainmenuon:visited, A.mainmenuon:hover, A.mainmenuon:active,
#body_live_scoring_summary h2,#body_live_scoring h2
{background: #004a8f; }
 
.mainmenuon, A.mainmenuon:link, A.mainmenuon:visited, A.mainmenuon:hover, A.mainmenuon:active,
#homepagetabsdiv #homepagetabs li.currenttab,
li#tab0.currenttab:after
{background: #80baf1; }
 
 
/*************** INPUT BUTTONS ***************/
 
input[type="button"], input[type="submit"], input[type="reset"]
{border: 1px solid #000000; background: #004a8f; }
 
input[type="button"]:hover, input[type="submit"]:hover
{border: 1px solid #000000; background: #80baf1; }
 
 
/*************** BORDERS ***************/
 
.pagefooter > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1),
#homepagetabs,
caption, .homepagemodule caption, .homepagecolumn .homepagemodule caption
{border-bottom: 5px solid #80baf1;}
 
#homepagetabsdiv #homepagetabs li.currenttab:first-of-type
{border-left: 1px solid #80baf1;}
 
#homepagetabsdiv #homepagetabs li
{border-left: 1px solid #004a8f; }
 
#homepagetabsdiv #homepagetabs li
{border-right: 1px solid #004a8f; }
 
.newposition td,.newposition th
{border-top: 2px solid #004a8f; }
 
#body_live_scoring_summary h2,#body_live_scoring h2
{border: 3px solid #004a8f; }
 
.playoffbracket td.topteam, .playoffbracket td.bottomteam
{border-bottom: 2px solid #004a8f; }
 
.playoffbracket td.bracket, .playoffbracket td.bottomteam
{border-right: 2px solid #004a8f; }