Christian Science Responsive Widgets

Daily Thought Widget

Other examples

Display parameters

Parameters copied to the clipboard Copy parameters to the clipboard

Param  Default  Options  Description
  SP ●   dt              css Style Prefix
  BLQ    Y      Y or N   Use the daily quote from the current weeks Bible Lesson
  IW     90    (max 200) Set pixel width of book image
  IM     B     B,L or N  Image: Background, Left (S&H or Bible) or None
  IA     Y      Y or N   Include Attribution for quotation

     ● 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('dailythought','','DTwidget');
</script>
...
</head>
<body>
...
<div id='DTwidget'></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'>
  .dtItem{color:#000;padding:10px;font-family:Arial;}
  .dtImage{float:left;padding-right:10px;width:90px;}
  .dtItemSH{background-image:url(https://www.christianscience.org.uk/rwidgets/img/SHbg.png);background-size:cover;}
  .dtItemB{background-image:url(https://www.christianscience.org.uk/rwidgets/img/Bbg.png);background-size:cover;}
  .dtQtTxt{padding:2px 5px 10px 5px;font-size:17px;line-height:20px;text-shadow:1px 0px 0 #fff;}
  .dtQtSrc{padding-right:10px;font-size:13px;text-shadow:1px 0px 0 #fff;text-align:right;}
  .dtQtChr{font-size:24px;}
</style>

Publications

Site Map