reusable html-css container for IBM Connections

Time to read: 2 minutes

At work, we have a regular "broadcast" and want a consistent look

So I'm testing out setting up a pre-fabricated html-with-css container for a newsletter sort of thing that is broadcast on a regular basis.

I have created a container which you can copy from lower down on this post.

If you paste its contents in the "HTML Source" tab of a Connections blog post or wiki page, you end up with the text below. Well. ONE of the "category" sections below. Paste the contents once for each category you want to create. Magic. (below, it's been pasted three times).

All you then have to do is replace the text with your own (copy-paste, copywrite, as you please… and insert links using the "URL link" item  in the toolbar.

 


On our installation, it looks like this:
connections


Category
The top stories summary for each category of news can go here. Splitting the items over two lines works nicely.
Announced deals
Boots sticks with Steria. Huawei grabs another telco deal
Category
The top stories summary for each category of news can go here. Splitting the items over two lines works nicely.

Some features of the container

I have given it a maximum width of 40em. This is the best width for wrapping text lines, and corresponds to 35 times the width of the letter "m" in whatever font is being viewed. Longer lines are harder to read, you see, human eyes have limitations. There has been research on line length. Don't you wish this text wrapped round sooner?

Each "category" is set up as a new div element, because that means Connections allows you to paste text into that element and formats it as that element dictates. Good news for a control-freak like me, and excellent news for anyone who doesn't want to look at html, ever. (I suspect that might be you?)

The "category" title is written in Serif font, and the content in the default sans-serif.

 


 

Copy the HTML from here

<div style="max-width:40em;">

<div style="display:block; font-size:1.2em; font-weight:bold; color:#666666; letter-spacing:0.1em; padding-top:20px; margin-top:20px; padding-bottom:2px; margin-bottom:0px; width:100%; font-family:Georgia, 'Times new roman', serif;">Category </div>

<div style="display:block; font-size:1.7em; margin-top:0px; padding-top:0px; margin-bottom:10px;">The top stories summary for each category of news can go here. Splitting the items over two lines works nicely. </div>

<ul>
<li> news item </li>
<li> news item </li>
<li> news item <a href="#">with a link</a>. </li>
</ul>

</div>  
 

 


Leave a Reply

Your email address will not be published. Required fields are marked *