controlling title color in tabPanel()

[Stéphane Laurent]

Hello,

Is it possibly to control the title color of a tab generated by tabPanel() ? I mean a control inside the Shiny app (actually I'd like for example a red title which becomes blue once the user has visited this tab).

[Kirill Savin]

Doable with CSS and JavaScript. Tab headers are links and can be selected with <a> tag. Try adding
tags$style(type = "text/css", "a{color: #f50000;}")
to your ui.R to paint tab text in red.
This would change all links in your app to red. To avoid that, use "li a{color: #f50000;}" instead

a:visited pseudo selector wouldn't work on tab links, so you'll probably have to resort to JavaScript to highlight visited tabs.

[laurent stephane]

Thank you Kirill. 

Indeed, when I add

```

tags$head(

                tags$style(type = "text/css", "a{color: #f50000;}")

              )

```

to my headerPanel() in ui.R, then the title colors are red. 

But I have not understand what do you mean about "li a{color: #f50000;}"  ?

---

De : Kirill Savin <kirill...@gmail.com>
À : shiny-...@googlegroups.com
Envoyé le : Vendredi 27 septembre 2013 4h02
Objet : Re: controlling title color in tabPanel()

--
You received this message because you are subscribed to a topic in the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/shiny-discuss/NhwPX9Rs4ww/unsubscribe.
To unsubscribe from this group and all its topics, send an email to shiny-discus...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Stéphane Laurent]

Thank you Kirill. 

Indeed, when I add

```

tags$head(

                tags$style(type = "text/css", "a{color: #f50000;}")

[Kirill Savin]

If you place an url anywhere in your application it will also turn red.
If you want to avoid that, change your CSS selector to "li a" to select only those links that are nested inside a list (li).
Here is HTML code of tab headers:
<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" href="#tab-7629-1">One</a>
    </li>
    <li>
        <a data-toggle="tab" href="#tab-7629-2">Two</a>
    </li>
    <li>
        <a data-toggle="tab" href="#tab-7629-3">Three</a>
    </li>
</ul>

[Stéphane Laurent]

Aahh OK ! When you said "link", I was under the impression you were talking about "tab links". Thanks !

So finally, changing only the color title of one interactively specified tab is not so easy.

[Paul de Barros]

This is something I have been working on myself, and stumbled across this conversation while doing research.  I made a modified version of tabsetPanel that allows setting colors of all the tabs.  It doesn't quite do what you are looking for, but it might get you closer.

https://github.com/debarros/tabsetPanel2

For setting the color of all visited tabs, you would probably want to create reactive variables that keep track, for each tab, whether the tab has been visited once.  You can then use the reactive variables in the code for tabsetPanel 2 to specify the colors.  However, that might cause the entire tabsetPanel to rebuild itself every time you click on a tab.