Christian Science Responsive Widgets

Bible Lesson Widget

Other examples

Display parameters

Parameters copied to the clipboard Copy parameters to the clipboard

Param  Default  Options  Description
  SP ●   bl              css Style Prefix
  DI     C     C,L or N  Display top image (C=cover image,
                         L=Bible Lesson Logo, N=None)
  IS                     Image Style (eg img-fluid) to add. 
  TH     Y      Y or N   Include Bible Lesson Daily Thought
  DT     Y      Y or N   Display 'Bible Lesson' Title
  DD     Y      Y or N   Display Date of current Lesson
  DS     Y      Y or N   Display Subject of current Lesson
  DG     Y      Y or N   Display Golden Text of current lesson
  PI     T      T or L   Position cover Image (T=Top, L=Left)
  BI     N      N or Y   Bold intro text 'Subject' and 'Golden Text'
  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('biblelesson','','BLwidget');
</script>
...
</head>
<body>
...
<div id='BLwidget'></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'>
  .blGroup{font-family:Arial;}
  .blTitle{text-align:center;font-size:24px;font-weight:bold;padding-bottom:5px;}
  .blDate{text-align:center;font-size:20px;font-weight:bold;padding-bottom:10px;}
  .blBLCover{display:block;margin-left:auto;margin-right:auto;padding-bottom:10px;}
  .blBLCoverLeft{float:left;padding:0 10px 10px 0;width:165px;}
  .blSubject{font-size:20px;padding:10px 0;}
  .blGT{font-size:17px;padding:5px 0;}
  .blGTref{font-size:16px;padding-top:10px;color:#555;}
  .blGTver{float:right;padding-bottom:10px;color:#555;font-size:12px;}
  .blDT{font-size:14px;padding:0 5px;}
  .blDTintro{padding-top:10px;font-size:17px;text-align:center;font-weight:bold;}
  .blBkSrc{float:right;padding:0 5px;color:#555;font-size:14px;}
  .blBkRef{float:right;padding:0 5px;color:#555;font-size:12px;}
  .blQT{font-size:18px;font-weight:bold;}
  .blClear{clear:both;}
/* Following is used only by the JSH option */
  .blWrapper{padding:10px;border:1px solid #69c;margin-bottom:10px;overflow:hidden;}
  .blCover{margin-right:10px;float:left;}
  .blCover img{border:1px solid #000;width:130px;}
  .blDescription{font-family:Arial;line-height:22px;}
  .blHeader{font-size:20px;padding-bottom:5px;font-weight:bold;}
  .blHeader a,.blMore a{text-decoration:none;cursor:pointer;color:#000099;}
  .blHeader a:hover,.blMore a:hover{color:#000;}
  .blQuote{font-size:12px;font-style:italic;line-height:16px;padding-bottom:5px;}
  .blLast{font-size:16px;padding-bottom:5px;}
  a.blMore{text-decoration:none;cursor:pointer;color:#000099;}
  a.blMore:hover{color:#000;text-decoration:none;}
</style>

Publications

Site Map