SportsEngine Community Forum
Register Latest Topics
 
 
 


Reply
  Author   Comment  
jakedonahue

Junior Member
Registered:
Posts: 5
Reply with quote  #1 
I've uploaded a Square logo (600x600) as recommended when creating a new team. However, our standings page shows the old horizontal size and looks pretty ugly. Any way to get this fixed?
loren

Avatar / Picture

Community Manager
Registered:
Posts: 213
Reply with quote  #2 
Happy to take a look. Can you send a screenshot of the standings page in question?

- Loren
jakedonahue

Junior Member
Registered:
Posts: 5
Reply with quote  #3 
Thanks for the quick reply, Loren. Here is a link to the page: http://www.ord4.com/page/show/3274443

As you can see, the League Logo looks great as a square. But in the standings, they get cropped into a horizontal bar.
loren

Avatar / Picture

Community Manager
Registered:
Posts: 213
Reply with quote  #4 
I checked out some other sites with the same responsive theme, and it looks like the logos in the standings all get cropped the same way, into a horizontal bar with white space added all around. I'll check and see if there are any potential workarounds.
loren

Avatar / Picture

Community Manager
Registered:
Posts: 213
Reply with quote  #5 
Finally, an update: I checked in with "Coach" Carl at Benicia Little League and he did an override on the style elements for team logos.

Not sure if you have any experience or interest in adding code, but here's what Carl provided:

.teamLogo-tiny { border-top-left-radius:10px;

                 border-top-right-radius:10px;

                 border-bottom-left-radius:10px;

                 border-bottom-right-radius:10px;

                 }

                  

.teamLogo-large { border-top-left-radius:20px;

                 border-top-right-radius:20px;

                 border-bottom-left-radius:20px;

                 border-bottom-right-radius:20px;

                 clip:rect(0px,35px,0px,35px);

                 overflow:hidden;

                 }

                  

.teamLogo-small { border-top-left-radius:10px;

                 border-top-right-radius:10px;

                 border-bottom-left-radius:10px;

                 border-bottom-right-radius:10px;

                 }

Also from Carl: 

 

Quote:

The person would need to select the size they want for each one and make the change accordingly. The logos you create must still be the expected SE size so the part that is displayed must be centered properly.

 

The trick is making the radius the same size as 1/2 the width of the image. you must use the ‘clip:rect’ part to ensure you start with the right size.

 

Here's what a standings page looks like on Carl's site: http://www.benicialittleleague.com/standings/show/3045247?subseason=366957

If you have any questions or want to try to implement this, I'm guessing Carl would be willing to give you a hand. Let me know if you want me to connect you with him.

- Loren

loren

Avatar / Picture

Community Manager
Registered:
Posts: 213
Reply with quote  #6 
Finally, an update: I checked in with "Coach" Carl at Benicia Little League and he did an override on the style elements for team logos.

Not sure if you have any experience or interest in adding code, but here's what Carl provided:

.teamLogo-tiny { border-top-left-radius:10px;

                 border-top-right-radius:10px;

                 border-bottom-left-radius:10px;

                 border-bottom-right-radius:10px;

                 }

                  

.teamLogo-large { border-top-left-radius:20px;

                 border-top-right-radius:20px;

                 border-bottom-left-radius:20px;

                 border-bottom-right-radius:20px;

                 clip:rect(0px,35px,0px,35px);

                 overflow:hidden;

                 }

                  

.teamLogo-small { border-top-left-radius:10px;

                 border-top-right-radius:10px;

                 border-bottom-left-radius:10px;

                 border-bottom-right-radius:10px;

                 }

Also from Carl: 

 

Quote:

The person would need to select the size they want for each one and make the change accordingly. The logos you create must still be the expected SE size so the part that is displayed must be centered properly.

 

The trick is making the radius the same size as 1/2 the width of the image. you must use the ‘clip:rect’ part to ensure you start with the right size.

 

Here's what a standings page looks like on Carl's site: http://www.benicialittleleague.com/standings/show/3045247?subseason=366957

If you have any questions or want to try to implement this, I'm guessing Carl would be willing to give you a hand. Let me know if you want me to connect you with him.

- Loren

gwipper

Junior Member
Registered:
Posts: 9
Reply with quote  #7 
Rather than make your customers go through all of these gyrations, wouldn't it be more customer friendly if SE made the team logos and the standings logos the same format (i.e. 600X600)?
loren

Avatar / Picture

Community Manager
Registered:
Posts: 213
Reply with quote  #8 
Good idea. In fact, I just submitted this in our Ideas portal: http://community.sportsengine.com/ideas#sitebuilder
Previous Topic | Next Topic
Print
Reply

Quick Navigation: