Christian Science Responsive Widgets

Methodology

Javascript is used to extract HTML formatted widget content and position it within the body of the webpage.
- The centralised widget script is defined in the head section of the web page
- Calls to this script allow one to select which widget to call, supply all required parameters, and specify the location in the body of the page (via an empty div, identified by its ID) where the returned content will appear.
- Widget parameters can help define the format of the returned data as well as enable the styling of its content.
- There is no dependency on any third party javascript library such as jQuery.
Each individual widget can display detailed help via a standard help (H=Y) parameter.
There is a PHP cURL alternative to the javascript method of getting structured HTML content, and details are available on request. This version similarly returns HTML structured data that can be positioned and styled to seamlessly integrate with your current website theme.

The following code examples come from the Daily Lift help file.

Code for extracting widget content

<head>
<script type='text/javascript' src='https://christianscience.org.uk/rwidgets/js/tmwidgets.js'></script>
<script type='text/javascript'>
getWidgetData('dailylift','DN=3&DI=N&II=Y','DlWidget');
</script>
</head>
<body>
<div id='DlWidget'></div>
</body>

Example CSS for styling widget details

<style type='text/css'>
  .dlHdrBanner{text-align:center;}
  .dlHdrText{font-size:18px;font-family:Arial;text-align:left;padding-bottom:16px;}
  .dlHdrLogo{margin-left:auto;margin-right:auto;padding-bottom:16px;}
  .dlitem{font-family:Arial;color:#000;display:table-row;}
  .dlitemimage{display:table-cell;padding-right:10px;}
  .dlitemdetails{display:table-cell;vertical-align:top;padding-bottom:15px;}
  .dlimage{width:75px;height:75px;}
  .dlitemby{font-size:17px;color:#333;}
  .dlitemdate{font-size:17px;}
  .dlitemtitle{font-size:18px;}
  a.dlitemlink{text-decoration:none;color:#000099;}
  a.dlitemlink:hover,a.dlitemlink:active{text-decoration:none;color:#000;}
</style>

Structure of widget output

<div class='dlHdrBanner'>
  <a href='https://www.christianscience.com/christian-healing-today/daily-lift' target='_blank'>
    <img class='dlHdrLogo' src='https://www.christianscience.org.uk/cimages/dailyliftbanner-round.png' alt='Daily Lift' border='0' />
  </a>
  <div class='dlHdrText'><b>Daily Lift</b> podcasts are short takes on inspiring ideas to enrich your day and share with friends.</div>
</div>
<div class='dlitem'>
  <div class='dlitemimage'>
    <img class='dlimage' src='https://christianscience.org.uk/cicons/dailylift-100.png' alt='' border='0' />
  </div>
  <div class='dlitemdetails'>
    <div class='dlitemtitle'>
      <a class='dlitemlink' href='https://www.christianscience.com/christian-healing-today/daily-lift' target='_blank'>Title of current Daily Lift</a>
    </div>
    <div class='dlitemby'>Author Name</div>
    <div class='dlitemdate'>Posted: Month nn</div>
  </div>
</div>
...
<div class='dlitem'>
    ...
</div>

Parameter Options

Param  Default  Options  Description
  H      N      N or Y   Display this Help page
  CSS    N      N or Y   Include illustrative CSS style
  IP     N      N or Y   Display IP address of website
  SP ●   dl              css Style Prefix
  DI     Y      Y or N   Display Logo image
  HT     A     A,B or N  Display header text After logo, Before logo or Not at all
  IW    200    (max 400) Set pixel width of header logo
  TO ♦   1    1, 2 or 3  Text option (see below)
  II     N      N or Y   Item image displayed
  ID     Y      Y or N   Item Date posted displayed
  IB     Y      Y or N   Item By (the author) displayed
  DN     5      1 to 5   Display Number of daily lift items

     ● Allows you to have multiple versions of this widget,
       each with their own associated CSS, on a single web page

     ♦ 1 = Daily Lift podcasts are short takes on inspiring ideas
           to enrich your day and share with friends.
       2 = Responding to current challenges with spiritual ideas.
       3 = Daily nuggets of spiritual insights.

Embedding Widgets in Joomla and Wordpress sites

Most templates (Joomla) or themes (Wordpress) have a place to insert custom code that applies across the whole site. The Javascript code for extracting the widget content can be inserted there. If there is no custom code location (rare these days) it should be possible to insert it in the template or theme’s index.php file below the <head> tag.

Implementing the widget’s CSS will also depend on the site’s template/theme.

Most have a section somewhere in their settings menu for custom CSS. If not, the CSS code will need to be inserted in a suitable CSS file. There will probably be some documentation for the template/theme saying which one.

Note that where a page builder is used each text block will probably have a custom CSS section of its own. This does not always work, so it may be best to use the overall space.

Site Map