<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic Re: TimeRangePicker and splButton CSS Colour in Dashboards &amp; Visualizations</title>
    <link>https://community.splunk.com/t5/Dashboards-Visualizations/TimeRangePicker-and-splButton-CSS-Colour/m-p/52893#M2714</link>
    <description>&lt;P&gt;Your TimeRangePicker color can be changed with the following -&lt;/P&gt;

&lt;PRE&gt;&lt;CODE&gt;.TimeRangePicker .timeRangeActivatorWrapper {
background-image: none;
background-color:yourcolor;
}
&lt;/CODE&gt;&lt;/PRE&gt;

&lt;P&gt;As far as the search button, I'd just have the hover portion change the background color and omit the image unless you want your image to be different when you hover over it.&lt;/P&gt;</description>
    <pubDate>Wed, 05 Jun 2013 19:40:53 GMT</pubDate>
    <dc:creator>Flynt</dc:creator>
    <dc:date>2013-06-05T19:40:53Z</dc:date>
    <item>
      <title>TimeRangePicker and splButton CSS Colour</title>
      <link>https://community.splunk.com/t5/Dashboards-Visualizations/TimeRangePicker-and-splButton-CSS-Colour/m-p/52892#M2713</link>
      <description>&lt;P&gt;Hello,&lt;/P&gt;

&lt;P&gt;I am having trouble with two css elements.&lt;/P&gt;

&lt;P&gt;1) I am unable to change the colour of the TimeRangePicker (button titled 'AllTime' ?) using the following css:&lt;/P&gt;

&lt;PRE&gt;&lt;CODE&gt;.TimeRangePicker {
color: #112442;
background-color: #112442;
&lt;/CODE&gt;&lt;/PRE&gt;

&lt;P&gt;}&lt;/P&gt;

&lt;P&gt;or&lt;/P&gt;

&lt;PRE&gt;&lt;CODE&gt;.TimeRangePicker .timeRangeActivatorWrapper {
color: #112442;
background-color: red;
&lt;/CODE&gt;&lt;/PRE&gt;

&lt;P&gt;}&lt;/P&gt;

&lt;P&gt;2) I can change the colour of the splButtons, however when I mouse over (hover) the magnifying glass icon disappears and it just displays a block. Here is my code:&lt;/P&gt;

&lt;PRE&gt;&lt;CODE&gt;.splButton-primary {
background-color: #112442;   
color: ;
background-image: url(overlay_softgradient_28.png); 
&lt;/CODE&gt;&lt;/PRE&gt;

&lt;P&gt;}&lt;/P&gt;

&lt;PRE&gt;&lt;CODE&gt;.splButton-primary:hover, input.searchButton:hover {
background-color: #102950;
background-image: url(overlay_softgradient_28.png); 
&lt;/CODE&gt;&lt;/PRE&gt;

&lt;P&gt;}&lt;/P&gt;

&lt;P&gt;The css file I am editing is application.css contain within the static dir of my app.&lt;/P&gt;

&lt;P&gt;Appreciate the help.&lt;/P&gt;</description>
      <pubDate>Sun, 02 Jun 2013 16:30:26 GMT</pubDate>
      <guid>https://community.splunk.com/t5/Dashboards-Visualizations/TimeRangePicker-and-splButton-CSS-Colour/m-p/52892#M2713</guid>
      <dc:creator>calump90</dc:creator>
      <dc:date>2013-06-02T16:30:26Z</dc:date>
    </item>
    <item>
      <title>Re: TimeRangePicker and splButton CSS Colour</title>
      <link>https://community.splunk.com/t5/Dashboards-Visualizations/TimeRangePicker-and-splButton-CSS-Colour/m-p/52893#M2714</link>
      <description>&lt;P&gt;Your TimeRangePicker color can be changed with the following -&lt;/P&gt;

&lt;PRE&gt;&lt;CODE&gt;.TimeRangePicker .timeRangeActivatorWrapper {
background-image: none;
background-color:yourcolor;
}
&lt;/CODE&gt;&lt;/PRE&gt;

&lt;P&gt;As far as the search button, I'd just have the hover portion change the background color and omit the image unless you want your image to be different when you hover over it.&lt;/P&gt;</description>
      <pubDate>Wed, 05 Jun 2013 19:40:53 GMT</pubDate>
      <guid>https://community.splunk.com/t5/Dashboards-Visualizations/TimeRangePicker-and-splButton-CSS-Colour/m-p/52893#M2714</guid>
      <dc:creator>Flynt</dc:creator>
      <dc:date>2013-06-05T19:40:53Z</dc:date>
    </item>
  </channel>
</rss>

