Docs

[lhd333]

How do I customize the highlight function?

I want to highlight a heading but if the heading wraps to a second line (in a narrower display like mobile), the highlight itself overlaps the text. Changing the line spacing is not preferred.

Sample: http://awesomescreenshot.com/0e661sahf0

Also, for someone reason, my default highlight color is blue. How do I modify this specific highlight to be yellow?

[Prasant Rai]

Hello There,

Thanks for writing in!

1) 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.

2) You can add this under Custom > CSS in the Customizer to change default text selection color:

::-moz-selection {
    background-color: #ff6200;
    color: #fff;
}

::selection {
    background-color: #ff6200;
    color: #fff;
}

Please change color code as per your choice.

Thanks.

[lhd333]

I don’t think this is specific to my site. I’ve seen it happen on other X theme powered sites as well. (But to appease you I’ll send the info in the next message)

Regarding your reply to item 2, isn’t there a shortcode modifier that will work? Something like:

[highlight color=#333333]TEXT GOES HERE[/highlight]

[lhd333]

This reply has been marked as private.

[Nabeel A]

Hi there,

1. To change the color of Highlight, you can use the Shortcode like this:

[highlight style="background-color: #f2ff2a !important;"]TEXT GOES HERE[/highlight]

2. To fix the overlapping issue, please add the following code in your Customizer:

.x-highlight {
    line-height: 1.7 !important;
}

Let us know how this goes!

[lhd333]

This reply has been marked as private.

[Joao]

Hi There,

use the code below instead.

.x-highlight {
padding: .5em !important;
font-size: 20px;
}

Let us know how it goes,

Joao

[lhd333]

This reply has been marked as private.

[Joao]

Hi There,

Pleas activate the account in order that we can take a closer look.

“ACCOUNT PENDING: Your account is currently not active. An administrator needs to activate your account before you can login.”

Thanks

Joao

[lhd333]

This reply has been marked as private.

[Joao]

This reply has been marked as private.

[lhd333]

This reply has been marked as private.

[Friech]

Hi There,

Add this on your custom CSS in Customizer.

.x-highlight {
	  line-height: 1.7;
}

Clear your browser’s cache before you preview the site.

http://prntscr.com/c7kvql

Hope it helps, Cheers!

[Author]

Posts