Changing Sportsbook Widget Icon in XF2.1

[ZackM]

Is it possible to change the icon of a sportsbook widget in XF2.1? If so, how might I go about doing it?

 

[Bob]

There are 10 Widget Definitions for creating Sportsbook Widgets. Which definition are you asking about?



Maybe you can you post me a screen shot of what you are talking about, as I have no idea what "the icon" is?

When you say "the icon" are you talking about the Category Logo or a Font Awesome Icon that might be displaying on a widget created by a specific widget definition (if so, I'd need to know which definition).

OR could you be talking about a 3rd party style that sometimes add's ICON's to Block Headers.

Screen shot(s) are probably going to be the most helpful

 

[ZackM]

I am using the Upcoming Events widget. It's currently on a test install here: Duke Forum - Test Site

 

[Bob]

OR could you be talking about a 3rd party style that sometimes add's ICON's to Block Headers.

That FA icon is not being added by Sportsbook. That is being added by your style to the block header via the block-minorHeader css class. A lot of 3rd party styles like to add FA Icons to block headers. Its the same code that is adding the FA icon to the sidebar block headers that also use the core xf css class "block-minorHeader" (which is not designed only for sidebar blocks).



You have the Widget configured to use the display style "Simple" which is for sidebar blocks, not main content areas.

This is what it looks like on Default XenForo style when using the Display style "Simple" (which is designed for use in sidebars). The block uses the core xf block-minorHeader class, which does not add an icon. Again, this display style is specifically intended for use in the sidebar, so it uses the block-minorHeader class.



What you should do is edit the Widget and change the display style to "Full - List view" since you are displaying the block in the main content area (non sidebar). This uses the CSS Class "block-header" vs "block-minorHeader" which is a different style of header.



This is what the block looks like using the display style "Full - List view" instead of "Simple". You'll notice that the layout of the event is a bit different as well as its designed to display more information since its being used in a larger space.



If you WANT to use the SIMPLE layout and display a different FA Icon, you'd have to edit the output template for that specific widget and add a custom CSS class to the H3 element, then you could apply the same CSS as your 3rd party style is using to display a different ICON there. IMO tho, it would look better with the same block headers as the Category's on Forum Home vs the minor header.

Hope that makes sense?

 

[ZackM]

Brilliant. Thanks for taking the time to explain it all.

 

[Bob]

You are welcome Hope you enjoy the addon!