Styling Issues: Widgets

Hi Birgit

1. Our newer widgets should be better at leaving font styling up to the theme. Try the:

SiteOrigin Features widget
SiteOrigin Post Carousel widget

To replace the Circle Icon and regular Carousel widget.

2. Once you have the new SiteOrigin Post Carousel widget in place we can help with tweaking the font setup. Corner rounding is unfortunately more of a custom development task.

3. Icon size control is unfortunately not yet a feature of the Circle Icon widget. Give the newer SiteOrigin Features Widget a try. Icon size is a setting there.

4. You can set a border color by editing the widget in Page Builder and clicking the Design tab on the right then Border Color. Rounded corners, unfortunately a custom development task.

Hope that helps.

Please send through a link to the page concerned, we’ll take a look at what’s happening with the font setup there. Thanks.

Thanks :)

Carousel Widget

/* SO Carousel Widget Title */
.panel-grid-cell .sow-carousel-wrapper .sow-carousel-title .widget-title {
  font-size: 1.1429em;
  text-transform: uppercase;
}

/* SO Carousel Widget Post Headings */
.panel-grid-cell .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item h3 {
  font-size: 1em;
  font-weight: 700;
  text-align: left;
}
.panel-grid-cell .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item h3 a:hover {
  color: #0896fe;
}
.panel-grid-cell .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item .sow-carousel-thumbnail a span.overlay {
  background: #0896fe;
}

Features Widget

/* SO Features Widget Container */

.sow-features-list .sow-features-feature {
text-align: left;
}

/* SO Features Widget Heading */

.sow-features-list .sow-features-feature h5 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
}

/* SO Features Widget More Text */

.sow-features-list .sow-features-feature p:last-child {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
text-align: left;
}

/* SO Features Widget More Text Link */

.sow-features-list .sow-features-feature p.sow-more-text a {
  color: #e08331;
}

Adjust as required.

This widget unfortunately doesn’t have an icon left option like Circle Icon. It’s in the pipeline. Unfortunately no ETA yet.

3. Unfortunately no height option for SO Slider yet. Hopefully soon.

All CSS above must go under Appearance > Custom CSS. Some is pulled from another project. Just adjust values as required. You can also remove properties that you don’t need to edit.

Want to know how this info is gathered and used? See:

https://siteorigin.com/basics/modifying-theme-design-with-custom-css/

Sure.

For the feartures widget add:

/* SO Features Widget More Text Link Hover */

.sow-features-list .sow-features-feature p.sow-more-text a:hover {
  	color: #e08331;
	text-decoration: none;
}

Replace the color as required.

2. Try changing the carousel title rule to:

.sow-carousel-title h3.widget-title {
  font-size: 0.8em !important;
  text-transform: uppercase;
  text-align: left !important;
}

And the carousel post headings to:

.sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item h3 {

}

Thumbnail size is being outputted by the following, you could look at using it:

.sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item .sow-carousel-thumbnail a {
  display: block;
  width: 242px;
  height: 162px;
  background-size: 242px 162px;
  background-position: center center;
}

4. I’ve noted this as a feature suggestion. Unfortunately, it would be more of a medium term thing if it gets implemented.

Super, glad to hear that helped :)

All the best with your project.