Change CSS style of timescale buttons in Plotly Timeseries Chart - javascript

I am pretty new to Dash/Plotly and I am trying to style the timescale buttons with CSS but it seems that none of the classes is reacting to the styles I apply. I have something similar to this:
Plotly Time Series Chart
https://plotly.com/python/time-series/
and my goal is to make the buttons bigger and a bit darker with rounded corners. Normally I would do something like that:
button {
margin-left: 15px;
margin-right: 15px;
height: 45px;
width: 70px;
border-radius: 10%;
color: white;
font-weight: bold;
background-color: #80848d;
}
but in this case it seems that buttons have a tag and a selector-rect class that are pre-styled.
Has anyone managed to solve the problem so far?

You can override your styles by using the same class that pre-styled and add !important for your styles like that:
.class-pre-styled
{
margin-left: 15px!important;
margin-right: 15px!important;
}
I hope that helps you!

Related

Can I clip mask text over a div in CSS (with or without the help of JS)?

I would like to make a fancy looking button in CSS, where it displays a text overlay for a number on the left (see image below).
Is it possible in CSS (with or without the help of JS) to mask overlay text onto an element, similar to that of the Photoshop 'Clipping Mask'?
EDIT: As always you guys want to know I did some testing, which I did, but did not manage to position the number correctly where the button was on the page, using abosolute and relative position, so I asked here not only so that I could get help, but so that I could archive the answer in a format that can be easily found through Google. I have tried this. I want the definitive answer, so that I don't just use a way that 'works', but a way that works well.
I would try something like this
html:
<div class="number">1</div>
css:
.number{display: inline-block; background-color: #ccc; max-width: 50px; max-height: 50px; width: 50px; height: 50px; font-size: 80px; font-weight: bold; text-align: center; line-height: 60%; color: #000; overflow: hidden; vertical-align: middle;}

Bootstrap CSS Menu Box Type Issue

I am making a site in Bootstrap and am unable to achieve making a simple menu.
I want to make something like this:
So far I have achieved this:
I tried but cant make my CSS to work properly.
Here is my CSS Code:
.navbar-nav li a {
height: 90px;
line-height: 60px;
margin: 0 10px;
background-color: #f1f1f1;
font-size: 1.1em;
border-radius: 10px;
}
Any help would be appreciated.
Check this fiddle https://jsfiddle.net/gward90/h8cnbL5w/1/
To adjust the look of your buttons play with the padding of .nav>li>a Thats a BS default css class. The default padding value is set to padding: 10px 15px
You also need to remove the height from your .navbar-nav li a class that is whats making your buttons so large you also don't need the line-height.

kendoSlider increase/decrease button size

I'm trying to figure out how to decrease the size of the buttons on the kendoSlider (for that matter, the slider is also too large).
Their documentation doesn't really make any mention of it.
Why do I want to do this? I've recently added it to my footer and the buttons are so big that it's bumped up the size of my footer entirely. I'd rather decrease the button size instead of completely changing the size of my footer.
I would assume it's something with the CSS for the slider, but I haven't had any luck with that so far.
Here's an image to demonstrate what I mean:
if the Buttons to big, why just hide them?
With
showButtons: false
in the configuration.
The size of the Buttons you can change via css. For example:
.k-slider .k-button, .k-grid .k-slider .k-button {
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
/* new */
border: 1px solid red;
width: 20px;
height: 20px;
}
.k-slider .k-button .k-icon {
margin-top: 1px;
vertical-align: top;
}
Inspect the HTML element with chrome devtools or firefox.
I think the "size" of the slider you can adjust with this class:
.k-slider-wrap {
width: 100%;
height: 100%;
}
For the sprite-size eventually this helps out.
Or just creatte your own one.

Change ColVis Style in Datatable Javascript

I want to give background color for 'Hide/Show columns' label in ColVis.js file where I need to do the change?
Looks like you can edit the css for the button in extras/ColVis/media/css/ColVis.css
.ColVis_Button {
position: relative;
float: left;
margin-right: 3px;
padding: 3px 5px;
height: 30px;
background-color: #fff; /* here */
border: 1px solid #d0d0d0;
cursor: pointer;
*cursor: hand;
}
Can't really see a way to do this using the api or options.
I suppose you could do this:
$('.ColVis_Button').css("background-color", "red");
These button styles are all CSS defined already. Just change the CSS in the ColVis CSS file that defines them.
This is the official and proper way because these are styles.
instead of css change is there any possibility to change in view page
jquery,i.e,using this,$('#example').datatable({});
You don't change it in the datatable init because that is JS that modifies the ColVis JS params and controls the plugins functionality i.e. not how it looks.

Effect for image on mouseover

look this:
When the pointer is on the image I want a small dark rect at the bottom of this image with some text. How can I do this? Maybe with jquery?
Thanks guys.
You can achieve this many ways. Depending on the structure of your page, you could accomplish this with a couple of CSS classes.
HTML:
<div class="image_hover"><span>Text</span></div>
CSS:
.image_hover { background-image: url("path/to/image"); height: 95px; width: 270px; }
.image_hover span { display: none; }
.image_hover:hover span { display: block; position: relative; top: 80px; width: 270px; text-align: center; background-color: white; border: 1px solid black; height: 15px; line-height: 15px; }
You would need to make some updates based on your particular situation. Here is a working example on jsbin. This solution hides the text by default, and when the user hovers over the div, the :hover class will cause the text to be displayed.
You could also use jQuery to either add or show the div onmouseover.
Yeah, you can easily use jquery to achieve that.
If you want to learn the whole process and do it yourself, take a look at this - Sliding Boxes and Captions with jQuery
Or take a look at a few plugins for achieving the same effect - 10 Stylish jQuery caption plugins

Categories

Resources