Christian Science Responsive Widgets

Sentinel Widget

Other examples

Display parameters

Parameters copied to the clipboard Copy parameters to the clipboard

Param  Default  Options  Description
  SP ●  sen              css Style Prefix
  DI     C     C,L or N  Display top image (C=cover image,
                         L=Periodical Logo, N=None)
  DT     Y      Y or N   Display Title of Periodical
  DD     Y      Y or N   Display Date of Periodical
  IS                     Image Style (eg img-fluid) to add. 
  DN     0      0 to 5   Display Number of periodical articles
  IB     Y      Y or N   Include Bullets on article list
  JSH    N     N,D or C  JSH style (N=No, D=Detailed, C=Condensed)
 JSHDT   Y      Y or N   Display JSH style Title

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

Javascript for extracting widget content

Javascript code copied to the clipboard Copy javascript code to the clipboard

<head>
...
<script type='text/javascript' src='https://christianscience.org.uk/rwidgets/js/tmwidgets.js'></script>
<script type='text/javascript'>
getWidgetData('sentinels','DN=5','SENwidget');
</script>
...
</head>
<body>
...
<div id='SENwidget'></div>
...
</body>

Notes
● The getWidgetData (javascript function) has three elements
  1=Widget reference, 2=parameters and 3=div id where widget content is to be displayed
● Put javascript references in page head section
● Put referenced widget div in page body section for content display
● There is no javascript dependency on jQuery

Styling illustration

Styling example copied to the clipboard Copy styling example to the clipboard

<style type='text/css'>
  .senTopLogo{padding-bottom:10px;}
  .senHdrImage{display:block;margin-left:auto;margin-right:auto;}
  .senItem{text-align:center;font-family:Arial;color:#000;width:100%;}
  .senTitle{margin:5px;font-weight:bold;font-size:18px;}
  .senDate{margin:5px;font-size:16px;font-weight:bold;}
  .senArticles{padding-top:5px;font-size:14px;text-align:left;}
  ul.senBlt{list-style-type:square;list-style-position:outside;margin:0;padding:10px;}
  ul.senBlt li{padding:0 0 5px 0;font-size:16px;}
  a.senArtLink{text-decoration:none;cursor:pointer;color:#000099;}
  a.senArtLink:hover{color:#000;text-decoration:none;}
/* Following is used only by the JSH option */
  .senWrapper{padding:10px;border:1px solid #69c;margin-bottom:10px;overflow:hidden;}
  .senCover{margin-right:10px;float:left;}
  .senCover img{border:1px solid #000;width:130px;}
  .senDescription{font-family:Arial;line-height:22px;}
  .senHeader{font-size:20px;padding-bottom:5px;font-weight:bold;}
  .senHeader a,.senMore a{text-decoration:none;cursor:pointer;color:#000099;}
  .senHeader a:hover,.senMore a:hover{color:#000;}
  .senQuote{font-size:12px;font-style:italic;line-height:16px;padding-bottom:5px;}
  .senLast{font-size:16px;padding-bottom:5px;}
  a.senMore{text-decoration:none;cursor:pointer;color:#000099;}
  a.senMore:hover{color:#000;text-decoration:none;}
</style>

Publications

Site Map