Importing Officers and Other Units Feeds

Required Plugins #

To import vTools Officers and Other Units feeds into your WordPress site, you will need to activate the following plugins:

  • amr shortcode any widget
  • vTools WebInABox Feeds
  • SiteOrigin CSS

To activate them, log into your WordPress dashboard and click on the Plugins link on the left sidebar, find the three plugins and activate them.

Setting up the vTools WebInABox feeds: #

Go to Settings -> “vTools WebInABox Feeds” and then copy the URLs in parentheses, paste them in the field above them and click on the “Save Changes” button:

Setting up the vTools WebInABox Widgets: #

Go to Appearance -> Widgets and then drag and drop the following Widgets into the “Widgets for Shortcodes” Widget area:

Click on the down arrow ▼ to reveal the input fields for each Widget. Type your OU’s Geocode in the “Geocode” input box and click “Save” to generate a shortcode for each Widget. You can then paste the shortcode in a Page/Post to produce a list of your officers and a list of OU links for OUs under your Organizational Unit (e.g., if you’re a Section, the list will show Chapters, Affinity Groups and Student Branches).

Here is an example of an Officers page:

The output of the shortcodes have basic formatting. To beautify the output further, you will need to go to Appearance -> Custom CSS OR Customize -> Additional CSS and then paste the following CSS into the CSS input field:

/* vTools WebInAbox Feed formatting */

div.feed_unit {margin-bottom:15px; margin-top: 15px; font-size: 16px;}
.feed_unit_prop {display:block;font-size: 16px;}
.feed_unit_officer_prop {display:block;font-size: 16px;}
.feed_unit_officer_ident_label {display:block;margin-top:18px;font-size: 16px;f}

span.feed_unit_officer_ident_label, span.feed_unit_ident_label {
background-image:url(http://site.ieee.org/files/2015/07/form_bg1.jpg);
background-repeat:repeat-x;
border:1px solid #d1c7ac; width: 230px; color:#333333;
padding:8px; margin-right:4px; margin-bottom:8px;
font-family:tahoma, arial, sans-serif;
font-size: 16px; margin-bottom:10px;; f
}

/* Feed unit prop */
.feed_units .feed_unit .feed_unit_prop{
visibility:hidden;
margin-top:-15px;
}

/* Span Tag */
.feed_unit .feed_unit_officer_prop .feed_unit_officer_ident_label{
font-size:14px;
}

/* Span Tag */
.feed_units .feed_unit .feed_unit_officer_prop_label{
margin-left: 15px;
}

/* Span Tag */
.feed_units .feed_unit .feed_unit_officer_prop{
margin-top:8px;

}

If you use Appearance -> Custom CSS, then you would be able to use the live CSS editor (click on the eye icon at the top right corner) to customize it the output further.

 

 

Powered by BetterDocs