SportsEngine Community Forum
Register Latest Topics
 
 
 


Reply
  Author   Comment  
robbedeaux

Avatar / Picture

Moderator
Registered:
Posts: 192
Reply with quote  #1 
This is a pretty neat feature you can apply to a background to tint it. 

Place the following code in your head code of a page (or cascading pages)

Code:
<style type="text/css">
.site-background {
background-blend-mode: multiply;
}
</style>


Now set your background in the admin control panel to have a greyscale image and then set the background color. You should then see the image have the tint of the background. You could use this to set different sections of your site to have the same background image but be tinted different colors to allow them to stand out as distinct. 

To learn more about CSS Blends check out https://css-tricks.com/basics-css-blend-modes/

__________________
Rob Bedeaux
SENIOR MANAGER, PRODUCT MARKETING
Main Office | 612.379.1030

SportsEngine | 807 Broadway St NE, Ste 300, Minneapolis MN 55413
Play Smarter. Live More.
bryanbhopper

Junior Member
Registered:
Posts: 10
Reply with quote  #2 
Rob,

I really love when you put coding tips like this on the forums. Its these little customizable tweaks that make the subtle difference between a regular page and a customized one.

This one doesnt seem to work though. When I put the head code in our "summer internships" page it got all funky on me in edit mode. See the screen shot below.

Screen Shot 2016-09-09 at 9.26.13 AM.jpg 

robbedeaux

Avatar / Picture

Moderator
Registered:
Posts: 192
Reply with quote  #3 
Hey Bryan,

Sorry I missed the close style tag above. I've updated it.

-rob

__________________
Rob Bedeaux
SENIOR MANAGER, PRODUCT MARKETING
Main Office | 612.379.1030

SportsEngine | 807 Broadway St NE, Ste 300, Minneapolis MN 55413
Play Smarter. Live More.
Previous Topic | Next Topic
Print
Reply

Quick Navigation: