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.
- 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)
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).
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.
-------------
