Customize the Links

Hi Amit,

I'm not exactly sure what link element is left from the elements you've mentioned.

But here's worth a try:

.entry-content p > a:hover {
    border-bottom: 2px solid black;
}

.entry-content p > a {
    border-bottom: 2px solid #f0544f;
}

Yeah, that works fine now but the Table of Contents font-weight is now reduced to normal and I can't work on what css to use for it.

Yeah, that works fine now but the Table of Contents font-weight is now reduced to normal and I can’t work on what css to use for it.

The CSS I've provided doesn't do anything to the element on that part of the page.

That part has it's own CSS coming from something else.

It's this one:

        <style>
            .lwptoc .lwptoc_i {
                background-color: #fafafa;
                border: 1px solid #efefef;
            }

            .lwptoc_header {
                color: #333333;
            }

            .lwptoc .lwptoc_i A {
                color: #f0544f;
            }

            .lwptoc .lwptoc_i A:hover,.lwptoc .lwptoc_i A:focus,.lwptoc .lwptoc_i A:active {
                color: #000000;
                border-color: #000000;
            }

            .lwptoc .lwptoc_i A:visited {
                color: #f0544f;
            }
        </style>

Which perhaps is something embedded by the plugin you use for it.

As for this one, it's best to ask the plugin developer for the best practice in styling it.

While you can simply style the font weight of the TOC using this:

span.lwptoc_item_label {
    font-weight: 600;
}

Perhaps the plugin has a UI for styling things. It's best to find that UI first (if it exists).

Hey, thanks a ton for that code as I was not able to find as what to apply styling at. The UI has all the options except for the one we were looking for!

If it's not in the UI then the CSS I've provided is the way to go.

Have you sorted it out?

Let us know.

Hey Elvin, yes it's sorted with your css! Thanks..

Nice one. No problem. :D