Site logo

Archived topic

CSS dot

7 replies · Started by Maria on July 14, 2018

Viewing posts 1–8 of 8

Hey,
after the update the CSS
.dotrot {
height: 15px;
width: 15px;
background-color: #d42f2f;
border-radius: 50%;
display: inline-block;
}
doesn´t work.
What am I doing wrong? I would like to define three different colored dots (it should be a marker behind the text).
I'm grateful for any help.

Hi there,

Sorry not quite sure if I understand.

Which elements are you trying to apply the CSS to?

I don't think dotrot class exist in the theme before or after the update.

Let me know :)

Hi Leo,
I thought I can give classes in the CSS itself.

What would be the right class to create different colored points (circles)?
I would like a sort of rating system without a plugin. Thought with points it is easiest.
- text .... red point
- text .... green point
- etc.

Hi there,

would this 'dot' be after the text in a list? Or within a paragraph?

Hi David,
yes, I would use the dots in a listing.

What did I need in a (for example) packing list and what not.
I would like to have three different colored dots.

Ok, you could use this mark-up:

<ul>
    <li class="dot green">Line with green dot</li>
    <li class="dot yellow">Line with amber dot</li>
    <li class="dot red">Line with red dot</li>
</ul>

With this CSS:

.dot:after {
    content: "●";
    margin-left: 10px;
    font-size: 20px;
}

.dot.green:after {
    color: green;
}

.dot.yellow:after {
    color: yellow;
}

.dot.red:after {
    color: red;
}

Omg - It works - just as I imagined.
Many many thanks!!

Thats great to hear. And you're very welcome.

This archived topic is closed to new replies.