I have a poll setup using a script to pull it into my WP page. Via http://quipol.com/
EG <script src="poolfromquipol">
I've found the styles via firebug and have customized them accordingly within, but I'm wondering if there's a way I could implement them for the styles to actually take effect?
Here's what I'm trying to do:
#quipol-container #quipol {
-moz-border-radius: 4px 4px 4px 4px;
-moz-box-shadow: 0 0 0 1px #FFFFFF inset;
background: none repeat scroll 0 0 white;
border: 0 none;
height: 464px;
margin: 0;
padding: 14px 14px 0;
position: relative;
width: 360px;
}
#quipol-container #quipol #quipol-corner {
background: none repeat scroll 0 0 transparent;
height: 65px;
left: -6px;
position: absolute;
top: -6px;
width: 65px;
z-index: 1000;
}
#quipol-container #quipol #quipol-corner a {
background: none;
display: none;
height: 21px;
margin: 9px 0 0 10px;
opacity: 1;
text-indent: -9999px;
width: 21px;
}
#quipol-container {
-moz-border-radius: 8px 8px 8px 8px;
-moz-box-shadow: 0 0 0 1px #FFFFFF inset;
background: none;
border: none;
height: 590px;
margin: 0 auto;
padding: 4px;
position: relative;
width: 390px;
}
Anybody know how / where I can display: none some of the default styles?
They appear to be generating iframes to display the poll in. You will not be able to style the iframe (nor access it via JavaScript), as it's being accessed cross-domain.
This is often intentional, as they usually don't want you display:noneing their logos.
Related
Do someone know why, in Chrome, I can't see this before elements and in Firefox everything is fine ? I don't know what other information should I add here to make it more understandable.
div.control-2 {
position: absolute;
margin-top: 70px;
margin-left: 146px;
}
div.control-2:before
{
position: absolute;
content: '';
width: 10px;
height: 1px;
display: inline-block;
background: rgba(0,0,0,0.8);
left: 0;
margin-left: -40px;
margin-top: 10px;
box-shadow:0 1px 1px rgba(255,255,255,0.15),
0 60px 0 rgba(0,0,0,0.8),
0 61px 1px rgba(255,255,255,0.15),
0 120px 0 rgba(0,0,0,0.8),
0 121px 1px rgba(255,255,255,0.15),
0 180px 0 rgba(0,0,0,0.8),
0 181px 1px rgba(255,255,255,0.15);
}
<div class="control-2">Html Content</div>
Take a look at these photos
JSFiddle link at the bottom
firefox:
chrome:
they are both the same element taken from chrome and firefox and as you can see the one from firefox has some space around it's top and left side but the one from chrome doesn't
now, There is no margin or anything that's causing this and it works fine in any other browser except for firefox.
the important styles for the main element is
float: left;
height: 30px;
line-height: 30px;
margin: 12.5px 0;
and for the Pseudo-element ::before
float: left;
display: block;
content: '\F011';
height: 30px;
line-height: 30px;
margin: 0 10px 0 0;
padding: 0 10px;
and the HTML for the element
<button class="like" onclick="item_like()">500</button>
this is the link of JSFiddle
run it in chrome and firefox and see the difference
http://jsfiddle.net/79cEb/5/
what am I doing wrong here?
Maybe try positioning the like absolutely using CSS
.like{
float: left;
height: 30px;
margin: 12.5px 0;
background-color: #FAFAFA;
border-radius: 4px;
position:relative;
padding: 0 10px 0 40px;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border:none;}
.like::before{
position:absolute; top:0; left:0;
width:30px;
content: 'like';
margin: 0 10px 0 0;
padding: 0 5px;
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC; display:block; border:0;
}
I'd recommend you to specify top:0; left: 0; to your ::before pseudo elements. Sometimes cheeky browsers take a few px up and left to the actual position. CSS:
.like:before {
float: none;
width: 30px;
content: "like";
margin: 0px 10px 0px 0px;
padding: 0px 5px;
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC;
position: absolute;
top: 0;
left: 0;
border-radius: 4px 0 0 4px;
}
.like {
float: none;
height: 30px;
border-radius: 4px;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
padding: 0px 10px 0px 0px;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border: medium none;
position: relative;
width: 88px;
text-align: right;
}
Fiddle: http://jsfiddle.net/79cEb/13/
I made you this solution, it places the button relative and the :before class absolute. Then you can use the top, bottom and left position, which will be relative to parent.
Note that I added a overflow: hidden to the button, so the rounded borders are still visible.
This is the altered CSS:
.like {
float: left;
height: 30px;
margin: 12.5px 0;
background-color: #FAFAFA;
border-radius: 4px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
padding: 0 10px 0 40px;
overflow:hidden;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border:none;
position: relative;
}
.like::before {
float: left;
width:30px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
content:'\F011';
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC;
}
Also, see the updated Fiddle.
I have modified the bootstrap alerts so they show on the top of the content without moving down any other div, but the issue i have is that the application can show at the same time warnings, errors or success messages but they are overlapping each other.
Here is my alert's css:
.alert {
position: absolute;
z-index: 999999;
width: 800px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
Edit: Here is the Example in jsfiddle
Edit 2: Thanks to Praveen, here is the code that suits my app: Final code on jsfiddle
Since the position is absolute, you are facing this problem. Make them relative this way:
.alert {
position: relative;
Fiddle: http://jsfiddle.net/praveenscience/Q6nA9/2/
I am trying to make shutdown button using CSS3 similar to this picture
http://static.desktopnexus.com/thumbnails/25080-bigthumbnail.jpg
So far I got this. The issues are that I cannot make that "semi-circle" look like that circle in the center of image, cannot center that "semi-circle" and box-shadow ruins that "semi-circle".
Do you have any suggestions to improve what I am trying to do?
Thnx in advance!
Here's my attempt:
.shutdown {
border: 8px solid #0cf;
border-radius: 100px;
box-shadow: 0 0 10px #0cf, inset 0 0 10px #0cf;
height: 100px;
width: 100px;
}
.shutdown .inner {
border: 5px solid #0cf;
border-radius: 100px;
box-shadow: 0 0 10px #0cf, inset 0 0 10px #0cf;
height: 30px;
left: 30px;
position: relative;
top: 30px;
width: 30px;
}
.shutdown .bar {
border-left: 5px solid #0cf;
box-shadow: 0 0 10px #0cf;
height: 20px;
left: 47px;
position: relative;
top: -15px;
width: 0;
}
.shutdown .sub-bar {
border-left: 11px solid black;
height: 30px;
margin-left: 44px;
margin-top: -20px;
position: absolute;
width: 0;
}
Here's the HTML structure to go along with it:
<div class="shutdown">
<div class="inner"></div>
<div class="sub-bar"></div>
<div class="bar"></div>
</div>
And here's a demo.
I need to make a shape like the one below and was trying to get it working with CSS.
The closest I could get was like this. I had to push the shadow on the bottom part down or else it would overlap with the shadow on the top.
Is it possible to actually make the top version with CSS?
Working Example Here
CSS
.block-a {
display: block;
height: 200px;
width: 200px;
background-color: #8BC541;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
-webkit-border-radius: 10px;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius: 10px;
-moz-border-radius-bottomright: 0;
border-radius: 10px;
border-bottom-right-radius: 0;
}
.block-b {
color: #fff;
text-align: center;
line-height: 40px;
position: relative;
display: block;
height: 40px;
width: 80px;
margin-left: 120px;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px#000;
box-shadow: 0 0 10px #000;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background-color: #8BC541;
}
.block-b:before {
position: absolute;
background-color: #8BC541;
height: 11px;
width: 90px;
top: -11px;
left: -10px;
display: block;
content: "";
}
.block-b:after {
padding-left: 5px;
color: #fff;
content: "▲";
}
HTML
<div class="block-a"></div>
<div class="block-b">Login</div>
Image
It's an answer pile-on! Looks like you have lots of options to work with. I'll add another to the pile: http://jsfiddle.net/XrkJq/