Jump to content

Add background color to text block


jmarcus

Recommended Posts

  • 4 months later...

Good Morning from YETI Lacrosse in Chicago

 

So you can change the background color and the text color of the Text Block Text Color.  I made the example look like this:

 

Screen Shot 2019-10-03 at 10.57.15 AM.png  It's really pretty simple.

 

First - obviously add your text box. While you are doing that - add the classname - subtext. It is located on the same screen where you enter the text.

 

Screen Shot 2019-10-03 at 11.00.14 AM.png 

Next - a little about SportsEngine css if you are not aware of it.  

 

On each page of a SE website you have the ability to enter custom CSS to change page elements.  (Sometimes you may not be able to see Edit <HEAD> Code - just contact your rep and they can turn it on for you) 

Screen Shot 2019-10-03 at 11.02.12 AM.png

When you enter the head code area there are 2 boxes.

 

Screen Shot 2019-10-03 at 11.02.22 AM.png 

 

The first is single page. Anything entered in this box will effect ONLY THE PAGE YOU ARE ON.

 

The second box is Cascading. Anything entered in this box effect this page AND ALL PAGES BELOW IT.

 

Cascading is the most popular because of the ability to migrate the code down to all the pages. THERE IS A CATCH HOWEVER.

You must enter the Cascading code on EACH PAGE THAT RESIDES IN THE MAIN MENU. If you enter the Cascading Code on any of those pages, the code will 'trickle' down.

 

So

if you want this effect on one page - use the single page entry.

If you want this effect on all the pages - use the cascading entry and ensure it is placed on the highest level page on your site. (go to home - select pages - then select main menu - all those pages are top level)

 

FINALLY

This CSS Code will change the subtitles as long as you enter the class name where I indicated on the add text box element.

 

<style>

.pageEl.subtext H3 {

            background-color: red;

            color: white;

}

 

</style>

 

Close up the HEAD CODE dialog box and let the page refresh and that should take care of you.

 

[Just as a note - you can also use the # html colors for the Background-color and color - i.e. background-color: #339966 (green) ]

You can find those colors all over the internet but here is a good resource.

That should take care of what you need to do...

 

Mark

YETI Lacrosse

(SportsEngine)

937008815_ScreenShot2019-10-03at10_57_15AM.png.ce41e8ef0811f7abe4a14b7a024c4a34.png

892012067_ScreenShot2019-10-03at11_00_14AM.png.be596068122ee8e0640756f88133baf9.png

1394173227_ScreenShot2019-10-03at11_02_12AM.png.6e2d4aa6780410188a5c5a7187988ad8.png

1360682821_ScreenShot2019-10-03at11_02_22AM.thumb.png.c5ae4622e746e65d5fd4b8e79d0a8a22.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...