Charisma News Online: Website Widget (beta)

If you own a website or blog and would like to add Charisma News updates to your page, then you can use this widget. Please note that this widget is in "beta" which means it may be a little buggy still and so we need you to help us discover these bugs! If you run into any issues at all, need help, or just have a few suggestions, please email me here. Thank you so much for your interest!

Configuration Tool:

Dimensions (pixels)
values: integer (pixels) or percentage
egs: 300, 225, 100%, 75%

values: integer (pixels)
egs: 0, 400, 575
Teasers
Display
Get Widget Code

Preview:

Plugins for Platforms

Most Content Management Systems (CMS), like Wordpress or Joomla, have a way to copy/paste the widget code from the configuration tool above to get the widget to work on your website. However to make it easier for you I've created CMS specific plugins. Below are plugins or instructions for some specific CMS systems. Let me know of any additional CMS systems you'd like me to port this widget to.

Joomla

This Joomla Module is available for Joomla 2.5. If you are using an older version please use the Configuration Tool above. If you are using Joomla 3.x series it should still work.

Download

Wordpress

This Wordpress Widget was build for the 3.5 series of Wordpress. If you are using an older version please use the Configuration Tool above.

Download

Blogger

The easiest way to add the widget to your Blogger site is by using the Blogger "HTML/JavaScript" Gadget with the Charisma News widget code from the above configuration tool.

Read the Blogger instructions

Customizing the Theme

If you would like to customize the design of the widget you can do so using CSS (Cascading Style Sheet) code.

Here is the basic structure of the the widget output with every option enabled (your specific widget setup may not include all of these):

<div id="chm_widgets_cno">
<div class="cnoMainWrap">
<span class="cnoHeadWrapLogo"><a><h2>Charisma News - Latest Updates</h2></a></span>
<div class="cnoItemsWrap">
<span class="cnoDescWrap">Informing believers with news from a Spirit-filled perspective</span>
<div class="cnoItemWrap">
<a class="cnoItemLink"><h3>ARITCLE TITLE</h3></a>
<div class="cnoItemDate">ARTICLE DATE</div>
<div class="cnoItemTeaser"><img > ARTICLE TEXT</div>
<span class="cnoItemReadmore"><a>read more</a></span>
</div>
<div class="cnoItemWrap">
...
</div>
<div class="cnoItemWrap">
...
</div>
</div>
</div>
</div>

All of the CSS code for the default theme will be added dynamically (via javascript when the widget loads) to a STYLE element directly after the TITLE element of the HEAD (this code may be different depending on your specific widget setup):

<head>
...
<title>Your website's title</title>
<style type="text/css">
#chm_widgets_cno {width:296px;overflow:hidden;background:#ffffff;font-family:Arial,sans}
.cnoMainWrap {border:2px solid #810707;}
.cnoHeadWrapLogo {background:url(http://www.charismanews.com/widgets/cno/cnowidget_logo.gif) 20px center no-repeat #810707;height:40px;display:block;}
.cnoHeadWrapLogo a {display:block;text-align:center}
.cnoHeadWrapLogo a h2 {text-indent:-999em;margin:0;padding:0}
.cnoItemsWrap {background:#e5e5e5;}
.cnoDescWrap {font-size:12px; padding:10px 20px; background:#e5e5e5;display:block}
.cnoItemWrap {background:url('http://www.charismanews.com/widgets/cno/cnowidget_itembg.gif') left top repeat-x #fff;border-top:1px solid #b98383}
.cnoItemLink {font-size:14px;color:#810707}
.cnoItemLink h3.cno {padding:.5em 3px 0 5px;margin:0 0 .5em; font-size:1em;}
.cnoItemDate {padding-left:5px;font-size:11px;color:#666}
.cnoItemTeaser {padding-left:5px;font-size:13px;overflow:auto}
.cnoItemTeaser p {margin:0;padding:0}
.cnoItemTeaser img {float:left;padding-right:8px;}
.cnoItemReadmore {display:block;text-align:right;background:url(http://www.charismanews.com/widgets/cno/cnowidget_readmorebg.gif) right top no-repeat;padding-right:18px}
.cnoItemReadmore a {color:#fff;text-decoration:none;font-size:11px;line-height:16px;vertical-align:top}
.cnoItemReadmore a:hover {color:#fff;text-decoration:underline;}
</style>
...
</head>

To override (or add to) any part of the default theme you'll need to add your own STYLE element (or external CSS file) any place after the TITLE element. This example shows the nessessary overrides to force the story image to strech to the full width of the available space instead of floating to the left.

<head>
...
<title>Your website's title</title>
...
<style type="text/css">
.cnoItemTeaser {
padding:0 5px;
}
.cnoItemTeaser img {
display:block;
float:none;
width:100%;
height:auto;
margin:.5em auto;
padding:0;
}
</style>
...or...
<link href="cno-widget-overrides.css" rel="stylesheet" type="text/css" />
...
</head>

Updates

October 22, 2013 — I've added instructions to add the Charisma News widget to Blogger websites in the Platforms section above. A Wordpress widget was also added back in July.

September 26, 2012 — I've added a Joomla Module extension to make adding this widget to your Joomla site a snap. Just download the extension from the Platforms section above.

October 4, 2011 — version 0.2. This update fixes the incorrect width setting when using pixels (ie, setting the width to 400 pixels in version 0.1 would give you a 396 pixel wide box). If you already have the widget on your site you don't need to update to v0.2 but you if you ever do update at some point in the future (to any 0.2 or later version) and if you're using a set width in pixels (instead of a percentage) then remember that your widget will grow 4 pixels wider. If you do want to update then you can either remake your widget using the Configuration Tool at the top of this page or you can update the javascript link on your site from

<script src="http://www.charismanews.com/widgets/cno/cno.js" type="text/javascript"></script>

to

<script src="http://www.charismanews.com/widgets/cno/cno.v0.2.js" type="text/javascript"></script>

(and subtract 4 from the width in your configuration code if you're using pixels)

October 3, 2011 — I fixed a bug in the widget Configuration Tool on this page. Also, the widget will now display a loading animation before the content arrives and reserve the needed width and height (if set) so that your page's layout does not have to readjust later. You do not need to update your site for this change to take effect. If you don't have a set height on your widget (so it expands as much as needed to show every story) then there is no way to know how much vertical space to allocate before the content arrives. In these cases the widget's loading animation will be in a 100 pixel high box.

Widget Code
Paste this code to your website where you want the widget to load.

Optionally you can add the two <script> elements to the <head> element of your page.

close