Joomla
This Joomla Module is available for Joomla 2.5. If you are using an older version of Joomla please use the Configuration Tool above.
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!
Plugins for Platforms
I hope to make this widget available as plugins for various Content Management System such as Joomla, Drupal, and Wordpress. At this moment it's only available for Joomla. Let me know what platform you'd like me to port this widget to.
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
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://charismanews.com/widgets/cno/cno.js" type="text/javascript"></script>
to
<script src="http://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.