Home » Support » Telligent Evolution Platform » Telligent Community » Discussions » Modifying CSS class of individual widget containers

Modifying CSS class of individual widget containers

Open Support Ticket

Call Support:
Direct: (214) 420-1337
Toll Free: (877) 522-6334

Monday through Friday
8 a.m. to 6 p.m. Central (GMT-6)

Join our Community
Details
  • 4 Replies
  • 1 Subscriber
  • Posted6 months ago
Options

Modifying CSS class of individual widget containers

This question has suggested answer(s)
Robert Miller
Posted by
on Tue, Oct 23 2012 8:05 PM

Is it possible to use a user-defined widget property to modify the CSS class applied to the markup of the widget's outside DIV? For example, here is a container DIV for a typical Generic Content widget:

<div id="fragment-70147" class="content-fragment html-content full-border with-header">...</div>

Let's say the widget is customized to expose a drop-down menu of CSS style choices when configuring the widget. If the user selected "Promotion" from the style menu, I would like that instance of the Generic Content widget to render like so:

<div id="fragment-70147" class="content-fragment html-content full-border with-header promotion">...</div>

Is that possible without using Javascript to modify the DOM?
All Replies
  • Adam Seabridge
    Posted by
    on Tue, Oct 23 2012 9:57 PM
    Suggested Answer

    Hi Robert,

    Are you using 6.0 or above?

    If so then you just need to go into the control panel and find the widget in widget studtio and click on the configuration tab. scroll down and find the CSS Class textbox and add in your additional class here. Save it and clear the cache and you should get the additional class rendered.  

    If you don't want this class on all instances of the widget when you need to take a copy of it and add a configuration property called something like "cssClass" to allow you to enter the css class dynamically with you place the widget on the page and then you could output this in the CSS Script section like so: $core_v2_widget.GetStringValue('cssClass', ' ').

    Hope this helps

    Adam
  • Robert Miller
    Posted by
    on Tue, Oct 23 2012 10:39 PM

    Hi Adam,

    Yes, we are using TC6.1. My intention is to create a widget that may have the CSS class changed on widget instances by the end user, so your second suggestion is the closest. Unfortunately, the NVelocity code is rendered inside of the outer-most widget container that I want to modify, so it appears that we can style everything within the widget borders but not the borders themselves. I was hoping to style the widget borders and contents on an instance level. Does that make any sense?
  • fmarion
    Posted by
    on Mon, Nov 19 2012 3:20 PM

    I would like to bump this question... I also need a class that would allow me to wrap a widget (and include the borders). Anyone have any ideas?
  • fmarion
    Posted by
    on Mon, Nov 19 2012 3:28 PM

    Ah... I just realized you can turn off the borders in "edit page" mode. Robert: that means you could re-create the borders (and style them how you want) inside of the wrapper class. Just make sure you turn off the borders on the widget itself...