I use Script Editor to add stylesheet to minimize my calendar. However, I'm seeking for the solution to remove the calendar header
Example: the word "Calendar" in example image http://1.bp.blogspot.com/-dYs-jxn0GWc/UuF42f6uMbI/AAAAAAAACJw/QHtT1Q2vdNQ/s1600/longdayname.png
<style>
/**** Small Calendar ***/
.ms-acal-item{FONT-SIZE: 10px !important}
.ms-acal-item{height: 18px !important}
.ms-acal-summary-itemrow TD DIV {height: 15px !important}
.ms-acal-ctrlitem, /*Remove More Items*/
.ms-acal-month-top span{display: none} /*Remove Day Header*/
TR TD DIV.ms-acal-today { BORDER-TOP-COLOR: GREEN !important; COLOR: white
!important; BORDER-BOTTOM-COLOR: GREEN !important; TEXT-DECORATION: none; BORDER-RIGHT-COLOR: GREEN !important; BACKGROUND-COLOR: GREEN; BORDER-LEFT-COLOR: GREEN !important
} /*Focus Today*/
div#AsynchronousViewDefault_CalendarView {width:500px}
Try this:
span[Title="Calendar"] { display:none }
Related
I've been trying to solve this problem all day without success.
I want to change de background color from my home page. For this i have use this CSS:
.page-id-6128 {
background-color: #F5F5DC;
background-size: cover;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
min-height: 100vh;
background-position: 50% 100%;
}
The problem is that i can't remove the white background from the menu as you can see in the next image:
https://i.stack.imgur.com/C9c2P.png
www.albertosotophotography.com/home
Thank you for your help!
Add this:
.navbar {
background-color: #F5F5DC;
}
EDIT
Better solution - remove background-color property from your .site class. Now you have:
.site {
background-color: #fff;
margin: 0 auto;
width: 100%;
}
I am new to bootstrap and made some stuff.
but there is a specific effect of highlight a text i can't reach. i made it wrong many times - like the BG was offset or the line had no spacing and many more problems.
Can you please explain me how to do this ?
Tenter image description herehank !
edit:
Thae image is photoshop, how the final result should look
Or you could work with a border and padding like in the following demo and this fiddle.
For the unhovered link I've added a transparent border to avoid jumping on hover. You could probably also do this with margin/padding.
.styled-link {
color: #5F6065;
font-size: 2em;
padding: 15px;
border-left: 2px solid transparent;
margin: 5px;
text-decoration: underline;
}
.styled-link:hover {
color: gray;
background-color: #D1E7FE;
font-size: 2em;
border-left: 2px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
Highlighted link
Does this answer your question?
With the use of pseudo elements we can make a ::before element appear on hover
https://jsfiddle.net/jfe1uf50/
.cool-link {
color:red;
position:relative;
padding:0 15px;
&:hover {
color:blue;
&::before {
position:absolute;
left:-5px;
content:"";
height:100%;
width:3px;
background-color:blue;
}
}
}
Hello World!
I am trying to mimic the WinJS grouped list view using flexbox. I am getting close (I think) except that the columns overlap when resizing.
http://jsfiddle.net/w8ts4Lnx/5/
I want the items to stay inside the group and let the group grow horizontally.
body {
height: 100%;
display: flex;
flex-flow: column wrap;
}
h1 {
padding: 1em;
}
#content {
padding: 10px;
background-color: #eee;
display: flex;
flex-flow: row nowrap;
flex-grow: 1;
}
#content > .group {
margin: 10px;
padding: 10px;
border: 1px solid #cfcfcf;
background-color: #ddd;
display: flex;
flex-flow: column wrap;
max-height: 600px;
}
#content > .group .item {
margin: 10px;
padding: 10px;
background-color: #aaa;
width: 200px;
}
Any ideas what I'm missing?
If you don't want your content to overflow the container you must specify flex-shrink: 0;
flex-shrink source
This 'number' component sets flex-shrink longhand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to 1. The flex shrink factor is multiplied by the flex basis when distributing negative space.
Im not sure what winJS behavior you're trying to mimic since i've never used winJS, however I think this is closer to the proper behavior you're looking to achieve: http://jsfiddle.net/w8ts4Lnx/11/
The columns overlap because the contents doesn't fit. The Items don't fit in the group, so they flow-over.
To solve this you have to specify an overflow-strategy for the group-div, with "overflow" like this (the last one):
#content > .group {
margin: 10px;
padding: 10px;
border: 1px solid #cfcfcf;
background-color: #ddd;
display: flex;
flex-flow: column wrap;
max-height: 600px;
overflow: hidden;
}
The default is visible which make them fall outside. Read more here: http://www.w3schools.com/cssref/pr_pos_overflow.asp
There are other options than hidden. You can set vertical/horizontal scroll, or both. Just choose whatever gets you closer to that desired "WinJS grouped list view". Try:
overflow-x: scroll;
overflow-y: auto;
or
overflow-y: auto;
overflow-x: scroll;
Happy coding!
I faced a similar issue and in my case the fix was removing the height setting on the container styling. This allowed the container size to grow with the changing browser heights.
"let the group grow horizontally"- You have to use the flex-direction as "row" on the .group, and you have to wrap the groups inside the #content, then it won't overlap anymore..
http://jsfiddle.net/gafcvq9b/2/
#content {
padding: 10px;
background-color: #eee;
display: flex;
flex-flow: row wrap;
flex-grow: 1;
}
#content > .group {
margin: 10px;
padding: 10px;
border: 1px solid #cfcfcf;
background-color: #ddd;
display: flex;
flex-flow: row wrap;
max-height: 600px;
}
I think it would be best not to set width since you want flexbox to dynamically determine it. so I removed it and then I added flex grow to increase the first group.
http://jsfiddle.net/mspriyakk/vv3tfrtv/3/
#content > .group:nth-of-type(1) {
flex-grow: 2;
}
#content > .group .item {
margin: 10px;
padding: 10px;
background-color: #aaa;
}
This is the correct answer that's fixes overlapping columns:
.flex-container {
display: flex;
flex-flow: column;
}
.flex-item {
flex: 1 0 auto;
}
It might be a little late, but I made a codepen, where I was working with this problem, maybe it will help to the people reading this question.
html
<body>
<div class="test-container">
<div class="item item1">
item1
</div>
<div class="item item2">
item2
</div>
<div class="item item3">
item3
</div>
</div>
</body>
css (scss)
.test-container {
display: flex;
justify-content: space-between;
height: 100%;
width: 50%;
background-color: red;
padding-left: 2rem;
.item {
opacity: 0.6;
height: 100px;
width: 100px;
flex-basis: 100px;
margin-left: -2rem;
}
.item1 {
background-color: cyan;
z-index: 10;
}
.item2 {
background-color: blue;
color: red;
z-index: 20;
}
.item3 {
background-color: black;
z-index: 30;
color: white;
}
}
https://codepen.io/Garma/pen/ZZmNWg?editors=1100
Cheers
I'm finding MathJax a superior alternative to MathML. However, I'm having some trouble getting MathJax to render while using a :hover event in my CSS:
span.rollover span {
display: none;
position: absolute;
background-color: white;
padding-left: 7px;
padding-right: 7px;
border: 1px solid red;
color: navy;
font: 1em "Computer Modern", "Computer Modern Roman", "Latin Modern", "Cambria Math", serif;
text-decoration: none;
border-radius: 10px 10px 10px 0;
opacity: 0.9;
text-align: center;
vertical-align: middle;
white-space: nowrap;
line-height: 150%;
}
span.rollover:hover span {
display: initial;
top: -30px;
z-index: 50;
}
At the moment it's displaying garbage; a current draft of the page can be found here. Here's an example of the problem:
<span class="rollover">Initial angle<span>0.0 ≤ $\theta_0$ ≤ 1.6 rad</span></span>
Is there a way to force MathJax to render the markup for such an event?
Your CSS is too aggressive: it applies to every span within your rollover spans. Since MathJax uses spans to lay out the mathematics, it applies to those, and so you are forcing the position, border, top, etc. for every element used by MathJax. That means you are moving the math content out of place, and giving it borders, and so on (this account for some of the extra elements that appear above the ones you expect.
If you change
span.rollover span {
...
}
span.rollover:hover span {
...
}
to
span.rollover > span {
...
}
span.rollover:hover > span {
...
}
so that these styles only apply to the top-level child spans (rather than every span), that should do it for you.
Could someone explain me what's going on with this small piece of HTML ?
http://jsbin.com/akome5
On most of current browsers (FF4, Chrome10, IE9, IE8, Opera 11), the layout of the element looks like this :
Meh?! I don't understand why ?!
Why aren't the height and width as big as the visible box (orange+red spaces) ?
Adding a "display:inline-block;" to the element doesn't seems to really fix it.
How can I fix it ?
Thx!!
Setting a width and height on an A tag
Try adding the following styles.
a.button {
display: block;
float: left;
overflow: auto;
}
a.button span {
display: block;
float: left;
}
I'd propose a different approach involving no spans
html:
<a class="button2" href="#">Text Text Text</a>
css:
/* Button 2 */
.button2 {
background-color:red;
border:solid 10px orange;
border-top:0;
border-bottom:0;
display:inline-block;
color:#fff;
font-family: Arial,Helvetica,sans-serif;
font-size:11px;
font-weight:bold;
line-height:30px;
text-decoration:none;
padding:0 3px;
}
old (top) new (bottom)
http://jsfiddle.net/pxfunc/vr7gJ/
For information I manage to do it without float:left, here is the whole CSS :
a.button{
display: inline-block; /* <- added */
text-decoration: none;
}
a.button span{
display: inline-block;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
font-weight: bold;
height: 30px;
line-height: 30px; /* <- added */
text-decoration: none;
}
a.button .left, a.button .right{
background-color: orange;
width: 10px;
}
a.button .text{
background-color: red;
color: white;
}
The line-height instruction was the key.