Styling Widgets

In this blog post, I’m going to discuss various ways in which you can restyles widgets in the Telligent Evolution platform.  This article assumes you have basic knowledge of CSS, and and have had some experience with either the fiji theme from Telligent Community, or the evolution2 theme from Telligent Enterprise.  All the examples in this blog post will use Telligent Enterprise’s evolution2 theme, but the same concepts apply for Telligent Community’s fiji theme as well as any custom themes you may create.

Structure of a Widget

Widgets in the Telligent Evolution platform typically have three Css Classes

• content-fragment
• a class name indicating the type of widget ( e.g. blog-post-list) .  This is generated from the class name used by the widget)
• a class name indicating the layout of the widget (e.g. full-border)

Within this widget, there are three main areas

• Header (<div class="content-fragment-header" />)
• Content (<div class="content-fragment-header" />)
• Footer (<div class="content-fragment-header" />)

To demonstrate these three regions, add the following CSS to the CSS Overrides section of your theme’s configuration.

.content-fragment
{
  border: 10px solid #9f9;
}
.content-fragment .content-fragment-header {
   background-image: none  !important;
   background-color: #666  !important;
   color: #fff  !important;
   border: none !important;
}

.content-fragment .content-fragment-content {
   background-color: #ccf;
   border: none !important;
}

.content-fragment .content-fragment-footer {
   height: 5px;
   background-color: #f00;
}

This will transform a widget in the Telligent Enterprise Theme as follows.

Targeting a particular type of widget

Above, i mentioned that widgets included a CSS class indicating the type of the widget.  We can use this to make our CSS Selectors more specific so that they only target a particular type of widget.  Let’s say we want to target the Generic Content widget, we can use a tool such as Firebug for Firefox, or the IE Developer Tools to inspect a Generic Content widget.  We can see that the Generic Content widget has a "html-content” css class which is the class used to indicate a Generic Content Widget.

So to style just Generic Content widgets, instead of targeting just elements with the content-fragment class, we want to target all elements with the content-fragment AND html-content class.  For example, if we wanted to make the content of all generic content widgets larger and bold, we could use the following CSS:

.content-fragment.html-content .content-fragment-content
{
  font-size: 1.2em;
  font-weight: bold;
  color: orange;
}

Targeting particular styles of widgets

This is very similar to targeting widgets of a particular type.  If you use a tool such as Firebug to inspect the HTML of a widget, you’ll see a CSS Class indicating the style of the widget.  For example, say we want to target all widgets using the No Wrapper with Spacing or No Wrapper with No Spacing options  We can use the following CSS.

.content-fragment.no-wrapper
,.content-fragment.no-wrapper-with-spacing
{
  background-color: #9f9;
}

Gives us

Targeting widgets in a particular region

If you have a look around the HTML structure using Firebug, you’ll see that widgets are placed within layout regions.  You can use these layout regions to target only widgets in a particular areas of the page.  Say for example we want change the colour of headers in the left and right sidebars, we can use the following CSS

.layout-region.left-sidebar .content-fragment .content-fragment-header
,.layout-region.right-sidebar .content-fragment .content-fragment-header
{
  background-image: none;
  background-color: #ccc
}

Targeting an individual widget

Be careful using this technique as the ID of a widget can sometimes change when a page is edited – see Ben Tiedt’s comment below.

If you use Firebug to inspect the markup of a widget, you’ll see that each widget has a unique id fragment-XXXX (where XXXX is an integer).  You can use this to target one particular widget.  For example, say we want to give the bottom right Generic Content (with an id of fragment-2146) a different coloured header to make it stand out, you could use the followign CSS

#fragment-2146 .content-fragment-header
{
background-image: none;
background-color: #f00;
color: #fff;
}

Targeting Widgets on a particular Page

If you inspect the marrkup of the main page using firebug, you’ll see that all widgets are wrapped in a div with the css class “content-fragment-page”, and an additonall css class based on the page you’re on.  You can use this to target just widgets on a particular page.  For example to use the Impact font for just widgets on the homepage, use the following css

.content-fragment-page.common-home .content-fragment .content-fragment-content
{
font-family: impact;
}

Targeting Widgets on a particular page layout

Looking a bit deeper into the HTML markup, you’ll see that the main widget area is wrapped in a div with the css class layout-content, and an additional css class based upon the page layout in use.  Again, we can use this to target just widgets.  For example, say we want to change the border of al widgets on pages using a header, main content and left sidebar

.layout-content.content-left-sidebar-right .content-fragment
{
   border: dotted 5px;
}

Putting it all together

You can combine all these ideas together for some very detailed styling.  Let’s say you want to restyle all generic content widgets using the no wrapper layout in the left sidebar of the homepage, when it’s using a header & three column layout.  (Quite why you’d want to do something this specific I don’t know, but it’s more a demonstration that it can be done, as opposed to something that you would want to do).

.content-fragment-page.common-home .layout-content.header-top-sidebar-left-content-center-sidebar-right .layout-region.left-sidebar .content-fragment.html-content.no-wrapper .content-fragment-content 
{
  background-image: none;
  background-color: #cfc
}

Conclusion

I hope this post gives you some ideas of different ways in which you can customise widgets in themes.  If you have a look around my website, you’ll see I have some custom CSs that specifically restyles any widgets usingthe No Wrapper styles.  I have also updated all sidebar widgets to use the No Wrapper style to give my site a unique look.  I have also updated the header of other widgets to have a gradient background, and removed the rounded corners from the bottom of widgets.