TOC Navigation CSS : ShortPoint Support

C

Chris Vance

started a topic almost 5 years ago

Can you please provide example CSS, and what styles are available, for the TOC Navigation?

Reference: https://www.shortpoint.com/shortpoints/toc/

On the above page, the TOC is shown with a blue-ish background for "First Chapter", and then that background rolls over any other heading as it scrolls, but keeps the on-hover gray.

TOC backgrounds, font family/size, hover, active, etc.

Oksana Aloshyna

said almost 5 years ago

Hello Chris,

Thank you for your request. I will ask our experts to prepare some custom codes for you and will update you soon.

Kind Regards,

Oksana

C

Chris Vance

said over 4 years ago

Any word on this?

Haven't heard from anyone yet.

C

Chris Vance

said over 4 years ago

Just checking in, haven't heard anything yet.

Kyrylo Chernyshkov

said over 4 years ago

Hello Chris,

Thank you for your patience.

We have prepared some Custom CSS solutions for you.

There are 3 options:

1. Change the color fo active TOC item and change the font family/size.
2. Change the color of inactive TOC item
3. Change the color of the text in inactive TOC item.

/* Active blue color TOC item */
.shortpoint-toc li.shortpoint-toc-focus a {
  background-color: #36a9e0;
  color: #fff !important;

 font-size: 20px;
 font-family: Verdana;
}

/* Hover on inactive TOC item */
.shortpoint-toc ul a:hover, .shortpoint-toc li a:hover {
    background-color: #eee;
}
/*Hover on inactive TOC item text color*/
.g1-content a:hover {
    color: #000;
}

Please let us know if it works for you.