Custom CSS

feedwind-icon-trans Easy Steps

Create a custom RSS widget using CSS


  1. Sign in to Feedwind, then open your RSS widget for editing (or create a new widget)
  2. Create a new CSS file on your local server or in the cloud (e.g. Dropbox)
  3. In the FeedWind setup screen, click on the General section > Advanced link
  4. Paste the URL of your CSS file into the field provided and click on the refresh button next to the field
  5. Use the  Save & Get code  button to save your widget and get the code to insert in your website

Using CSS to create a FeedWind custom RSS widget

FeedWind allows advanced users to set up their own custom cascading style sheet (CSS). This is achieved by creating a custom CSS files which can contain a wide range of CSS which will allow you to create a custom RSS widget.

We have specific tutorials for the following customizations:

  • General customizations – including more advanced font & border settings, and site design matching. whereby you can match the look and feel of your blog or site by applying styles you created yourself to the FeedWind widget.
  • Container dimensioning – fixed and percentage sizing and scrollbars.
  • Container borders – line thickness, colors and symmetric /asymmetric border radius.
  • Fonts – font families, colors and text effects.

Detailed instructions

podcasting rss widget1. Create a CSS file

Use your favorite text editor or software to prepare the CSS file. FeedWind is constructed with the following HTML code. Notepad++ is a great free editor that is ideal for creating a CSS file.

Tip: If you use an online platform or for any other reason you want to host your CSS file elsewhere, please check out this article on how to use Dropbox to host CSS.

A basic file would look something like the example below, and produce the simple customization you see to the right. As you can see the CSS is split into three sections; the Container, Header and Content. We have commented these in red to mark them below. You can simply copy this code into Notepad++ or your text editor and modify the contents, then save is as myfilename.css (or whatever name you want but it must have the .css extension).

2. Upload the CSS file to your webserver and take note of its URL

Place the CSS file on your local server or use a service such as Dropbox to store your CSS file offsite.

3. Input the CSS URL

Click on the >Advanced Settings link in the “General” section of the setup screen. Enter the URL of the custom CSS location in URL of Custom CSS box. The new styling should be reflected in the Preview widget.

Note: When using a custom CSS, some parts of the settings screen will be grayed out and disabled. This is to prevent conflicts between FeedWind’s default settings and settings in the custom CSS. When a custom CSS is used, those settings will be enabled.

Match your settings to the container available

FeedWind has an option for setting the maximum length of the titles and content of feeds. FeedWind automatically adjusts the number of feeds shown based on the value entered for the maximum length. Because of this, sometimes a feed may be displayed outside of the border depending on the line-height and other settings in the custom CSS. In this case, please adjust the settings in the CSS file.

EXAMPLE FEEDWIND CUSTOM CSS TEMPLATE

Here is an example custom RSS widget (see below for the CSS used):


/* This adds the ability to utilize Google WebFonts in your FeedWind widget */
@import url(http://fonts.googleapis.com/css?family=Noto+Sans);

/* This is the styling for main feed container - NOTE: the background-color affects the footer background.*/
#fw-container {
 text-align: left;
 padding: 10px;
 font-family: 'Noto Sans', Helvetica, sans-serif;
 border: 1px solid #0E4FAE;
 border-radius: 4px;
 box-sizing: border-box;
 background-color:#4e82d0;
}

/* This is the styling for the header container*/
#header {
 margin: 10px 20px 10px 20px;
 color: #fff;
 font-size: 18px;
 background-color: #888;
 background-image: url("http://glassho.me/fwtest/bannertop.png");
 background-repeat: repeat-x;
}

a.fw-feed-item-url {
 text-decoration: none;
}

.fw-feed-item {
 display:block;
 }

/* This is the styling for the main Feed Title in the header container*/
.fw-feed-title {
 margin: 10px 20px 10px 20px;
 font-weight: bold;
 word-wrap: break-word;
 text-align: center;
 text-shadow: 2px 1px 0px #000080;
 display:block;
}

/* This is the styling for the Feed Title link in the header container*/
.fw-feed-title a:link {
 color: #fef;
 text-decoration: none;
}

/* This is the styling for a "visited" Feed Title link in the header container*/
.fw-feed-title a:visited {
 color: #ddd;
 text-decoration: none;
}

/* This is the styling for a Feed Title link on "mouseover" (also known as "hover") in the header container*/
.fw-feed-title a:hover {
 color: #fff;
 text-decoration: none;
}

/* This is the styling for an "active" Feed Title link in the header container*/
.fw-feed-title a:active {
 color: #fff;
 text-decoration: none;
}

/* This is the styling for the feed body (i.e all Feed Items) container. */
/* WARNING: be careful adding Left or Right Padding as you can lose the scrollbar when the L/R padding is set to more than 8px; the scrollwheel on a mouse still works however, but the scrollbar can disappear after 8px of padding either side. Use Margins instead add space around the content container.*/


/* This is the styling for the Feed Item content in the body container*/
.fw-feed-item-content-module {
 margin: 10px;
 height: 160px;
 padding: 10px;
 border-bottom: 1px solid #bbceeb;
 box-shadow: 0px 1px 1px #222;
 background-color: #d1e3ff;
}

/* This is the styling for the Feed Item Title in the body container*/
.fw-feed-item-title {
 display:block; 
}

/* This is the styling for an "unvisited/unclicked" Feed Item Title link in the body container*/
.fw-feed-item-title a:link{
 margin: 20px 0 10px 0px!important;
 color: #00aeff;
 text-decoration: none;
 font-size: 16px;
}

/* This is the styling for a "visited/clicked" Feed Item Title link in the body container*/
.fw-feed-item-title a:visited{
 color: #39f;
 padding: 20px 0 0 0;
 text-decoration: none;
}

/* This is the styling for a Feed Item Title link on "mouseover" (also known as "hover") in the body container*/
.fw-feed-item-title a:hover{
 color: #39c;
 text-decoration: none;
 padding: 20px 0 0 0;
}

/* This is the styling for an active Feed Item Title link in the body container*/
.fw-feed-item-title a:active{
 color: #09f;
 text-decoration: none;
 padding: 20px 0 0 0;
}

/* This is the styling affecting a Feed Item Date for a feed item in the body container*/
.fw-feed-item-date {
 display:block;
 margin: 0 20px 0 3px;
 padding: 0 2px 0 3px;
 color: #999;
 font-size: 10px;
 text-align: right;
}

/* This is the styling affecting a Feed Item Description, Thumbnail or Video Player link for a feed item in the body container*/
.fw-feed-item-link {
 margin: 0 0 0 3px;
 padding: 0 2px 0 3px;
 color: red;
 text-decoration:none;
 }
/* This is the styling affecting an "unvisited/unclicked" Feed Item anchor for a feed item in the body container*/
.fw-feed-item-link a{
 color: #123456;
 text-decoration: none;
}

/* This is the styling affecting an "unvisited/unclicked" Feed Item Link anchor for a feed item in the body container*/
.fw-feed-item-link a:link{
 color: #666666;
 text-decoration: none;
}

/* This is the styling affecting an "visited/clicked" Feed Item Link anchor for a feed item in the body container*/
.fw-feed-item-link a:visited{
 color: #666666;
 text-decoration: none;
}

/* This is the styling for a Feed Item Title Link Anchor on "mouseover" (also known as "hover") for a feed item in the body container*/
.fw-feed-item-link a:hover{
 color: #666666;
 text-decoration: none;
}

/* This is the styling affecting an "active" Feed Item Link anchor for a feed item in the body container*/
.fw-feed-item-link a:active{
 color: #666666;
 text-decoration: none;
}

/* This is the styling for the Description in a Feed Item (i.e. the text of a Feed Item in Thumbnail mode, or text+images in Full HTML mode)*/
.fw-feed-item-description {
 font-size: 12px;
 text-align: left;
 margin: 10px;
 color: #666;
 font-weight: 300;
 word-wrap: break-word;
 text-decoration:none;
 display:block;
}

/* This is the styling for a Feed Item Thumbnail - Thumbnail size and layout/orientation can be set here. This does not affect a YouTube video thumbnail.*/
.fw-feed-item-image {
 width: 150px;
 height: 120px;
 float: left;
 text-align: left;
 margin: 20px 20px 10px 10px;
}

.fw-feed-item-image-module {
 margin: 20px 20px 20px 20px;
}

/* This styling allows you to create a footer and style it. By default the footer size is set to zero. */
.fw-branding {
 height: 42px;
} 

/* These control the scrollbar and scrollbar background colors */
/* NOTE: the ! important tag is used here to override any other CSS controlling the scrollbar appearance */
/* .jspTrack{background: #aec5e8 !important;} */
/* Adjust vertical scroll bar dimension (width)*/
/* .jspVerticalBar {width: 63px !important;} */
/* Change the attributes of the scrollbar background */
 /* .jspDrag{background: #4e82d0!important;} */

Note: It is not possible to use every CSS command in a FeedWind custom CSS. For example, -repeat commands for wrapper images in the header are not supported. We cannot cover every eventuality as there are so many potentially available CSS operators and parameter combinations. Usually, the easiest way to find out if your CSS works with FeedWind is by adding a new item into the CSS and refreshing your web page to see how it appears.


CSS CLASSES

Below is a handy table for you to see the widget in terms of the HTML structure and available CSS classes:

FeedWind custom CSS specifications


Matching your widget styling to your site design

RSS feed widgets don’t have to resemble the dull appearance of a typical CNN or CBS news sidebars. An RSS feed can contain some great media elements and with FeedWind RSS, this can be presented in a custom format that matches your website design.

You will need access to graphics software

To begin you will need access to a paint/graphics software such as Photoshop or Corel Paintshop, or use an online solution that assists with  – there’s plenty out there and most web designers will own one anyway. Even a freebie such as Windows Paint will do for our purposes. You probably do not want to delve into the CSS of your site just to find out information about it. If the CSS is part of a template in WordPress, Joomla or other CMS, the elements of the template may be shared between many style sheets and be hard to find. However, there are ways to find out the dimensions and colors of elements in a template without accessing the CSS of the template itself.

Use the developer console in your browser

All browsers have a developer function to examine the details of page elements – pressing F12 in most browsers will display a console below the page you are viewing. We will also determine dimensions of other design elements too. Let’s start with a simple site design that you want to emulate by using a custom CSS file for FeedWind.

To get your custom RSS widget design to match your site, you have to find the correct parameters to use with the Custom CSS commands.

Trial and Error

Trial and error with different settings is a laborious and inefficient process – trying to figure out corner radius etc. is not that simple unless you have the source specification for the element in question. For example if your website has a common corner radius of 10% it is a pain to figure out a radius using screenshots and a graphics program – although quite possible, we show you how to do this later on. The dimensions and parameters for a radius are usually right there in the HTML of the page. In some cases where there are Flash elements for example, using a screenshot plus a graphics program may be the only way to find out the exact radius dimension.


Using the browser console

To begin with you need to be familiar with the developer tools that the major browsers come equipped with. Anyone who is able to create custom CSS would probably already be familiar with these but still might not realize how useful they are when it comes to designing a site.

Chrome, IE & Firefox

Pressing the F12 key in your browser or hover your mouse over a page element, right-click and select “Inspect” from the dropdown menu that appears.

Opera/Safari

Press Command (⌘) + Option (⌥) + I.

The developer console is a key area that will show you every component of a web page and well worth the effort in spending a little time to figure it out.

Firefox seems to be the best developer console

We will use Firefox (the most elegant of the mainstream consoles)to create a custom RSS widget in our examples. Clicking F12 gives us information about the page we are looking at. The tools vary from browser to browser but they all include the ability to look at the code that makes up the web page being displayed in the upper pane. This may be HTML, CSS, JavaScript, PHP and typically a combination of any of these.

The code is displayed in a hierarchical manner when viewed as HTML, CSS or Script mode. To the seasoned web programmer there is no difficulty in finding the information you need in the developer panes; to the uninitiated however, the array of code and all the available options can seem a little overwhelming but it is actually fairly easy to navigate around and find what you want.
custom feed widget

Find information about page elements

We will be looking to find information about specific page elements such as box dimensions, radius or color codes and the easiest way in most browsers is to Right-Click and select “Inspect Element.” Not only will the console appear, but it will have the correct area of the HTML or CSS highlighted.

There is a fair bit of difference between the features available in the various browsers’ developer windows but we only need a little information. Firefox even allows you to zoom in and select/look at an element to make it easy to find the information you need. Explorer (as usual) has to be different and does not allow easy navigation of page elements. For this reason is rarely used by anyone who programs code other than to check how their efforts work in Internet Explorer.
rss feed widget customization

rss feed widget can be customized

After locating the specific element you want to examine check in the lower pane for the item highlighted in the left hand pane. In the right hand pane should be the details that you need in order for you to extract your design information to use afterwards in FeedWind. Something that should be noted at this point. Some sites have elements with radiused corners for example or fill colors that are not defined in the HTML as these have been converted to images instead of being described as a vector element. There is a different method for determining properties in this case. In our example we have the HTML that created the corner radii for the element we chose, the border thickness and the relevant HTML color codes.

 

custom corners in rss feed widget

 

The information about the element will be displayed in the bottom developer pane. There is extensive information available in this area and even for those accustomed to it, navigation to find what you need can be tricky. In the image right, you can see the code for a page background element which has a corner radius of 7px.

 

 

select colors for your custom feed widget

There is even a color picker available in Firefox to make it easy to find colors used in a web page. The HTML color code can be used in the FeedWind custom CSS to match design.


Use a Screenshot to identify dimensions

If the element is simply a graphic and not described at all in HTML, there is a fairly easy solution to get the corner radius. Simply take a screenshot of the page you want using CTRL+ALT+PRINTSCRN keys and then CTRL+Paste (CTRL+V) into your favorite paint program. Make sure your browser is set to 100% zoom to get the correct pixel sizes for elements.

Note: Always make sure the zoom on the browser is at 100% otherwise the zoom will distort the real radius size. Here you can use a number of methods to get the radius. The easiest is to zoom in on the corner you are interested in and draw a perfect circle using the vector tool. Making sure the “Fill” is set to transparent, with any color border, drag the circle over the corner and resize it until the circle radius matches the corner.

custom RSS widget - finding the corner radius

Using Corel Paint Shop, the vector circle drawn over the corner radius we are looking to match (seen in orange) has dimensions displayed in the toolbar. This information is available in any drawing package that deals properly with vectors such as Corel Paintshop Pro or Photoshop.

Even Windows Paint will give you the information you need – although it does not allow for radius dimensioning, it will give you the radius dimension of a circle you just drew. Simply use a circle drawing tool and draw one until it fits snugly on the inside, middle, or outside of the corner you are matching.

Elliptical radius

For elliptical corners, there are two radius dimensions. As you can see in the screenshot, Corel Paintshop gives you an -x and a -y radius so you can use the relevant commands in your custom CSS to produce these more exotic shapes.

Many other measurements can be taken using the screenshot, pasted into a paint package then overlaid with a shape to get measurements in pixels. The crop tool is another popular way to get pixel dimensions for shapes on a page.

Tip: Click on F11 before you take a screenshot to maximize the browser and you will get the full width/height of the page and at 100% zoom you get an image with exact pixel dimensions. This is handy for plenty of reasons. Any other elements which you wish to match and use perhaps as a background or style for your FeedWind can be captured, cropped and reused again.

Careful with that Z-index

An important point to note here is that if you use z-index layers to achieve your custom FeedWind widget, you must make sure that the widget is in the uppermost layer otherwise although you may be able to see and read the news, but be unable to click on the links.


GET YOUR COLORS RIGHT

To get colors right, the same process is used, except you are looking for CSS “color” commands which are followed by the HTML color number in either full 6 character Hex 6 or Triple Hex where every other digit is ignored. Triple Hex color codes simply reduces the number of shades available to a fixed palette. CSS also supports simple color names like Blue, DarkRed, LimeGreen, of which there are 147 in total.

Tip: if you need to know exactly how to use CSS try http://www.w3schools.com/ where CSS is explained in proper classroom style and you can play with custom code to see what it does and how it works. Another great feature here is the color matching and charts. Everything you need to know about online color coding etc. is there too – a wonderful resource for anyone who wants to learn more about CSS.

Tip: Here is a great site to find out all about colors, CSS etc. You can find any color code and cross match different coding systems such as Pantone, Hex, Websafe etc.


Even those with little programming experience can customize FeedWind by using the CSS template at the beginning of this article; all you have to do is add your preferred parameters to make a custom RSS widget exactly the way you want it. To help you further, there are tutorials for all the main functionality and features of the FeedWind RSS widget at our support pages.


April 18, 2016 3:37 pm