178 replies to this topic

[braven112]

Hey guys,

 

I've been working on a mobile friendly template and I'm ready to offer it up to everyone.  Best part, it's free!  I put together some instructions here on setting it up as well as a link to the demo site.

 

mfl.football

 

I'm still working on improving the instructions and adding new code snippets based on everyone's feedback so feel free to post here with any new ideas or if you need help installing it.

 

If anyone would like to contribute to the project in anyway let me know.

 

[theeohiostate]

very nicely done Braven !  Great work ! and free ?!?!  nice

 

you should throw in our new responsive scoreboard instead of that old one though , its responsive and not much css at all to style to site appearance

 

If you want , i can add the new scoreboard and style it , and also add the new player popup script and style to match

 

i'll have time this week , after we finish the new Submit Lineup script , which is flat out awesome when you see it in a few days

[braven112]

I'd love to add the new scoreboard.  I just noticed yesterday that you updated it.  It looks great!  I added a link to your thread on the instructions page so people can install but haven't had a chance to look into styling it myself yet.  If you want to give it a shot I'd add it in.

 

I'm using SASS to help generate the different color themes I have available so its probably easiest to only style one and then I can update it on my end so any new color schemes would get updated automatically too.

 

Looking forward to the submit lineup script.  I made a few adjustments on this template to make it a little more mobile friendly but it could still be a lot better.

[theeohiostate]

When i was creating all the new skins , and trying to make them as mobile friendly as i could , not using any jQuery , not using any scripts , not being able to manipulate the HTML , it was a bit of a challenge lol 

 

Not really too much else you can do really unless they knock it down and build a mobile first design , but i was surprising happy that it turned out as well as it did considering the massive limitations , CSS can only go so far....

 

The new scoreboard is easy , i will knock out the css and send to you for that link you provided 

it will scale down to devices of 220 screen width 

http://www66.myfanta...1&O=247&SEQNO=3

[UCanCallMeMitch]

Braven -

 

Sure, after I set up my Sites for this year, you come up with a clean, easy to use, mobile-friendly and responsive custom template 

 

There's enough time for me to change to it this Season, but two questions:

• TOS - Have you done the CSS for the new Scoreboard?
• braven - What's the chances of you of doing a color scheme that matches SMF's Default Curve Theme as SEEN HERE?

Great work !!

[braven112]

How about this?

http://www59.myfanta...2017/home/65353

[pick5football]

Amazing work.  Well done sir!

 

My only Q....

 

If we wanted to do something with the logo...  what area of the code / css would we edit?

 

THnx

 

EA

[theeohiostate]

Amazing work.  Well done sir!

 

My only Q....

 

If we wanted to do something with the logo...  what area of the code / css would we edit?

 

THnx

 

EA

 

 

delete all the gunk inside this div league_logo container and add a img link to your image

 

 

 

<div class="league_logo" id="league_logo">

                
            <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 415.8 442">
              
              <g class="st0">
                <path class="st1" d="M115.6 499l-1.4-4.2h-11.5l-1.4 4.2h-8.5l11-29.1h9.5l11 29.1h-8.7zm-7.2-21.7l-3.7 11h7.4l-3.7-11zM130 499v-22.6h-8.2v-6.5h23.8v6.5h-8.1V499H130zM168.8 499v-11.7h-12.1V499h-7.5v-29.1h7.5v10.9h12.1v-10.9h7.5V499h-7.5zM182.2 499v-29.1h7.5v22.6h11.7v6.5h-19.2zM205.2 499v-29.1h21.3v6.5h-13.8v4.5h11.4v6.6h-11.4v4.9h13.8v6.5h-21.3zM237.4 499v-22.6h-8.2v-6.5H253v6.5h-8.1V499h-7.5zM256.6 499v-29.1h7.5V499h-7.5zM267.2 484.5c0-9 6.8-15.1 15.8-15.1 7 0 10.8 4 12.7 7.8l-6.5 3.1c-1-2.3-3.4-4.2-6.2-4.2-4.8 0-8.1 3.6-8.1 8.4 0 4.8 3.4 8.4 8.1 8.4 2.8 0 5.3-1.9 6.2-4.2l6.5 3.1c-1.9 3.7-5.7 7.8-12.7 7.8-9-.1-15.8-6.2-15.8-15.1zM296.7 494.9l4-5.9c2.1 2.1 5.3 3.8 9.3 3.8 2.5 0 4.1-.9 4.1-2.3 0-3.8-16.5-.7-16.5-11.9 0-4.9 4.1-9.3 11.6-9.3 4.7 0 8.7 1.4 11.8 4.1l-4.1 5.6c-2.5-2.1-5.6-3.1-8.5-3.1-2.2 0-3.1.7-3.1 2 0 3.6 16.5.9 16.5 11.7 0 5.8-4.3 9.7-12.1 9.7-5.9.2-10-1.6-13-4.4z" />
              </g>
              <path class="st0 st1" d="M172.3 72.3c-3.7 0-6.7 3-6.7 6.7v53.2c0 3.7 3 6.7 6.7 6.7s6.8-3 6.8-6.7V79.1c-.1-3.7-3.1-6.8-6.8-6.8zm-18.1 9.1c-3.7 0-6.7 3-6.7 6.7V123c0 3.7 3 6.7 6.7 6.7s6.8-3 6.8-6.7V88.2c0-3.7-3.1-6.8-6.8-6.8zm90.6-9.1c-3.7 0-6.7 3-6.7 6.7v53.2c0 3.7 3 6.7 6.7 6.7s6.8-3 6.8-6.7V79.1c-.1-3.7-3.1-6.8-6.8-6.8zm18.1 9.1c-3.7 0-6.7 3-6.7 6.7V123c0 3.7 3 6.7 6.7 6.7s6.8-3 6.8-6.7V88.2c-.1-3.7-3.1-6.8-6.8-6.8zm-79.2 31h49.7V98.9h-49.7v13.5z" />
              <path class="st2" d="M78 43.9h259.8v125.2H78z" />
              <path class="st3" d="M207.9 394c-16-7.8-51.6-26.7-81.5-53.8-18.5 1.3-37 3-55.4 5.2 47.3 58.1 123.8 91 128.4 92.9l8.5 3.6 8.5-3.6c4.6-2 81.1-34.8 128.4-92.9-18.4-2.2-36.9-3.9-55.4-5.2-29.9 27.1-65.5 46-81.5 53.8zM381.7 68.5l-6.8-6.5c-2.7-2.5-66.5-62-167-62-100.6 0-164.3 59.4-167 62l-6.8 6.5v106.9c-12.4 2.2-23.8 4.6-34.1 7.2l24.1 146.8c52.7-12 115.8-19 183.8-19 68 0 131.1 7 183.8 19l24.1-146.8c-10.3-2.6-21.7-5-34.1-7.2V68.5zm-43.9 100.6c-38.4-4.4-82.7-6.9-129.9-6.9s-91.5 2.5-129.9 6.9v-81C94.8 75 141.8 43.9 207.9 43.9c65.5 0 112.9 31.2 129.9 44.3v80.9z" />
              <path class="st4" d="M2.9 135.1c-32.9 6.2-65.6 13.7-98.1 22.5 15.2 22.1 30 44.4 44.2 66.9-2.1 26.6-3.6 53.1-4.7 79.6 18.3-4.9 36.8-9.4 55.2-13.5C-8.4 254-16.4 217.5-24.4 181c8.8-15.4 17.8-30.7 27.3-45.9zM512 158.6c-32.3-9.3-64.9-17.5-97.6-24.3 9.2 15.4 18 30.8 26.4 46.4-8.7 36.4-17.3 72.8-26 109.2 18.4 4.4 36.7 9.2 55 14.5-.6-26.4-1.6-53-3.2-79.6 14.7-22.4 29.8-44.4 45.4-66.2z" />
              <path class="st5" d="M207.9 317.6l6.9 21.4h22.5l-18.2 13.3 7 21.4-18.2-13.3-18.2 13.3 6.9-21.4-18.2-13.3h22.5z" />
              <path class="st6" d="M169.2 72.6l10 17.7 19.9-4-13.8 14.9 10 17.7-18.5-8.4-13.8 14.9 2.4-20.2-18.5-8.5 20-4zM107.9 89.6l10 17.8 19.9-4-13.8 14.9 10 17.7-18.5-8.5-13.7 14.9 2.3-20.1-18.5-8.5 20-4z" />
              <path class="st2" d="M169.9 349.7c0 2-.5 3.5-1.4 4.6s-2.2 1.6-3.7 1.6c-1.6 0-2.8-.5-3.8-1.6s-1.4-2.6-1.4-4.6v-3.3c0-2 .5-3.5 1.4-4.6.9-1 2.2-1.6 3.8-1.6 1.6 0 2.8.5 3.8 1.6.9 1 1.4 2.6 1.4 4.6v3.3zm-3.1-3.7c0-1.2-.2-2.1-.5-2.6s-.9-.8-1.6-.8c-.7 0-1.2.3-1.6.8-.4.6-.5 1.4-.5 2.7v4c0 1.2.2 2.1.5 2.7.4.6.9.8 1.6.8.7 0 1.2-.3 1.6-.8.4-.6.5-1.4.5-2.7V346zM255.4 342.8c-1.6 1.9-2.7 3.7-3.3 5.3-.6 1.6-1 3.6-1.3 6l-.1 1.5h-3l.1-1.5c.2-2.2.7-4.3 1.5-6.2.8-1.9 1.8-3.6 3.2-5.1h-5.4l-.1 1.5h-2.3v-3.9h10.7v2.4z" />
              <path class="st7" d="M141.6 83.6l9.8 17.5 19.7-3.9-13.6 14.7 9.8 17.5-18.2-8.3-13.6 14.7 2.3-19.9-18.2-8.4 19.6-3.9zM270.7 83.6l-9.8 17.5-19.7-3.9 13.6 14.7-9.8 17.5 18.2-8.3 13.6 14.7-2.3-19.9 18.2-8.4-19.7-3.9z" />
              <path class="st6" d="M245.8 72.6l-9.9 17.7-19.9-4 13.7 14.9-9.9 17.7 18.5-8.4 13.7 14.9-2.3-20.2 18.4-8.5-19.9-4zM307.1 89.6l-9.9 17.7-19.9-4 13.7 15-9.9 17.7 18.5-8.5 13.7 14.9-2.3-20.1 18.4-8.5-19.9-4z" />
            </svg>

</div>

 

 

 

so new HTML looks like this

<div class="league_logo" id="league_logo">
 <img src="LINK TO MY NEW LEAGUE LOGO IMAGE">
</div> 

[UCanCallMeMitch]

braven -

 

I thought this image was appropriate because of what I'm about to ask

 

First, your template contribution is great and adding the css code losely-based on the SMF Curve theme is over and beyond what anyone would expect, but . . . (yea, there's always a but)

 

I was wondering if in your free time and if you are willing to change a couple of things with the Curve Theme as described below

• Mimic the menu more closely
• Change the Captions so that are somewhat the same as SMF Curve

Thanks Again.

 

P.S.  The poster image width for the Message Board needs to be adjusted.

[braven112]

I probably won't have time to do that.  You are welcome to customize it though using the @import rule.  Anyone can customize these a little further by importing the css file and then adding your own customizations below.

www.youtube.com/watch?v=IjDSAbb-IZo

[UCanCallMeMitch]

I was reaching and hoping. 

 

Keep up the good work.

[Shogun]

Braven,

 

First of all excellent job! Thank you for putting this together and offering it to the community - kudos!

 

I was able to add the custom submit player script into the template, looks good just need to modify the colors.

 

http://imgur.com/a/iEiOU

 

I went ahead and tried to take TOS' suggestion and add the 2017 scoreboard into the template.  Had to copy your CSS and put in a separate file to add the board. Seems to work, but definitely having some alignment and appearance issues (see screenshot below), I will keep trying to mess around with it.  Anyone have any ideas?

 

http://imgur.com/a/TigJC

 

Here is a link to the scoreboard on the mobile template http://www81.myfanta...ODULE=MESSAGE13

[theeohiostate]

need a link to the scoreboard 

[Shogun]

need a link to the scoreboard 

 
That would probably help, oops.  I edited the original posting an added it in.  The submit lineup module seems to be having alignment issues now too. Which is weird since I didn't even make any changes since my first post.  Things don't seem to play well together, but I am probably just doing something silly.

[theeohiostate]

to get the scoreboard looking properly , this is all you need to add to the style that isn't already provided in the scoreboard css files

#outerMFLScoreboardDiv table{width:100%;}
#outerMFLScoreboardDiv{border-radius: 4px;padding: 10px 5px;box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);background-color: #1f1f1f;}
#outerMFLScoreboardDiv .report-wrapper{padding:0;border-radius:0;box-shadow:none;background-color:none}
#outerMFLScoreboardDiv .MFLMainScoreboard td,#outerMFLScoreboardDiv #scoreboardHeader{text-align:center;} 

 

Braven could include this css in his master stylesheet , as it will only target the new scoreboard , the only thing he need to do is change the #outerMFLScoreboardDiv{ box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);background-color: #1f1f1f;} , depending on what color scheme