Jump to content


Photo

CSS 101: Intro to MFL Coding

css coding

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

#1 quickolas1

quickolas1

    Veteran

  • Members
  • PipPipPip
  • 953 posts

Posted 07 August 2013 - 09:15 PM

Return to pinned overview topic: CSS/Apps/Scripts


First off a Request

Please do not add posts to this topic with specific individual coding questions, comments like “thanks” or "go to hell" or off-topic items or questions. PM me to add anything omitted to this post. Let’s keep this concise for newbies so they don’t feel they have to fumble through endless pages within the topic to find missing info or updates!!


Cascading Style Sheets

CSS is code that overlaps your site’s default code to change things like sizing, positioning, backgrounds, spacing, coloring, adding effects, etc.


CSS is not the content itself (text, menu bars, lists, tables, sliders, Habman Apps, etc).........................

............................but how to affect the content (content also known as HTML, Javascript, etc.).

The content is provided by MFL or custom-created by you in your 20 HPM’s (home page modules) which you then place within your site.

Note: you cannot alter or change the CSS of a live draft room.


Before you Begin (highly recommended)

  • If you already have an active site, you may want to create a duplicate to experiment upon by selecting that option at the bottom of the For Commissioners page. Please delete duplicate sites once finished to conserve MFL space.
  • On your active site or before adding code to it, go to For Commissioners > Setup > (Franchise) Abilities Setup  ...and un-check the box that allows your owners to customize their own home page. They can’t change the coding at CBS or ESPN anyway and it will only lead to frustration if you code your page a certain way and then your owners move things around which can create issues. They cannot create and add their own Cascading Style Sheet for their personalized log-in so they will get what you code.
  • Set the “Advanced Editor on league type-in boxes?” to NO under Appearance Setup > Reports and Other Settings. If you’ve already put content into any of the 20 HPMs, this should be set to ‘no’ anyway. And most likely once you get into coding, you’ll want to play more with content. Might as well do it now and get it over with.
  • Choose a skin you like and start by coding over it. It is much less work than coding from scratch. Save that for later… or not at all.
  • Less is sooooo much more. CBS now has endless scrolling on their home page. Literally. That is a big no-no, similar to putting 800 MFL modules on your home page and gunking it up or slowing down loading time. Go bare minimum to start. It will be easier to begin coding your site and your owners will (maybe subconsciously) thank you for it. I’d also remove the left-side menu as its duplicative (sometimes triplicate) to the top menu + tabs and takes up viewing space. There are better ways and modules to use to replicate this (and always be thinking about smaller device screen sizes). These are – of course - only recommendations.

 

The Three Ways to add CSS:

 

HPM Method

You should save this method until you're comfortable with how it works as CSS in a Home Page Module only affects a page in which an HPM is situated.  That is usually just your home page with the exception being HPMs you designate as Headers or Footers. However if you’re going to, this is exactly what you would put inside an HPM:

<style>
/* Text between these symbols is hidden via CSS and good for making reference notes */

Place code here

</style>

 

Link to Outside Style Sheet

This method is more appropriate for distribution of CSS. For example, a Habman/TOS Scoreboard or Dynamic Menu. There's no great reason to code your own site using this method as it uses a 3rd party site and if that site has any downtime or slowness or bandwidth issues, the code may not be pulled to your MFL site. But... you may come across it; so this is what is placed inside an HPM:

<!-- Between these symbols is how you hide notes/text inside of an HPM -->
<link rel="stylesheet" href="http://www.your3rdpartysite.css" type="text/css"/>

This would be a good place to mention that for those Habman/TOS apps - if you want to override the CSS they supply... you could go to the href link they give you, copy the CSS code directly from that page, tweak it and place it in your app's HPM using the first method. But if right now this sounds like a foreign language or you're just starting off... you should first move on to...

 

Uploading your own CSS file to MFL (DO THIS)

You do not have a CSS file to overlap your MFL site until you first create one. Here’s how:

  1. Open up Notepad or a similar text editor.
  2. Place the code right inside the Notepad… for example: start by simply inserting:
    .pagefooter {display: none; }
    
  3. Save the file as whatever name you like – it doesn’t matter – but add .css to the end of your typed-in file name. You do not want it saved as Notepad’s default text or ".txt" file. So you’d save it as whatevernameyouchoose.css inside the "File Save As: " box.
  4. Go to the For Commissioners -> Setup -> Appearance Setup -> Images & Other URLs screen and then click on the "Upload League Cascading Style Sheet File:" button and find your file. Open (upload) it.
  5. Click the Save button at the bottom of the MFL page.
  6. Go back to your home page and refresh your browser – this may be done by hitting F5 or shift + reload or something similar. The MFL footer should no longer be at the bottom of your site because you hid it with your new uploaded overlaying custom CSS file.

 

Last Step and then you’re off and running:

Download the Mozilla Firefox CSS Editor here.


Once you have it downloaded, re-open Firefox, go to your league home page and open up the editor inside the browser as follows:

Tools > Web Developer Extension > CSS > Edit CSS

 

You will see a few tabs. Here’s what they are:

  • 12345.css – this is the default CSS for all MFL sites. The number is just your site’s 5 digit code.
  • Skin.css – this is the CSS sheet for your choice of skin. You’re overwriting this too.
  • css – this is CSS brought to your site by linking a stylesheet from an outside source
  • Embedded Styles – this is CSS you put into your HPMs
  • 12345_use_css.css – this is the tab you want to click on and edit. It is the new CSS stylesheet you uploaded in the previous step. It will have your 5 digit code regardless of what you named the Notepad file. You can now continue to put new code or adjust old code right inside this tab. You will see the effects/results on your browser's page as long as you don't close the Firefox Editor. Once you’re happy with your work, click the button to save, name it whatever.css and re-upload that file to your MFL site using the same process you did earlier. Re-fresh your browser page afterwards to see the implemented results!

Important note: whenever you upload a new .css file to your MFL site, it completely overwrites the previous .css file uploaded.

Hence, using the Firefox Editor is ideal because you don’t have to re-create your .css file over from scratch every time.

Of course this means that your previous .css file will be gone.

 

------------------------


Here are some goodies to start.

For spacing, px = pixels. Sometimes you'll want to use pixels, sometimes % and sometimes auto.

Change the attributes as you like.

.pagefooter {display: none; }
/* removes the MFL footer, useful if you want to create your own footer via Home Page Module */

.leaguelogo {margin-top: -50px; margin-left: px; margin-right: px; }
/* moves an uploaded league banner up so there is less top dead space */

.franchiseicon {width: 125px; height: auto; }
/* sizes ALL franchise icons in EVERY report & yes can be modified by specific report with more specificity */

.franchiseicon:hover {opacity: 0.75; filter: alpha(opacity=75); }
/* opacity effect for hovering over franchise icons */

.myfranchise, .myfranchise a, .myfranchise a:link, .myfranchise a:visited, .myfranchise a:hover, .myfranchise a:active {color: #ff0000; font-weight: bold; }
/* owner's line item data shows up as red in the Stats, Schedule, etc. 
does nothing for logged-in commish */

td.lineup_comments {color: #000000; background-color: #ffff00; }
/* submit lineup comments coloring on the Projected Lineups page */

.newposition td {border-top: 2px solid #0000ff; }
/* creates a distinct line between positions on Roster and matchups in the Schedule */

#standings .report td, #standings .report th {width: 125px; text-align: center; }
/* centers all Standings table data and makes the columns consistently spaced */

.standingslogo {width: auto; height: ; }
/* cleans up size of uploaded division banners in the Standings */

#home .standingslogo {width: auto; height: ; }
/* same as above but ONLY on the home page... example of specificity */

 

Final Thoughts

  • Feel free to delete all the comments. But make sure to always close out a { with a } and after each element changer inside you always have ;
  • You can use Firefox or Google Chrome to right click and inspect an element on your page and see the descriptor. For example: .pagefooter or #standings.
  • If something seems screwed up, remove it from the CSS and re-try. Practice makes perfect.
  • This site is good for getting your intro CSS learn on.

Someday… maybe... CSS 201: #ID’s, .Classes and go-to place for Individual Questions…



#2 quickolas1

quickolas1

    Veteran

  • Members
  • PipPipPip
  • 953 posts

Posted 21 June 2014 - 10:39 AM

2014 bump

#3 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,373 posts

Posted 21 June 2014 - 11:10 AM

quick i never even saw this post before , but good work on it , wish i had time to add to it , hope others can contribute


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