I'm using the Gantry Framework for WordPress and I'd like to completely remove the formatting. For example, this is some of the styling applied to one of the positions.
#rt-top-surround {
background-color: #363636;
background-image: -moz-linear-gradient(top,#3b3b3b,#2e2e2e);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#3B3B3B),to(#2E2E2E));
background-image: -webkit-linear-gradient(top,#3B3B3B,#2E2E2E);
background-image: -o-linear-gradient(top,#3b3b3b,#2e2e2e);
background-image: linear-gradient(to bottom,#3B3B3B,#2E2E2E);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3b3b3b', endColorstr='#ff2e2e2e', GradientType=0);
color: #ADADAD;
text-shadow: 0 2px 3px #000;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.4);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
border-bottom: 1px solid #000;
}
What I do to get rid of it (in the child style.css file) is the following:
#rt-top-surround {
background-color: #AAA89C;
background-image: none;
background-repeat: inherit;
filter: progid: none;
color: inherit;
border-bottom: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
text-shadow: none;
}
Is there a better way? Maybe a catch all way of removing the styling? I can't remove it from the main style.css file as any future updates would bring it back.
I'm fine with the way that I am handling it, I guess I'm just wondering if there is an easier way to overwrite styles like this?
EDIT
Seems to be some confusion, sorry for not being clear. I guess I'm looking for something like the CSS all shorthand property that resets all attributes. So instead of having to write out each attribute and set it to the default, I would only have to write
#rt-top-surround {
all: initial;
}
And that would save me a bunch of coding. I don't think this property is quite ready to go yet, though.
You should be able to create another style sheet and set it to take priority over all other style sheets. override.css Please see the link below; I would suggest option 2.
http://wordpress.org/support/topic/overriding-all-other-stylesheets
You can use "!important" property. For example ..
#rt-top-surround {
background-image: none !important;
}
This will override the main Stylesheet. You can place this into a separate override.css file.
Read about "!important" here: http://webdesign.about.com/od/css/f/blcssfaqimportn.htm
Related
I am working on this example and am seeking how to get rid of that blue outline for drop-down select button and the Search inbox inside the drop down menu. See this image:
I already tried:
.btn-default {
outline: none !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}
input, textarea, select, a { outline: none !important; }
input:focus, textarea:focus, select:focus{ outline: none; }
but they are not doing the trick.
Bootstrap form input elements do not use the outline property, but rather recreate it using box-shadow. You were on the right track with what you were doing, but the style that causes this is the following:
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
You will want to override those styles with your own, setting the box-shadow to none and adjusting the border-color to match your default.
As for the select box, you can use the following style, as was originally mentioned by #kamlesh-kushwaha, to override the bootstrap setting:
.bootstrap-select .btn:focus {
outline: none !important;
}
For <select> dropdown, change in bootstrap-select.min line 29:
.bootstrap-select .dropdown-toggle:focus {
outline: thin dotted #333 !important;
outline: 5px auto -webkit-focus-ring-color !important;
outline-offset: -2px;}
to:
.bootstrap-select .dropdown-toggle:focus {
outline: none!important;
}
I remove bootstrap 4 dropdown-toggle 'on click' blue borders by doing this:
.yourdivname:focus {
box-shadow: none;
}
Anything else seemed to be irrelevant. For instance, with normal buttons {outline: none} always seemed to work, but not for this element. All that was needed was the box-shadow:none property.
Add the css focus rule or modify the existing one.
.bootstrap-select .btn:focus{outline:none!important;}
Similarly, you can add for select
You can use input[type] {}
All bootstrap input type as below
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: rgba(126, 239, 104, 0.8);
/* give your style */
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(255, 0, 0, 0.6);
/* give your style */
outline: 0 none;
/* give your style */
}
select:focus {
outline-color: transparent;
}
Bootstrap or not, you can remove the the outline from a select tag with with:
select:focus {
box-shadow: none;
}
I'm trying to figure out where the border on the horizontal menu items comes (based on a unordered list): http://developers.ttsistemi.com/clive/
I've tried everything.
I've even tried to set the border (and just in case the background, padding and margin) to none/transparent/0, to main element and it children, but I still get this annoying border (you can barely see it, but is there, between all menu items).
The site is in WordPress and uses a Required+ child theme (based on Zurb's Foundation).
I've spend something like 4 hours trying to find where this border comes from (inspecting the CSS with Chrome's developer tools) but I'm stuck. I just don't see any border setting leftover: everything that might have been set by the parent theme should be everything overridden by now.
1) For .navbar > li delete these properties that are currently set:
.navbar > li {
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset; /* Delete */
border-width: 1px medium 1px 1px; /* Delete */
border-style: solid none solid solid; /* Delete */
border-color: #333333 -moz-use-text-color #333333 #333333; /* Delete */
2) Because your last <li> is selected using the :last-child pseudo-selector you must change it separately or else you'll have a border on the last menu-item. So remove:
.navbar > li:last-child {
border-right: 1px solid #333333; /* Delete */
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset,
1px 0 0 rgba(255, 255, 255, 0.2); /* Delete */
Here is the screenshot showing the missing borders/box-shadow
http://img38.imageshack.us/img38/5845/menu2b.jpg
I have take a look and just don't know what border do you want to remove, maybe the border in the menu, I found it here:
.home #container #content-wrapper #access {
font-family: 'Museo Slab';
width: 100%;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: rgba(236, 236, 236, 0.5);
margin: 0;
padding: 0;
text-align: center;
}
in app.css line 101, remove this border it won't display anymore.
In Dark's answer, I checked it too:
I think the width of nav id="access" is incorrect, it should change like this:
.eight, .row .eight {
width: 38.66667%;
}
I saw your background-image on footer make the text hard to look, I recommend you should remove it or add a space for them.
I'm trying to override the css from bootstrap.
I going to design the navbar without color.
.navbar-inner {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
background-color: #fafafa;
background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
background-repeat: repeat-x;
border: 1px solid #d4d4d4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
*zoom: 1;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
with
.navbar-inner {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
}
I delete background color replacing it in the bootstrap .css.
Is it possible to just override it with another value?
Short Answer: YES
Long Answer Follows
The way CSS works is called specificity. There's is an order in which styles are applied to an element. Think of it as 4 separate numbers with the default value of each being 0. So 0,0,0,0 is the default
The first number represents inline styles
e.g., <span style="color: red">I'm Red</span>
The second number represents IDs
e.g., #IdSelector
The third number represents classes
e.g., .ClassSelector
The fourth number represents element and pseudo selectors
e.g., div and :first-child
These rules are applied in the order of internal style sheet first, external stylesheet second. If there's a rule defined ANYWHERE that applies to your element and you don't override it with a selector that has a higher specificity, then it will stay the same.
The following will override
.navbar-inner {
background-image: none;
}
Going back to specificity.
If your element is <div id="mainNav" class="navbar-inner"></div>
#mainNav {
background-image: none;
}
.navbar-inner {
background-image: url(img.png);
}
Then the image will be set to none. The ID selector has a specificity of 0,1,0,0 and the class sector has a specificity of 0,0,1,0.
Even if you added 11 classes the ID would still win, the specificity in that case would be 0,0,11,0
There is one last number, a hidden number. so 0,0,0,0,0 The one in front represents !important, which can be added after any style declaration to make it apply no matter what. If you have two conflicting declarations which have !important listed, it falls back to the order of inline vs. embedded vs. external. Generally you should avoid !important at most costs, except where it absolutely makes sense.
!important example that makes sense.
.hide {
display: none !important;
}
Here is my file input rendered in Chrome:
In IE it looks a lot more basic, which is fine (although the vast inconsistencies with this particular control are frustrating!)
My default CSS for inputs is:
input{
font-family: arial, sans-serif;
font-size: 12px;
font-weight: bold;
color:White;
background-image:url(../images/buttonBG.png);
height:27px;
border:1px solid #000;
border-radius: 7px;
-moz-border-radius: 7px;
padding: 5px 20px 5px 20px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
text-shadow: 0px 1px 2px #000;
}
input:hover{
text-shadow: 0px 1px 2px #fff;
background-image:url(../images/buttonBGo.png);
}
As you can see there are two types of text on the control, is it possible to style both individually?
Also is there any way to specifically select file inputs? Like input.file (doesn't seem to work). If this is not possible, how do I remove all the CSS the input style has applied to it (so I am working with a blank slate again).
Though i have never implemented it anywhere but while studying about the same i came across this url
http://pixelmatrixdesign.com/uniform/
This might help you out.
you can't differentiate input types in IE. In recent browser you might be able to achieve it with css3 attributes selectors:
input[type=button] {
border: 15px solid Red;
}
what you can do is manually add a css class to your file input:
<input type="file" class="inputFile" />
.inputFile { color: Yellow; }
For full customazation (e.g. changing the look of the browse button) you'll need to use the label element technique.
It's fully semantic, accessible and requires no JavaScipt. Basically, you hide the input, ensure the id is set on both the label and file field, then style the label accordingly. Here's a great article that explains the technique along with a CodePen (https://codepen.io/bmarshall511/pen/bjyEgq) that shows how it's done: https://benmarshall.me/styling-file-inputs/
[type="file"] + label {
background: #f15d22;
border-radius: 5px;
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
I have the following CSS:
box-shadow: inset 0px 0px 2px #a00;
Now I am trying to extract that color to make the page colors 'skinnable'. Is there any way of doing this? Simply removing the color, and then using the same key again later overwrites the original rule.
There doesn't seem to be a box-shadow-color, at least Google turns nothing up.
Actually… there is! Sort of. box-shadow defaults to color, just like border does.
According to http://dev.w3.org/.../#the-box-shadow
The color is the color of the shadow. If the color is absent, the used
color is taken from the ‘color’ property.
In practice, you have to change the color property and leave box-shadow without a color:
box-shadow: 1px 2px 3px;
color: #a00;
Support
Safari 6+
Chrome 20+ (at least)
Firefox 13+ (at least)
IE9+ (IE8 doesn't support box-shadow at all)
Demo
div {
box-shadow: 0 0 50px;
transition: 0.3s color;
}
.green {
color: green;
}
.red {
color: red;
}
div:hover {
color: yellow;
}
/*demo style*/
body {
text-align: center;
}
div {
display: inline-block;
background: white;
height: 100px;
width: 100px;
margin: 30px;
border-radius: 50%;
}
<div class="green"></div>
<div class="red"></div>
The bug mentioned in the comment below has since been fixed :)
No:
http://www.w3.org/TR/css3-background/#the-box-shadow
You can verify this in Chrome and Firefox by checking the list of computed styles. Other properties that have shorthand methods (like border-radius) have their variations defined in the spec.
As with most missing "long-hand" CSS properties, CSS variables can solve this problem:
#el {
--box-shadow-color: palegoldenrod;
box-shadow: 1px 2px 3px var(--box-shadow-color);
}
#el:hover {
--box-shadow-color: goldenrod;
}
You can do this with CSS Variable
.box-shadow {
--box-shadow-color: #000; /* Declaring the variable */
width: 30px;
height: 30px;
box-shadow: 1px 1px 25px var(--box-shadow-color); /* Calling the variable */
}
.box-shadow:hover {
--box-shadow-color: #ff0000; /* Changing the value of the variable */
}
You could use a CSS pre-processor to do your skinning. With Sass you can do something similar to this:
_theme1.scss:
$theme-primary-color: #a00;
$theme-secondary-color: #d00;
// etc.
_theme2.scss:
$theme-primary-color: #666;
$theme-secondary-color: #ccc;
// etc.
styles.scss:
// import whichever theme you want to use
#import 'theme2';
-webkit-box-shadow: inset 0px 0px 2px $theme-primary-color;
-moz-box-shadow: inset 0px 0px 2px $theme-primary-color;
If it's not site wide theming but class based theming you need, then you can do this: http://codepen.io/jjenzz/pen/EaAzo
A quick and copy/paste you can use for Chrome and Firefox would be: (change the stuff after the # to change the color)
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-border-radius: 10px;
-moz-box-shadow: 0 0 15px 5px #666;
-webkit-box-shadow: 0 0 15px 05px #666;
Matt Roberts' answer is correct for webkit browsers (safari, chrome, etc), but I thought someone out there might want a quick answer rather than be told to learn to program to make some shadows.