The attached image displays the days-of-the-week view of a calendar I'm trying to create, after upgrading from v1.4.11 to v1.6.4. The top section (v1.4.11) added color and rounded edges but I can't get the second version to do the same, even after copying and pasting the necessary code to the new file. If someone can tell me which CSS component that should be affected, I can easily apply a background color to the row and radius to the outside edges. Thanks in advance for any assistance.
Through trial and error, found the solution:
/*left top cell in personal calendar*/
.fc .fc-grid th.fc-leftmost {
background-position: 0 0;
-webkit-border-top-left-radius: 7px;
-moz-border-top-left-radius: 7px;
border-top-left-radius: 7px;
}
/*right top cell in personal calendar*/
.fc .fc-grid th.fc-sat {
background-position: 100% 0;
-webkit-border-top-right-radius: 7px;
-moz-border-top-right-radius: 7px;
border-top-right-radius: 7px;
}
/*first row (days of week) for personal calendar*/
.fc-content .fc-state-default {
border-style: solid;
border-color: #D2D2D2; /* inner border color */
background: green;
color: #fff;
}
Better:
.fc .fc-grid th
{
background: green;
}
Related
I am trying to style a QGroupBox to match certain design requirements:
Note - the group title on top should be on the left but past the box curvature.
With the following style sheet, I get the images below (second image if I remove the word "left"):
QGroupBox {
font: bold;
border: 1px solid silver;
border-radius: 6px;
margin-top: 6px;
}
QGroupBox::title {
subcontrol-origin: margin;
subcontrol-position: top left; // for second image: top;
padding: 0 2px 0 2px;
}
So, it seems what I want is subcontrol-position: top left; but with an added offset. I could not find that anywhere.
Adding padding erases the line, so it is not what I want.
There is one option I found just now - a different option for subcontrol-origin::
QGroupBox::title {
subcontrol-origin: padding;
subcontrol-position: top left;
padding: -16 12px 0 12px;
}
It looks almost right - but the border now cuts through the title.
How can I move the title of the group box, so that it is still on left but past the box curvature, and the curvature to stay visible, such as in the design ?
Applying the following style:
QGroupBox {
font: bold;
border: 1px solid silver;
border-radius: 6px;
margin-top: 6px;
}
QGroupBox::title {
subcontrol-origin: margin;
left: 7px;
padding: 0px 5px 0px 5px;
}
I get something like this:
I have revolution Slider on a Wordpress CMS. I've implemented custom css in the Revolution Slider panel. When you first load the page the slider is rounded on the top left and bottom right, but when you resize the window (just a little bit) the rounded corners disappear! I cannot find the culprit, the responsiveness should continue to work with the custom css, but it does not. Thank you for any help.
https://www.superherodigital.com/livescan/
Code that I'm using.
-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 0;
no need for these complicated tasks ...
Just follow the path below in Direct Admin and ... (file manager)
path:
example.com/wp-content/plugins/revslider/public/assets/css/rs6
open rs6
use ctrl+f and search rs-module
rs-module { position:relative;overflow:hidden;display: block;border-radius:25px }
put border-radius:25px or anything 35px , 45px ....... like up line ...
This is probably something to do with the slider declaring the CSS properties in JS (dynamically changing the DOM properties), removing any applied styles in your stylesheet. I can see you're applying these declarations on #rev_slider_1_1_wrapper.
I would add a class to this instead, and apply the border radius to a new class.
.rev-slider-border-radius {
-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 0;
}
Then add the class to the slider wrapper element if it is in your HTML:
<div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container avada-skin-rev-nav rev-slider-border-radius"> ... </div>
Or, if the JS is generating this, apply the class via JS after the slider has been initialised:
$(function() {
$('.rev_slider_wrapper').addClass('rev-slider-border-radius');
});
You can add a wrapper around the slider revolution slider with the class roundedslider where the roundedslider class has following style attributes:
.roundedslider{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFW…9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
position: relative;
z-index: 1;
overflow: hidden;
}
This works perfect in the example here also: http://revolution.themepunch.com/home-slider-boxed/
All other questions about ThemePunch products are answered at http://themepunch.com/support-center
Hope this helps you further ?
To me this is working fine, just substitute your slider and the radius you like on the corners:
.rev_slider, .rev_slider_wrapper, .rev_slider_wrapper img, .tp-revslider-mainul, .tp-revslider-slidesli
{
-webkit-border-radius: 8px !important;
-moz-border-radius: 8px !important;
border-radius: 8px !important;
}
I have the following div stricture.
<div class="profile_outer>
<div class="profile"></div>
</div>
And the following CSS
.profile_outer {
border: 2px solid #660000;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
}
.profile {
width: 198px;
height: 225px;
border: 1px solid #660000;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
z-index: 100;
}
.profile_outer:hover {
background-color: blue;
}
you can find the fiddle here
Both divs do not have a background, the background is determined by an image on some parent div. So they are transparent.
So, on a hover I just want to change the background of the outer profile. It only works if I also change the background color of the inner div using
.profile_outer:hover .profile {
display: block;
background : #fff; // but I do NOT want to change the background
}
I tried the following combinations of these:
.profile_outer:hover .profile {
display: block;
background : none !important;
background-color:transparent;
}
Thanks for your help.
Well, I guess that the effect that you want is this
.profile_outer {
border: 2px solid #660000;
border-radius: 5px;
overflow: hidden;
}
.profile {
width: 198px;
height: 225px;
border: 1px solid #660000;
border-radius: 5px;
z-index: 100;
}
.profile:hover {
box-shadow: 0px 0px 0px 1000px blue;
}
fiddle
... but you should review your ideas about transparency ...
After re-reading the question, I think that Moob's sugestion is right, the answer to the question is
.profile_outer:hover .profile {box-shadow: 0px 0px 0px 1000px blue;}
Set the child's background to #fff and it'll work.
Your problem happens because the default background color for all elements is transparent
There is one other way to get this effect but it could be really annoying to implement. I'm only offering it up as a solution for completeness. Effectively you have the SAME background image on the bit that is supposed to appear masked:
body {
margin:0px;
background:#fff url('http://lorempixel.com/output/cats-q-c-640-480-5.jpg') 0 0 repeat;
}
.profile_outer {
margin:20px; /* added this just to show that you'd need to offset the image placement in .profile depending on its position */
}
.profile {
background:#fff url('http://lorempixel.com/output/cats-q-c-640-480-5.jpg') -20px -20px repeat;
}
http://jsfiddle.net/PdQFJ/1/
I am trying to make an arc using border-radius like this (in chrome)
#elem {
border: 2px solid orange;
border-bottom: none;
width: 440px;
height: 60px;
border-top-right-radius: 220px 60px;
border-top-left-radius: 222px 60px;
}
but the arc is not continuous. if i remove the border-bottom property (which makes the bottom border also visible) it became continous. Making bottom-border color to transparent also doesn't help.
e.g. http://jsfiddle.net/kFxec/9/
Not able to understand what is wrong here?
I am trying this for chrome only. works fine in firefox
you could instead fake border with box-shadow : http://jsfiddle.net/ZC2m2/
#elem {
box-shadow:0 -2px 0 orange;
width: 440px;
height: 60px;
border-top-right-radius: 220px 60px;
border-top-left-radius: 222px 60px;
}
I would say that it is some kind of bug.
Seems related to the bottom border.
It disappears with this CSS
#elem {
border: 2px solid orange;
border-bottom: none;
width: 440px;
height: 60px;
border-top-right-radius: 220px 60px;
border-top-left-radius: 222px 60px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
What you see cutting the top border seems the bottom border doing strange things around. But giving it a moderate radius seems to somehow make it behave. (I don't know why)
fiddle
I want to make ajax Calander control in bigger size by overriding the style of default ajax Calender.
It should be work in larger view. I tried but its not working well when I tried to select month/year view..
Here I attached screenshot what exactly I want to do with ajax calender control.
Will it possible to make it larger view for iPad website?
OR Suggest me good calender control for Ipad website, I want to use asp.net website.
Thanks
abhishek
i have just been through this myself. there are a 3 things you need to do.
First - add a css class to your control. But beware if you do this it wipes the existing class of ajax__calendar and so most of its existing styling so add to the CalendarExtender
CssClass="ajax__calendar bigcal"
where bigcal is your new class.
Second - add your css for the styling using the bigcal class - e.g.
.bigcal .ajax__calendar_container { width: 220px; font-size:14px;}
.bigcal .ajax__calendar .ajax__calendar_container {border: 3px solid #646464;}
.bigcal .ajax__calendar_days, .bigcal .ajax__calendar_months, .bigcal .ajax__calendar_years, .bigcal .ajax__calendar_body
{width:220px;height:200px}
.bigcal .ajax__calendar_month, .bigcal .ajax__calendar_year{height:55px;padding-top:4px}
.bigcal .ajax__calendar_container table, .bigcal .ajax__calendar_container TD {font-size:14px}
.bigcal .ajax__calendar_days td div{padding:4px 5px 4px 4px}
Notice i have reset the size of it to 220 wide and 200 high - adjust accordingly
Third - you need to change the size of it in the javascript, cos it defaults to a set size for the scrolling etc to work. so
Add the following to the CalendarExtender
OnClientShown="setBigCal"
and then the following js function
function setBigCal(sender, e) {
sender._height = 200;
sender._width = 220;
}
HTH :)
EDIT - Sorry - just seen the date on this question so i assume you are already sorted. But I will leave the answer up incase anyone else gets the same issue.
i know my answer is late. i know you are asking about ajax calender. but it may help others. several programmers ask how to format asp.net calender. You can format asp.net calendar using following styles:
.calander {
background-color: whitesmoke;
border: 1px solid;
height: 305px;
width: 280px;
}
.calander table tr td {
padding: 10px;
}
.calander table tr td:hover {
background-color:rgb(200, 255, 0);
}
.ajax__calendar_today {
background-color: rgb(209, 233, 255) !important;
border-radius: 3px;
}
.ajax__calendar_footer {
background-color: rgb(209, 233, 255) !important;
width: 100% !important;
margin: 0px !important;
padding: 0px !important;
position: relative !important;
height: auto !important;
}
.ajax__calendar_active {
background-color: rgb(200, 255, 0) !important;
border-radius: 3px;
}
.ajax__calendar_day {
height: 20px !important;
width: 20px !important;
padding: 0px;
text-align: center;
margin-top: -8px;
margin-left: -5px;
}
.ajax__calendar_body {
width: 270px !important;
height: 245px !important;
}
.ajax__calendar_container {
width: auto !important;
}
these styles can be customized any way you want.