[arefsParticipant]

Hello,

I want to change the style for some of the specific custom headlines I’m using on my site so they look more like this:

https://dl.dropboxusercontent.com/u/17713251/2016-01-15_11-51-11.jpg

As you can see the headline is by default unbolded allowing the site creator license to bold certain words.

I don’t want to change the font I’m using for my headlines and I don’t want to change the size of the text.

I also only want to do this on a headline by headline basis not across the whole site.

Can you help me figure out how to do this?

Thank you.

[RupokMember]

Hi there,

Thanks for writing in! You can use text on your Custom Headline like this – http://prntscr.com/9qa260

Custom <span style="font-weight: 700">Bold</span> Headline

Also add font-weight: 400; to the Style field – http://prntscr.com/9qa29g

Hope this helps.

Cheers!

[arefsParticipant]

Thanks for this. It works in most places on my site.

However, when I add it to one particular section something werid happens:

https://dl.dropboxusercontent.com/u/17713251/2016-01-15_11-51-11.jpg

Added to this custom headline is:

ID – whiteaccent
Class – my-custom-headline

Suspect it’s a CSS conflict but not sure. Here is the CSS I’m using on this page:

/*
No need for style tags here;
simply get started by writing
CSS! Watch as your changes
are reflected live in the
preview area. Have fun!
*/.x-card-outer.custom-card .x-face-title {
font-size: 30px;
}
.myfeature .x-feature-box-text a {
display: block
}.myfeature .x-feature-box-title {
font-size: 165.0%;
}
.my-custom-headline {
color: #ffffff;
}
.x-section.down-arrow {
position: relative;
}

.x-section.down-arrow:before {
content: “”;
display: block;
position: absolute;
top: 0;
left: 50%;
z-index: 1;
margin-left: -40px;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 40px 0 40px;
border-color: #262626 transparent transparent transparent;
}

[Rue NelModerator]

Hello There,

Thanks for the updates! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

[arefsParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

When you add what we have suggested in our previous reply here (https://community.theme.co/forums/topic/changing-the-style-of-custom-headlines/#post-746931), you also need to add this custom css to remove the overlapping accents.

.h-custom-headline.accent span span::before, 
.h-custom-headline.accent span span::after {
    display: none;
}

http://prntscr.com/9qc3k2

Hope this helps. Please let us know.

[arefsParticipant]

Thank you. Solved 🙂

[Nabeel AModerator]

Glad we could help 🙂

Cheers!

[Author]

Posts