Skip to main content
Life Science IT

CSS

Life Sciences Brightspot

More

CSS allows you to make changes to the layout and design of your page. Though it it a little tricky to find what you want to change, this article should be helpful and teach you what you need to know about the CSS features in brightspot. See what CSS can do here.

Here is a link to a list of CSS commands you can try out.
CSS Reference

There is also a list of common attributes you can try out on the bottom of this page.

Open the add content tab +

Select "Misc" and navigate down to Raw HTML Module

Once you select the HTML module click the HTML tab

This tab is where you will do all of your edits

Type:

<style> </style>

Now you need to know what part of the site you need to add edits to. To do this you will need content on a published page.

To see the live page select the blue URL and it will open the site in a new tab

Once on the tab, navigate to the content you wish to edit and right click

Select "Inspect"

You will see this page pull up. Don't be overwhelmed. If you right clicked on the content you want to edit then it will be highlighted.
- Take note of what follows the "." period. You will need this later on

Note: if you want to double check to see what you need to edit, select the top left "cursor in a box" icon. Once this is selected you can hover over anything on your live page and see what you need to edit.

When you hover it should look like this.

I want to select the smaller container with the text in it. So I hover until that is the only thing selected and copy ".promoFullWidth-content"

On the far right you can make small edit to see what you are changing.

Note: To make an edit I selected the ".promoFullWidth-content" field and clicked in the coding box with red attributes.

I added the following CSS:

transform: rotate(45deg);

background-image: linear-gradient(to left, #002E5D, #BDD6E6, #6E7CA0);

Note: The #00000 numbers are Hex codes for colors

I then copy the changes I have made to the live page and paste them under the ".promoFullWidth-content" in brightspot

In order to apply the changes I needed to add ".PromoFullWidth-container"

.PromoFullWidth-container .PromoFullWidth-content

The .Promo fullwidth-container is the whole box while the .promofullwidth-content is the smaller box where the text is kept.

Here is the what it looks like having .Promo fullwidth-container with out adding .promofullwidth-content

Helpful CSS Guide

Hide Text
display: none;
Text color
color: (#paste color hex code);
Background color
background-image: (#paste color hex code);
Padding
padding: (insert number)px;
Font size
font-size: (insert number)px;

For more CSS references click here

This is for testing css