I have this full calendar (v3.4.0) plugin. I have downloaded the CSS for it from here. I have almost fully customised it. However, I have spent an hour trying to figure out how to change the border-color for all the events. I have found out this eventBorderColor form full calendar docs but I am not sure how I can use it.
I have tried the following but none of them worked:
fc-time-grid-event fc-v-event fc-event fc-start fc-end {
border-color: red;
}
and this:
.fc-event {
border: 5px solid red;
}
I have tried this one from this question:
.fc-event-inner {
border: 5px solid red;
}
Screen shot of the events:
Screen shot of the Developer's Tool: There are some styles that are given using inline styles and they don't exist in the file. These inline styles seem to have higher priority when I try to take out the border-color the actual border is applied.
Any help would be much appreciated.
Thank you
try:
border: 5px solid red !important;
I have fixed the problem by using borderColor: 'red' in JavaScript for each event when I am displaying it on the calendar.
Related
When we scroll the fields on UI for going the last column, the CSS is breaking down and also tried to use the custom CSS, but when we use it at that time, the last field has been disappearing. This has been happening from last one month, not sure because of the updated chrome(100.0.4896.127) and also tried in Edge(101.0.1210.32)as well and don't know the issue is related to sencha/extjs 2.3 or browser related issue. Any suggestion/Help will be really helpful.
enter image description here
Override the .x-grid3-row css and
Add the display: inline-table; property in your custom css file. Then it should work fine.
.x-grid3-row {
cursor: default;
border: 1px solid #ededed;
border-top-color: #fff;
width: 100%;
display: inline-table;
}
I have an HTML page for my code and a CSS page for all my classes/styling, but my div class is not applying to my div code.
It's weird because all of my other div classes are fine, but it's just this one.
My code is simple:
<div class="box">
</div>
And my class is also fairly simple:
.box {
border-right: 10px solid black;
border-left: 10px solid black;
border-top: 10px solid black;
border-bottom: 10px solid black;
}
It is probably a simple rookie mistake as I am new to this, but as I said, all the other classes work fine and they are the same as this.
Also, I tried putting the class in the HTML file itself, in [style], and it worked perfectly. I just wanted to know why it wasn't working when it was in another file when everything else was.
You must specify the width and height of the div. Because of that, it isn't showing the borders. Or, you can put some content inside your div, and after that, it will show the borders.
And a little advice: you don't have to type style for all border sides especially. You can just say: border: 10px solid black; and it will be applied to all sides of the box.
You need to add some content to your div, or give a height to your div. If not, you will not be able to see your div and the border styles that you added.
In addition, you can make your code more efficient since all 4 border sides are the same styles. You can just use the following styling:
.box {
border: solid 10px black
}
So, after a bit more googling, I discovered it was as simple as doing shift + f5 to do a complete cache refresh. Turns out, if you have a completely separate file for all your CSS classes, it doesn't update the cache automatically.
I have a website with a product page that need changes:
http://weardenali.com/product/everyday-messenger
I'm trying to
a) Change the background color
b) Remove the shadow box
It works on the iPad (which is 768px in height) but as soon as the website height decreases below 768px, the swipe function stops working.
I hope somebody can assist me with this .
This image of my site is here
Here are your changes:
A) change product-main clearfix style background-color: #fcfcfc; to your wish color.
B) Remove
Remove /* -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1); */
Remove /* box-shadow: 1px 1px 1px rgba(0,0,0,.1);`
from your
summary
class or rename your div.
C) i just test it in chrome version 55........ simulated iphone 5 and ypur carousel still working.
To answer your questions in order:
a) The background of your page is specified as an element style. Probably from the WordPress styling or any other cause that I cannot immediately determine. The root element is styled by .product-main in the sf-combined.min CSS file. Here you can set the background-color to anything you want, as proposed:
.product-main {
background-color: #anything;
}
Considering this may or may not work, I suggest you try to determine why the .product-main has a element style of #fcfcfc. The following is not recommended but you can always set .product-main { background-color: #anything !important; } to override any settings. But this is not best practise.
b) in your CSS in sf-combined.min.css on line 15 (which may be inaccurate because it's a minified CSS document) you have the following line:
.product-fw-split div.product div.summary.
Remove the box shadow entries from the CSS:
.product-fw-split div.product div.summary {
padding: 40px;
margin-bottom: 40px;
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.1);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1);
box-shadow: 1px 1px 1px rgba(0,0,0,.1);
}
And the box shadow should disappear. Please do check for any responsive queries that may affect the same thing on mobile devices (which I didn't check).
c) I could not determine entirely what your question was in c. I believe you want to know how to prevent the swipe functionality from stopping working when resizing on devices smaller than 768px? It might be WooThumbs intended functionality, in which case I suggest you head over to CodeCanyons support and try to get an answer directly from them. https://codecanyon.net/item/woothumbs-awesome-product-imagery/2867927
Hope it helps.
Next time it might be easier to split your questions off into multiple questions, so that others can find answers more easily.
There is some weird white space showing up on the right side of my website in mobile. I was wondering if there is a CSS trick to add a border to all the html elements within the body of a webpage so that I can figure out which element is extending out and causing the white space on mobile.
Thank you
You can try this CSS snippet:
* { border: 1px solid black; }
Every element should now get a border. Beware, this means everything. Hopefuly it'll help you figure out that white space in your app!
Include that CSS snippet before your CSS files so that it can be overwritten - or after, to force it onto every element.
Try with
* {
outline: 1px solid red;
outline-offset: -1px;
}
* is a global selector, while outline will not mess with your elements positions, it'll just add a 1px red outline
Also make sure you use a CSS reset (usually body has by default 8px margin http://www.w3.org/TR/CSS21/sample.html)
You can resize your window, open the debug console and inspect the elements that might create the issue. Take a look at the Style panel and test-edit the styles until you get it fixed. in Chrome's Console you also have the Emulate option to test your page for different devices.
* {
border-style: 2px 3px solid dashed #3A5FCD;
}
border-style:dotted is not working in firefox
I have read in Here other than property hidden in IE all the properties support is all browser.
But with my code border-style:dotted is not working but if I will give border-style:solid it is working. (if i will just change border-style:solid it will work fine ?? but why?)
Can any explain me why it is happening ?
See Here
Please try to run fiddle in chrome and firefox.
Thanks !!
CSS triangles relies on the border property to render it as a triangle, making it dotted or solid does not matter in the rendering and does therefor not show the border as "dotted" - if you try it on the fiddle you can see changing the color on the border actually changes the entire triangle.
Triangles: http://css-tricks.com/snippets/css/css-triangle/
Maybe try this syntax:
element {
border: [thickness]px [type] [color];
}
Example:
body {
border: 10px solid black;
}
--
body {
border: 20px dotted black;
}
--
body {
border: 30px dashed black;
}
--
body {
border: 40px groove black;
}
UPDATE:
Upon your query, this IS NOT WORKING AND WILL NOT WORK because,
=> You are already applying border as background. If you look closely, border style dotted is stretched to form background as you are using border width property. Don't judge it as background color. You cannot apply border on a border.
=> To make it work, either introduce another pseudo or actual element and make it do that what you wanted to do.