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

???.???.?.? wrote:
05 February 2021 10:04

Salutations! cette question complexe. Ici, il est n?cessaire de penser ...

cancel facebook account wrote:
16 November 2020 13:18

I thank you for the information! I was looking for and could not find. You helped me!

regsvr32 wrote:
19 September 2020 13:34

Ich%20danke%20Ihnen%20f%FCr%20die%20Information%21%20Ich%20war%20auf%20der%20Suche%20nach%20und%20konnte%20nicht%20finden.%20Du%20hast%20mir%20geholfen%21%20 wrote:
01 May 2020 14:14

Salutations! Je suis d?sol?, ce n'est pas le sujet! J'aime vraiment votre forum! Je vous remercie, je suis avec vous)

Packaging Boxes Products wrote:
02 December 2019 13:28

Custom Boxes House For Packaging At Affordable PricesAt BUY Packaging Boxes, we provide businesses with custom packaging boxes and custom packaging solutions that meet industry and product-specific needs.

Beard Oil Boxes wrote:
02 December 2019 13:27

Buy Packaging Boxes has opened new avenues for custom packaging boxes. Our all color digital and offset printing services allow you to have excellent quality personalized packaging.

Hemp Oil Boxes wrote:
02 December 2019 13:27

Great post mate, thank you for the valuable and useful information. Keep up the good work! FYI, please check this depression, stress, and anxiety

Custom Business Cards wrote:
11 November 2019 20:32


custom stickers uk wrote:
11 November 2019 20:31

Sticker Printing Company Print your own personalised stickers, labels, decals and many more. Express turnaround time as fast as next day delivery. Print Custom Stickers! Easy online ordering, Free shipping, free online proofs, fast turnaround.

Custom Boxes wrote:
11 November 2019 20:30


rohith varma wrote:
01 November 2018 10:39