Christian Science Responsive Widgets

Herald Widget

Other examples

Display parameters

Parameters copied to the clipboard Copy parameters to the clipboard

Param  Default  Options  Description
  SP ●  her              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
  L      G    G,F,S,P,C  German,French,Spanish,Portuguese or Cyclic
                         (daily cycling through each language)
  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
 JSHEV   Y      Y or N   English Version of JSH style

     ● 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('heralds','DN=5','HERwidget');
</script>
...
</head>
<body>
...
<div id='HERwidget'></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'>
  .herTopLogo{padding-bottom:10px;}
  .herHdrImage{display:block;margin-left:auto;margin-right:auto;}
  .herItem{text-align:center;font-family:Arial;color:#000;width:100%;}
  .herTitle{margin:5px;font-weight:bold;font-size:18px;}
  .herDate{margin:5px;font-weight:bold;font-size:16px;}
  .herArticles{text-align:left;padding-top:5px;font-size:14px;}
  ul.herBlt{list-style-type:square;list-style-position:outside;margin:0;padding:10px;}
  ul.herBlt li{padding:0 0 5px 0;font-size:16px;}
  a.herArtLink{text-decoration:none;cursor:pointer;color:#000099;}
  a.herArtLink:hover{color:#000;text-decoration:none;}
/* Following is used only by the JSH option */
  .herWrapper{padding:10px;border:1px solid #69c;margin-bottom:10px;overflow:hidden;}
  .herCover{margin-right:10px;float:left;}
  .herCover img{border:1px solid #000;width:130px;}
  .herDescription{font-family:Arial;line-height:22px;}
  .herHeader{font-size:20px;padding-bottom:5px;font-weight:bold;}
  .herHeader a,.herMore a{text-decoration:none;cursor:pointer;color:#000099;}
  .herHeader a:hover,.herMore a:hover{color:#000;}
  .herQuote{font-size:12px;font-style:italic;line-height:16px;padding-bottom:5px;}
  .herLast{font-size:16px;padding-bottom:5px;}
  a.herMore{text-decoration:none;cursor:pointer;color:#000099;}
  a.herMore:hover{color:#000;text-decoration:none;}
</style>

Publications

Site Map