I am currently designing a theme but my CSS styles are not being applied throughout the entire site.
It was suggested that my CSS lacks specificity, but the issue isn't that I can't override the default styles; the issue is that it's not using my custom style sheet. That can be proven because my styles work on certain pages.
I'm not sure what's causing the problem or how to fix it.
#Head {
background: #D6AD33;
padding: 0px;
}
/*Panels/Sidebars*/
.Box {
border-radius: 1px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
background: #FFA366;
color: #888;
padding: 6px 10px;
margin: 0 0 10px;
box-shadow: 0px 0px 2px #999;
-moz-box-shadow: 0px 0px 2px #999;
-webkit-box-shadow: 0px 0px 2px #999;
}
.Box h4 {
font-size: 110%;
color: #FF6600;
font-weight: bold;
margin: 0;
padding: 0 0 1px;
}
Related
Like the title says, how do I go about adding hover to my #extended styles?
I will add a link to my Codepen here: https://codepen.io/UserBrayann/pen/gOvmzwN
SCSS
%box-shared {
box-shadow: 4px 3px 19px 0px rgba(0,0,0,0.3);
border-radius: 5px;
padding: 10px;
}
Here is how to use the hover in the scss while also using #extend.
%box-shared {
box-shadow: 4px 3px 19px 0px rgba(0,0,0,0.3);
border-radius: 5px;
padding: 10px;
&:hover {
background-color: red;
}
}
I'm trying to achieve a 'press' button effect with a <button> and a <span> but for some reason the shadow is getting cut off on Safari ONLY.
I'm using two tags here because that's a limitation of the website i'm editing, I can't change the markup.
It's simple as this, HTML:
<button><span>A simple fucking button</span></button>
CSS:
button {
-webkit-appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
}
button span {
text-transform: uppercase;
font-weight: bold;
border: 3px solid black;
padding: 10px 35px;
border-radius: 2em;
display: block;
background-color: #fff;
box-shadow: 0px 4px 0px -2px #bfbfbf,
0px 5px 0px 0px black;
}
button:active,
button:hover {
color: inherit;
}
button:hover {
span {
transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
}
codepen.io example:
https://codepen.io/marlonmarcello/pen/dVBKpd
If you are open to dropping the span, then the button and styles can be adjusted to achieve the desired effect:
https://codepen.io/enquiren/pen/qMzLrd
button {
-webkit-appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
cursor: pointer;
&.pushable {
text-transform: uppercase;
font-weight: bold;
border: 3px solid black;
padding: 10px 35px;
border-radius: 2em;
display: block;
background-color: #fff;
box-shadow: 0px 4px 0px -2px #bfbfbf,
0px 5px 0px 0px black;
&:hover {
transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
}
}
<button class="pushable">A simple button</button>
I have 2 consecutive elements. Things look fine on Chrome but theres an issue with IE (what a surprise). There is a thing space between the elements that looks like a border but is in fact the background showing through.
This is happening in IE10 and IE9.
http://codepen.io/anon/pen/KwEVwM
Heading
Bottom
body {
background: blue;
}
.top {
background: white;
border-radius: 10px;
padding: 10px;
border-right: 6px solid #D7D7D7;
border-bottom: 6px solid #B9B9B9;
box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
box-sizing: border-box;
margin-bottom: 20px;
padding-top: 15px;
padding-bottom: 5px;
padding-right: 25px;
float: left;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: none;
position: relative;
z-index: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.bottom {
background: white;
border-radius: 10px;
padding: 10px;
border-right: 6px solid #D7D7D7;
border-bottom: 6px solid #B9B9B9;
box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
box-sizing: border-box;
margin-bottom: 20px;
border-top-left-radius: 0;
position: relative;
z-index: 0;
clear: both;
}
really interesting. in IE11 i get the same issue. Try margin-bottom: -1px on top -> works in IE11.
but i really don't know why this happens. maybe some rounding problems with the shadows, or the z-index: 0
Border-radius and box-shadow are not working in IE7. I'm using the PIE.htc file. The path is correct, I checked it. Don't know where it's going wrong. I used it before too and it was working then.
Don't know the reason this time.
.box-shadow-outer {
float: left; font-size: 40px;
border: 2px solid #c4c4c4;
padding: 80px 0;
text-align: center;
width: 500px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
-webkit-box-shadow: #666 0px 0px 10px;
-moz-box-shadow: #666 0px 0px 10px;
box-shadow: #666 0px 0px 10px;
background: #e4e4e4;
behavior: url(../../Content/Css/PIE.htc);
}
float: left; is creating problems.
You can solve it by 2 ways:
Remove float: left;
add this style:
position:relative;
z-index:1;
I have read posts about css inheritance and i am still left a bit lot.
Is this possible to do in css?
.cv3-envaleur h1 {
background: none;
font-size: 23px;
line-height: 38px;
color: #fff;
margin: 0px 0 5px 0;
padding: 10px 0px 5px 0px;
}
I have also tried this.
div.cv3-envaleur h1 {
background: none;
font-size: 23px;
line-height: 38px;
color: #fff;
margin: 0px 0 5px 0;
padding: 10px 0px 5px 0px;
}
I am trying to give some style to the H1 heading inside the div called .cv3-envaleur but i can't seem to make it work.
Please help
Both of these are valid ways to do what you are after. There has to be something overriding these. You can check in Firebug as to what the current definitions are and what is overriding. You can also add the !important flag to force the style.
<div class="cv3-envaleur"><h1>Header</h1></div>
div.cv3-envaleur h1
{
background: none !important;
font-size: 23px;
line-height: 38px;
color: #fff;
margin: 0px 0 5px 0;
padding: 10px 0px 5px 0px;
}
When you say the div is "called" cv3-envaleur, do you mean that its ID attribute is cv3-envaleur? If so, then you need to use the # selector, like so:
div#cv3-envaleur h1{
...
}
Dot selectors are used for classes, not IDs.