how to put under your post status headline which has small icon like live

Posted in: Newspaper
Post count: 118

null i need this action on my website like pro websites include categry or lebel icon under post like this image status with icon like live now ,upadtes

Post count: 35449

Hi,
Do you want this option to be constant to a block, for example, in your image, only the block that is in the center to have that live tag? If is so then it can be done by using a custom css:
Here is what you should do:
Edit the page using tagDiv Composer, select the block you want to display the live icon, then add the class cls-live – https://i.imgur.com/l67gVqU.png after that add the raw css element and set the blow css https://i.imgur.com/4rTX1e7.png

.cls-live .td-module-title a::before {
content: "LIVE";
position: relative;
z-index: 999;
display: inline-block;
align-items: center;
color: #ff2b2b;
font-weight: 600;
letter-spacing: 1px;
padding: 6px 8px;
border-radius: 20px;
}
.cls-live .td-module-title::before {
content: "";
position: relative;
transform: translateY(-40%);
display: inline-block;
vertical-align: middle;
width: 8px;
height: 8px;
background: #ff2b2b;
border-radius: 50%;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 43, 43, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(255, 43, 43, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 43, 43, 0);
}
}

Thank you!

Post count: 118

I NEED ONLY ONE POST NOT HALL BLOCK AND IWANT LIVE STYLE DOT CIRCLE THATS MY FAVOR NOT THAT ONE

Post count: 118

I NEED LATEST POST ONLY

Post count: 35449

Hi,
To achieve this, you need to add a block on your website and configure it to display only one article. Make sure the block is sorted by latest, and assign it the class “cls-live”.
With this setup, the result will apply only to the most recent post, as you described.
Unfortunately, there is no option to automatically apply this behavior to all blocks that display the latest article. You will need to use the method described above for each block.
Thank you.

Post count: 118

OK I NEED TO USE DOTCIRCLE ICON SEND ME CODE TO CHANGE THAT LOOK THANKS

Post count: 35449

If you want to have that icon for live, please upload an image with that icon to the media and give me a link to it, I will try to replace the current dot with that image.

Post count: 118

bbc.com

Post count: 35449

Hi,
Please try this code:

.cls-live .td-module-title a {
position: relative;
padding-left: 50px;
}
.cls-live .td-module-title::before {
content: "LIVE";
position: absolute;
z-index: 999;
display: inline-block;
align-items: center;
color: #ff2b2b;
font-weight: 600;
padding-left: 18px;
letter-spacing: 1px;
border-radius: 20px;
}
.cls-live .td-module-title a::before {
content: "";
position: absolute;
left: 0;
top: 8px;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

It is possible that I need to adjust the code, so after setting it, please provide a link to the block where I can see how this is looking and adjust it.

Viewing 9 posts - 1 through 9 (of 9 total)
You must be logged in to reply to this topic.