How to change the color of content

How do I change the color of our content that highlights on mouseover. (Where it says “$0.97/month” and all the content below that.) The websites at:


I don’t know how specific your .span3{} class is (if you reuse it elsewhere that you dont want hover…but look at this

.span3:hover * { background:yellow;}

You can get the hint from there…if you want to target specific text or a class then remove the * and go from there…should be enough for you to go off of, yes?

you better use pseudo classes . Link here:
use :hover to change color of your content

Where it says $0.97 within the blue dot, I want to change that background color from blue to another color how do I do it?


The blue background is set on “.price-label”. So just change the background color on the property.

How do you change the blue mouse over hover outline on the “Hosting Plan” box?


Change this style—which is embedded on the page at line 684:

.pricing:hover {
border: 2px solid #3498DB;

OK I changed the color of the boxes. I made separate CSS for each box. (3 boxes total) How do I change the color of the “$14.97/year” blue dot? because it wont change with the new CSS.

The websites at:


I already gave you the answer - .price-label{} holds this. Is the online example current? All 3 circles are .price-label{}…

I changed the .price-label and the colors are not changing on them. How do you change them? You can see an update at

Also theirs bullets next to all the text now. (Right next to Domain Registration and the rest of the text.) How do you get rid of them?


You aren’t changing it.

  .price-label {
        background: #3498db;
        width: 70px;
        height: 48px;
        padding: 21px 10px;
        font-size: 20px;
        color: #fff;
        font-weight: 600;
        line-height: 1em;
        text-align: center;
        position: absolute;
        top: -110px;
        left: 50%;
        margin-left: -49px;
        border: 4px solid #fff;
        -webkit-border-radius: 90px;
        -moz-border-radius: 90px;
        border-radius: 90px;

If I change that background-color to red, the circles change.

If you look at .pricing2 and .pricing3 just below that you will see I changed .price-label2, .price-label3 to a different color but it did not work. (“$14.97/year”, and “$4.97/month”)


All 3 circles are price-label. I see that you have changed a .pricing2 and .pricing3 (not the elements you mentioned but it’s the closest thing) which is not the circle code. That changed the border color around the pricing details…but as I said, the circle is all .pricing-label. You did not differentiate the 3 circles. You gave the same class to all 3.

How to you change them to make the color change on .pricing2 and .pricing3. Do I need to change something?


To keep everything neat, I’d copy .pricing-label CSS and name the copies .pricing-label2{} and .pricing-label3{} nad put the new background color on that. You’d have to change the HTML to match.

How do you get rid of the bullets beside all the text in the second and third “$14.97/year”, “$4.97/month” box?


On this rule

.list-checkmark, .myunstyled, .inline-right, .inline-left, .blocked-links, .social, .pricing table ul

Add in .pricing2 table ul, and .pricing3 table ul. Below is what it should look like

.list-checkmark, .myunstyled, .inline-right, .inline-left, .blocked-links, .social, .pricing table ul, .pricing2 table ul, .pricing3 table ul{}

.pricing2 table ul and .pricing3 table ul already exist.

.pricing2 table ul {
display: block;


.pricing3 table ul {
display: block;


Remove those two blocks of code. UL’s are already block by default.

And you still need to do what I said.