dream genie
CMS and Website Builder
contact us
+44 (0)1392 202078
You are here: Home > Blog > How to flow text around a dashboard image   Go Back

How to flow text around a dashboard image

Posted: Friday, 10th December, 2010 at 7:43 AM | By: Administrator

Setup up the dashboard item.

First ensure the dashboard item property 'Display image first' is set. This on the first tab when editing the Dashboard item. This has the effect of outputting the image before the descrption text in the html, this is essential for what we want to do here.

Define the CSS

Create the following CSS, if you have Themes enabled this will go into your theme, else go to [System Settings] Select the [Google JS CSS ] Tab and paste into the [Google Analytics and Additional CSS] box.

/* setup text flow around images how to dashboard */ 
.widgetcontent_0363524b-2e1e-4b7d-8688-4e17af2450ea .WidgetPhotoThumb 
/* and flow the content */ 
.widgetcontent_0363524b-2e1e-4b7d-8688-4e17af2450ea .showlinktextRow 
float:none !important; 
/* Optionally style the title,link and spacing */ 

.widgetcontent_0363524b-2e1e-4b7d-8688-4e17af2450ea .spDashTitle{font-weight:700;padding-top:2px;text-decoration:underline;} 
.widgetcontent_0363524b-2e1e-4b7d-8688-4e17af2450ea .misc012{margin-top:5px;} 

Change or remove the unique dashboard class ID 

Don't be spooked by the wierd looking classname above a 35 digit GUID on the end of widgetcontent, I have included this above to demonstrate how to limit the scope of your CSS, using the unique class id of the dashboard we can limit the CSS to a specific dashboar, if we left this off all would be fine, the CSS would be global across all the dashboards (which may be what you want). 

So if you want to limit the scope of your CSS to a specific dashboard just replace the CSS class name widgetcontent_91e324af-d458-4f05-ac13-4cfe27ea94d3 with your own, the ID of each dashboard is unique, and is visible on the SEO Tab of the dashboard item.

Customise the CSS

Image Border:

Just before the float:left in the first section above you may want to add a border.

Image size and position:

The first line defines the position of the image, in this case left, just change this to float:right; to place the image on the right hand side of the dashboard.

NOTE : if you switch the image to float:right; then you will want to change the line (above) margin-right:8px; this would become margin-left:8px;

Optionally format the Title and the spacing between items:

.widgetcontent_0363524b-2e1e-4b7d-8688-4e17af2450ea .spDashTitle{font-weight:700;padding-top:2px;text-decoration:underline;}

.widgetcontent_0363524b-2e1e-4b7d-8688-4e17af2450ea .misc012{margin-top:5px;} 

In the above example the first line defines the CSS for the .spDashTitle class this specifies formatting for the dashboard items title, in the example we set the font bold by using front-weight:700. we also ensure the Title is underlined as we may want an additional inidcatior that this is a hyperlink.

Line 2 in the above example sets up the spacing between items to 5px, by default this is 3px but when images are involved in a dashboard it doesn't hurt to widen this and space things out a bit and make it clearer where an item starts and ends, dashboards can easily end up looking cluttered.

NOTE: There are 3 key css classes,

showlinktextRow - this class is for the whole row container and is a span containing the dashboard item Title and contetnt (SEO) description.

spDashTitle - is the class for styling the Title part

spDashContent - is for styling the content part.


Visit the blog archive »

You are welcome to post a comment

To Verify You are Human!
Please enter the code above:

Previous Comments

rohith varma wrote:
01 November 2018 10:39