Round corners on block title

Posted in: Newspaper
Post count: 76
celhil
#403956
Jun 4, 2021 at 2:43 pm

Hello,

how can I make that the block title has round corners? I also want to change the text- and element-size. In tagdiv composer I didn’t find the correct option. Or is this only possible by custom css?

Here you can see what I need (NEUESTE BEITRÄGE): https://ibb.co/7ytQ8Hw

Thank you and best regards
Andre

  • This topic was modified 5 years by celhil.
Post count: 27744
Anamaria
#403989
Jun 4, 2021 at 4:27 pm

Hello,

You need to add an extra class on the block => https://www.screencast.com/t/irQ3tCur0v, for example, “td-border” and use this custom code CSS for title
.td-border.td_block_template_3 .td-block-title .td-pulldown-size
{
border-radius: 20px;
}

Set the code in Theme Panel -> Custom Code -> Costum CSS.

Hope this helps you!

Thank you!

Post count: 76
celhil
#404611
Jun 9, 2021 at 9:45 pm

Hi Anamaria,

I’m using the following code.

.td-pulldown-size {
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    height: 20px;
}

There are two problems:

How can I reach, that the text is vertical center?

And when I click on the header logo or refresh the site, the header elements loads in old design. After a half second the css is loading correctly. I have tested it on safari and chrome (desktop). Do you have an idea how I can fix that?

Let me show you the problem on a video: https://youtu.be/X4Jtj5VxB7E

Thank you and best regards
Andre

  • This reply was modified 5 years by celhil.
Post count: 27744
Anamaria
#404694
Jun 10, 2021 at 1:55 pm

Hello,

A solution is to set the code in Theme Panel -> Analytics/Js Codes, and using these tags
<style>
.td-border.td_block_template_3 .td-block-title .td-pulldown-size
{
border-radius: 20px;
}
</style>

Thank you!

Post count: 76
celhil
#404698
Jun 10, 2021 at 2:24 pm

Thank you (and Alex from support) very much.

By placing the code in Analytics/JS Code with the following additions did it. Its loads correctly and the text is in center.

<style>
.td-pulldown-size {
border-radius: 5px;
font-size: 12px;
font-weight: bold;
height: 20px;
text-align: center;
line-height: 20px;
}
</style>

Post count: 27744
Anamaria
#404716
Jun 10, 2021 at 4:19 pm

Hello,

I’m glad that the solution helped you achieve what you want.

Have a nice day!

Viewing 6 posts - 1 through 6 (of 6 total)
The forum ‘Newspaper’ is closed to new topics and replies.