Table of content customize
Asked by serc:

Hi guys,

i'm currently trying to create a css class for a TOC but something i'm doing wrong.  
i have inserted this code as an example:

TOC without my class:

![bild1.PNG](/t5/image/serverpage/image-id/46036i37DE402AF6D6A5C1/image-size/large?v=v2&px=999 "bild1.PNG")

```
div.tableOfContent

{

text-color:black;

}
```

![bild3.PNG](/t5/image/serverpage/image-id/46039i9AB3CB96F2EF5345/image-size/large?v=v2&px=999 "bild3.PNG")

result looks like this:

![bild2.PNG](/t5/image/serverpage/image-id/46040i00FC0D5C97A71E25/image-size/large?v=v2&px=999 "bild2.PNG")

can anyone tell me what I did wrong?


Answers:
author: Bill Bailey
body: With Confluence styling, you need to use the inspect function of the browser to see the rule that is being used. In the case of the ToC, it is using a high-level rule to style ALL links:

```
.wiki-content a, .wiki-content a:link, .wiki-content a:visited, .wiki-content a:focus, .wiki-content a:hover, .wiki-content a:active {
color: #3572b0;
}
```

So in your case, you need a rule that selects only your ToC

```
.wiki-content .tableOfContent a {
color: #030303;
}
```


author: serc
body: anyone else has some ideas :D?

comments: author: Grigory Salnikov
body: Hi [@serc](/t5/user/viewprofilepage/user-id/2379213) !

Have you tried the solution provided by [@Bill Bailey](/t5/user/viewprofilepage/user-id/502089) ? It's on top now.


author: serc
body: yes i add this:

```
.wiki-content .tableOfContent a {
color: #030303;

```

but nothing change, always the discs


author: Grigory Salnikov
body: Hi [@serc](/t5/user/viewprofilepage/user-id/2379213)

Endlich :)

I've had time to reproduce the situation in my environment. [@Bill Bailey](/t5/user/viewprofilepage/user-id/502089) 's solution actually works.

Here's the parameters:

![stylesheet.jpg](https://community.atlassian.com/t5/image/serverpage/image-id/46168i809E81157B91B4F1/image-size/large?v=v2&px=999 "stylesheet.jpg")![toc1.jpg](https://community.atlassian.com/t5/image/serverpage/image-id/46169iD95392CFBF22AEB0/image-size/large?v=v2&px=999 "toc1.jpg")![toc2.jpg](https://community.atlassian.com/t5/image/serverpage/image-id/46170i614C53CBC4344196/image-size/large?v=v2&px=999 "toc2.jpg")![result.jpg](https://community.atlassian.com/t5/image/serverpage/image-id/46171iC06F2D498892C526/image-size/large?v=v2&px=999 "result.jpg")

As you can see - works for me.

Try to reproduce it and get back to us with the results.

Will wait for your answer.


author: serc
body: Okay I will try to clear all css styles and only implement this for the TOC, propably some other configs has some bugs. I will let you know about the reason!


author: Grigory Salnikov
body: Good


author: serc
body: i can change the color with

```
.toc

{

color:black;

}
```

but if i do this, the decimal count get changes with the discs

comments: author: Grigory Salnikov
body: Ok, let's see all the styling/code of this block. Maybe we should reproduce something as well to get the numbers.


author: Grigory Salnikov
body: Oh, I'm sorry.

According to this:

[Table of Contents Macro](https://confluence.atlassian.com/doc/table-of-contents-macro-182682099.html)

We just need to change the list style. Doesn't it work?


author: serc
body: f?r das inhaltsverzeichnis habe ich nur die oben dargestellte einstellung. muss ich alle anderen auch definieren?  
if yes, like this?

.toc

{

color: black;

style: decimal;

}


author: Grigory Salnikov
body: Hast du das schon versuchen, oder?


author: serc
body: yes, it doesnt work :(


author: Grigory Salnikov
body: I'm sorry I don't have access to my environment now.

If it's not so urgent I can test it later.

Geht es?


author: serc
body: i have some hours, that would be really nice!


author: Grigory Salnikov
body: Have you checked this:

![number.jpg](https://community.atlassian.com/t5/image/serverpage/image-id/46050i88F787C27EBEA662/image-size/large?v=v2&px=999 "number.jpg")


author: serc
body: yes, the result looks like this:![bild4.PNG](https://community.atlassian.com/t5/image/serverpage/image-id/46051i303BF633FFE35F90/image-size/large?v=v2&px=999 "bild4.PNG")


author: serc
body: dont know how can i delete this disks


author: Grigory Salnikov
body: Try to set this parameter as well:

![List Style.jpg](https://community.atlassian.com/t5/image/serverpage/image-id/46053iAFAAE4BB6ED31D67/image-size/large?v=v2&px=999 "List Style.jpg")


author: serc
body: i do but same result


author: Grigory Salnikov
body: It's strange because it works in my environment:

![example_TOC.jpg](https://community.atlassian.com/t5/image/serverpage/image-id/46055i37EE5B4094C6A2C9/image-size/large?v=v2&px=999 "example_TOC.jpg")

I don't use CSS-styling, though.


author: serc
body: yeah if i dont use a css styling it works too, but i need to change the text color to black :(


author: Grigory Salnikov
body: Try to change your CSS:

```
.toc a
{
color:black;
}
```


author: serc
body: class name is toc or a?


author: Grigory Salnikov
body: No, just add "a" after the class-name you use (whatever it is). This way we refer to links.


author: serc
body: dont work, always the black disks


author: Grigory Salnikov
body: Try to add

```
style:none
```


author: serc
body: nothing change :D, its really crazy...


author: Grigory Salnikov
body: Oh, try also the method described here:

[Table of contents is changing color](https://community.atlassian.com/t5/Confluence-questions/Table-of-contents-is-changing-color/qaq-p/379588)

May it be the case?

comments: author: serc
body: i try it but it doesnt work


author: Grigory Salnikov
body: Hi [@serc](/t5/user/viewprofilepage/user-id/2379213) !

I think these are also links. So we should change their color too.

comments: author: serc
body: but how?