Vista Girls Softball site good example of detailed design work
David Muro’s flair for design and eye for color -- not to mention a little help from a hibiscus -- have transformed the Vista Girls Softball website from a blank canvas into a work of digital art.
The webmaster, a featured speaker at Sport Ngin’s recent SNUG San Diego event, said he’s received rave reviews from parents and other members of the organization for the “ESPN” treatment he’s given the site. Frequently, Muro says, he hears positive comments about the scoreboard ribbon at the top of the site’s home page.
The scoreboard ribbon is an obvious showpiece, but Muro’s design work is layered throughout the site, right down to the last detail. Which brings us to this week’s Pro Tip. For webmasters who want to replace the gray pennants that serve as default logos on team pages but aren’t sure what to use, Muro has a simple, smart and colorful solution.
Since the hibiscus appears prominently in Vista Softball’s logo and in other promotional material, he used an image of the flower as the starting point to create logos for each of the organization’s teams. Using Photoshop, he simply added layers of colors behind the hibiscus image, with the colors matching each team’s uniform.
Basic ability in Photoshop or another, similar program is required to create your logos. The recommended size is 200 pixels high by 600 pixels wide. In this case, Muro matched the colors of his logos with each team’s uniform colors. Once the logos are created, the rest of the work can be done through the Admin Control Panel.
Make sure you are logged in and in edit mode. Click on the Admin Control Panel Link, then select Sport Management from the main menu. In the sub-menu below, select the Teams option, then select the pencil and notepad icon in the far right column. Note: The location and look of the Admin Control Panel link varies depending on the Sitebuilder template.
Click the Choose File button to upload your logo. You can also adjust the primary and secondary colors on your team page to match the colors of your logo.
Logos also can be replaced directly from the team page. Just click on the Admin tab, then select Options from the dropdown menu. Click the Edit Team link on the next page.
Select Choose File to upload your logo, then hit the Save Team button. Primary and secondary colors can also be changed on this screen.
Note: Your logo must be either an SVG or PNG with a transparent background. For responsive v4 themes, the logo shape should be 1:1 while on pre-v4 themes it should be 1:3