Share:|

In SmartIT inline styles can be used to apply css to tables and images. This can be useful when you need to tweak how an image or table appears in a specific article. For example, you might want to make an image stand out by adding shadow or highlight alternate rows in a table to add interest.

add-image-knowledge-article.png

How to apply inline styles to images

Add an image by clicking the image icon.

Select the Advanced tab in the Image Properties dialog box.

If you have added width and height in Image Info the parameters will appear in the Style field. Simply add additional styles here, for example to add a shadow to an image enter

box-shadow: 10px 10px grey;

css-style-add-image.png

Useful image styles

Rounded image corners

Use border-radius. For example:

border-radius: 8px; - rounded corners

border-radius: 50px; - circled image

 

Responsive images

Responsive images will automatically adjust to fit the size of the screen.

max-width: 100%; height: auto;

 

For more on styling images see CSS Styling Images

How to apply inline styles to tables

 

Add a new table or right click an existing table. Select the Advanced tab in the table properties dialog box to see the Style field.

For tables you may find that built in table classes provide the effect you need. For example to make alternate rows shaded enter table-striped in the stylesheet classes field.

Other classes you might find useful are below:

ClassDescription
.tableApplies basic styling to tables.
.table-borderedApplies borders on all sides of the table and cells.
.table-hoverAdds a hover effect with a grey background on table rows.
.table-condensedCuts cell padding in half to make the table more compact.
.table-responsiveCreates a responsive table. The table will then scroll horizontally on small devices (under 768px)

 

Read more on bootstrap tables.