Customize Widget Background

  • Created : Feb, 19, 2017
  • Last Updated: Mar, 31, 2022

The FeedWind widget is totally customizable and can be styled to match virtually any website. This article focuses on background styling options. These are the options in FeedWind’s general settings that contain background image options:

  • Feed Title – The main title that appears above your feed content.
  • Feed Content – The container that holds all the feed items.
background setting

Options for Feed Title and Feed Content

These options to customize the background are the same in the ‘Feed Title’ and ‘Feed Content’ sections. Both are found in the ‘Advanced settings’ of their respective sections.  Follow these paths in the setup screen to locate each option for your feed’s title and content:

  • Feed Title > Advanced settings > Background image
  • Feed Title > Advanced settings > Background image size
  • Feed Content > Advanced settings > Background image
  • Feed Content > Advanced settings > Background image size

Color

Use this option to choose the background color for Feed Title or Feed Content. Select one of the standard colors for a quick setup. For more specific color selection, use enter/paste a hex code or use the color picker (the square next to the hex code text box, which is white by default). FeedWind supports 3-digit and 6-digit hex color codes.

Font Color

Use this option to change the font color of your titles or content.  Color selection works the same as the background color, where you can either select a font color from the color picker or type/paste a hex color into the adjoining text box. 

Background Color setting

Transparency

To make a background or font color transparent, type the word “transparent” instead of a hex code.

background-transparent

Background Image

Use this option to edit the background image using a URL.  These can usually be attained by right-clicking an image on the Web and selecting an option like ‘copy image address’.  The URL can be pasted into the text box next to ‘Background image’.

background-image-right-click

background image url

Background Image Size

This option selects how the background image is presented from the previous step. It has three options:

  •  Auto – FeedWind will automatically estimate the best dimensions for the background image based on its original size.
  • Cover – Stretches the image to cover the entire feed container.  The uppermost horizontal section is usually visible, as the remaining portions are covered by the feed itself. 
  • Contain – Resize the image to make sure it is fully visible in the feed container. This option will apply a tile effect if it is too large to be contained in a single space.
Background-image-size

Feed item background

To set the color for the background of each individual feed item, you must use a custom CSS where there are styleable classes available for all the elements of the widget.


Related posts

FeedWind Analytics Feature

FeedWind Analytics Feature

FeedWind’s Analytics feature is a mechanism for users to tally the amount of impressions received by a widget or...

Remove FeedWind Branding Logo “powered by feedwind”

Remove FeedWind Branding Logo “powered by feedwind”

how to remove the FeedWind Branding Logo into the widget

Preloaded Text

Preloaded Text

An official document detailing FeedWind’s Preloaded Text feature. Use this feature to show customized text on the loading screens...

Start your free trial. FeedWind is the easiest way to add dynamic content on your website.
Create Now