Featured Content Carousel Title Size

How can you reduce the size of the title font in the featured carousel widget as it is much bigger than the description?  We are currently using it in a skinny column

Parents
  • You can use Widget Studio to add some custom css to the widget.  Here is an example of some code that might work for you.

    .right-sidebar {
        .content-fragment.featured-content-carousel .slider-container .slider .content-list.content>.content-item>.content .name {
            font-size: 14px;
        }
        .content-fragment.featured-content-carousel .slider-container {
    		height: 155px !important;
        }
    }

  • Is there a non-developer guide for how to apply this? It's not apparent where I would insert the example into the css tab:

    $core_v2_widget.ExecuteFile('config.vm')
    #if ($fullWidth)
    	full-width
    #end
    #if (!$foregroundFullWidth)
    	foreground-page-width
    #end

  •   Here are a few steps to get you started:

    • In Widget Studio > Featured Content Carousel, make a copy of the widget (keeping the stock one as-is, you'll edit the copy)
    • Update the Name on the copy to show the difference
    • In style.less, add the code from Mathew on line 12
      • Note -- I added comment text using the // at the beginning of the line so that it's easier to identify the difference in the future
    • Publish your new widget
    • Add your widget to the right sidebar on a page:
      • Old
      • New

    You can adjust the font size from the original code if you want it bigger or smaller, as well as plenty of other options.

    I know that Social Edge has a widget as well that has some similar UI changes, as well as a few other changes, but I don't see it in Marketplace.  or  might be able to provide more information to you directly if you're interested.

Reply
  •   Here are a few steps to get you started:

    • In Widget Studio > Featured Content Carousel, make a copy of the widget (keeping the stock one as-is, you'll edit the copy)
    • Update the Name on the copy to show the difference
    • In style.less, add the code from Mathew on line 12
      • Note -- I added comment text using the // at the beginning of the line so that it's easier to identify the difference in the future
    • Publish your new widget
    • Add your widget to the right sidebar on a page:
      • Old
      • New

    You can adjust the font size from the original code if you want it bigger or smaller, as well as plenty of other options.

    I know that Social Edge has a widget as well that has some similar UI changes, as well as a few other changes, but I don't see it in Marketplace.  or  might be able to provide more information to you directly if you're interested.

Children