I'm using Adam Shaw's fullcalendar jquery plugin and it works really well, after speaking to the graphic designer he wishes to use images instead of fullcalendar's prev,next,today and the three view icons (month, week, day).
Using firebug I've isolated that the "prev" icon, for instance, is using the span class
fc-button-prev
However, when I go to the css and create the class applying a background image:
.fc-button-prev {
background-image: url('../images/prev.png');
}
Nothing happens.
Any ideas would be appreciated
May be you have to define display:block in your class like this:
.fc-button-prev {
background-image: url('../images/prev.png');
display:block;
width:50px;
height:50px;
}
because span is an inline element. So, inline element is not take width , height, vertical margin & padding in it.
In fullcalendar 2.x I had to use the following CSS to change "previous" button image:
.fc-prev-button {
background-image: url(../img/icon_arrow_left.png) !important;
background-size: 100% 100%;
width: 50px !important;
height: 50px !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
.fc-prev-button span {
display: none;
}
Related
I have a button that I'd like to customize differently than what I've set the global buttons. I added the button and modified it but there is no option for editing the hover color of the button so I am trying to write additional CSS for it.
I set up a new class for the button
Custom-Button-Orange-to-Purple
but when I try to add the additional styling to this element (I did try and set up the class without the :hover and that didn't work either).
.Custom-Button-Orange-to-Purple:hover {
background-color:#8601AF !important;
border-color:none !important;
}
The button I'm trying to modify is the orange one at the bottom of the page here: Kidz Haven Daycare . The code changes the border of the button to purple which I don't want.
I'm new to adding custom CSS (obviously) and would be grateful for some help!
This is what your CSS looks like, which is absolutely wrong:
.wp-block-button:hover .Custom-Button-Orange-to-Purple:hover has-custom-font-size:hover {
border-radius:8px;
background-color:#8601AF !important;
}
Also, there is no element with the class Custom-Button-Orange-to-Purple.
This is what I understand from your question: You have customized the style of usual buttons, and now you want to style a button which should look different. If so, this may help:
.btn-default {
width: 100px;
}
.btn-default:hover {
background-color: skyblue;
color: #fff;
}
.btn-special:hover {
background-color: purple;
color: #fff;
font-weight: bold;
}
<button class="btn-default">Normal Button</button>
<button class="btn-default">Normal Button</button>
<button class="btn-default btn-special">Special Button</button>
This took a full days worth of hunting and trying different methods. What I did was to get rid of the class name I had added to the "Advanced" tab where I created the custom button. Instead I added HTML to the block on the page where the button would appear. I used a div container as well to be able to center it on the page.
HTML added to the block with new class names:
<div class="Center-Aligned-Custom-Button-Orange-to-Purple">
WHY KIDS HAVEN DAYCARE
ADDITIONAL CSS:
.Center-Aligned-Custom-Button-Orange-to-Purple {
display:flex;
justify-content:center;
align-items:center;
}
.Custom-Button-Orange-to-Purple {
border-radius:8px !important;
font-family:Roboto !important;
font-size:15px !important;
font-weight:500 !important;
line-height: 25px !important;
padding-left: 15px!important;
padding-right: 15px!important;
padding-top: 1px !important;
padding-bottom: 1px !important;
text-align: center !important;
background-color: #FB9902 !important;
color: #fff !important;
position: absolute !important!;
}
I'm not certain if I "needed" to use the !important but given the amount of time it took to figure this out, I figured it was better safe than sorry!
Thanks for the responses. I'm a total newbie, so some comments were over my
I am trying to use mydaterangepicker(https://kekeh.github.io/mydaterangepicker/) into primeng turbotable (primeng calendar does not comply with the requirements), but it doesn't display well. can you help with some css code or another solution please
I provide my source code, thank you:
https://stackblitz.com/edit/angular-fv53c6
To fix the display of the calendar, instead of hiding inside the cell, putting it out in the open, put this in your app.component.css:
::ng-deep .mydrp { position:absolute !important; }
::ng-deep .selectorarrow { position:absolute !important; }
::ng-deep .mydrp .selectiongroup { margin-left: 12px; top: -18px; display: inline-table !important; border: 1px solid #CCC !important; }
::ng-deep .mydrp { border:none !important; }
::ng-deep body .ui-table .ui-table-thead > tr > th { height:45px !important; }
or check the working demo which is forked against your stackblitz
Your date picker is hidden because its parent's overflow is hidden.
You need to add overflow:visible to the parent of your my-date-range-picker and the div with class="ui-table-scrollable-header ui-widget-header".
I have attached image to button with css style.
.a-icon {
background: url('../a.png') no-repeat 100% 100%;
}
.b-icon {
background: url('../b.png') no-repeat 100% 100%;
}
In Firefox it looks fine, but in IE8 blue border appears around icon, when button becomes disabled. I have tried adding border: none and so on, but with no luck.
Any suggestions?
All links with img inside have a blue border on IE lte than 9, add to Your css global style for this tags.
a img {
border:none;
}
Add this to your CSS:
.a-icon,
.a-icon img,
.b-icon,
.b-icon img {
border: 0;
outline: 0;
background: transparent;
}
I think this will be the solution that you are looking for. If I understood you right, the problem is with the link border that is around the image. So you have to remove that.
So try this:
a img {
border:0;
}
Hope it helps
I have a small issue trying to get the following to work, and am not sure if it is something that CSS3 is designed to deal with or not. I have looked around and found that multiple background images are supported, however trying the many examples have resulted in nada.
This is the primary CSS code for rendering my buttons:
.button {
background:#eee url(images/button.gif) repeat-x 0 0;
border:solid 1px #b1a874;
color:#7f7f7f;
font-size:11px;
padding:2px 6px 2px 6px;
cursor:pointer;
line-height:14px !important;
}
The above code produces the standard buttons which are fine. But now I want to add icons on certain buttons, such as a print button. I use 2 sets of additional CSS class:
input.addImage {
background-repeat: no-repeat; /* once */
background-position: 5px 2px;
padding-left: 16px;
vertical-align: middle;
}
And:
input.Print {
background-image: url(../img/buttons/print.png); /* 16px x 16px */
}
As you can see my image is in fact 16x16 which fits nicely into the buttons. However the original background image is stripped away completly, leaving the background color as transparent.
I am sure that if its possible, its something basic I am overlooking, and look forward to figuring this out.
Finally the code for the button:
<input type="button" class="button addImage Print" ... >
Thank you for your valuable time.
When you apply a property in CSS, it completely overwrites any previously defined property for that element. What you need to do is tell it to apply 2 backgrounds to the element, which is done like this:
.button.Print {
background-image: url(images/button.gif), url(../img/buttons/print.png);
}
Multiple backgrounds is only supported within the same CSS class / element definition. Means, you have to set both backgrounds in .button.
Your .print has to contain the default background too seperated by a comma and followed with your print.png icon.
edit
My answer wasn't really clear about that. you have to specify the background first, which should be on top of the other one. Here's some example code with random pictures.
Demo: http://jsfiddle.net/RzWfp/
.button {
background-image: url(http://www.myinkblog.com/wp-content/uploads/2009/02/background2.jpg);
border:solid 1px #b1a874;
color:#7f7f7f;
font-size:11px;
padding:2px 6px 2px 6px;
cursor:pointer;
line-height:14px !important;
}
.button-test {
background-image: url(http://www.famfamfam.com/lab/icons/silk/icons/feed.png), url(http://www.tutorial9.net/wp-content/uploads/2008/07/air-balloon-gradient.jpg);
background-position: left center, center center;
background-repeat: no-repeat;
padding-left: 20px;
}
I'm trying to take away a white border that is appearing from behind an image on my sidebar. I can't figure out what is causing the white border. I thought it was the padding, and then I thought it was the border. If you visit our home page (http://noahsdad.com/) and look on the side bar under the "new normal" picture you will see a "Reece's Rainbow" image. I'm trying to remove that white around the image. I pasted in the code below, but it's not doing anything. Any thoughts as to what I'm doing wrong?
Thanks.
#text-23 { background: none}
the reason it's not working is the background: none is never getting to the img which has the background set on it (backgrounds don't cascade down they exist in the element and you can have multiple elements layered on top of each other much like a painting. Which has the effect of the background cascading)
#text-23 img { background: none; }
that should resolve your problems. I am assuming that when you call the class textwidget you still want it to append the white background, just not for this instance. So if you set the above it will cascade properly with the correct specificity while leaving the rest of your page alone.
This can also be done by
#text-23 .textwidget img { background: none; }
but that level of specificity is not required. However if you try to just do:
.textwidget img { background: none; }
this will override all of the instances where the background is set on an image in the textwidget container.
You have added the white border yourself by setting the following in line 884 of style.css:
.textwidget img {
background: #fff;
padding: 5px;
max-width: 290px;
}
Simply remove the background declaration. If you only want to remove this instance of a white border, add the following rule:
#text-23 .textwidget img {
background: none;
}
This seems to be the conflicting CSS class.
.textwidget img {
background: white;
padding: 5px;
max-width: 290px;
}
If you want to debug css you should really look into Firebug(a plugin for Firefox) or Opera and use builtin dragonfly
These allow you to rightclick on your HTML page and inspect it.
Go to your style.css file and search for .textwidget img and change the background-color property to none. It is currently set to #FFFFFF which is the hex color code for white and is resulting in the white border or background (precisely).
.textwidget img {
background-color: none;
}