I want to use two css styles bootstrap and topcoat. I use the angular slide menu feature (ng-mobile-menu). When I add the bootstrap cdn. it overrides the topcoat menu as the result the background color of the slide menu become shorter just cover the menu list: http://www.elmandato.pl but it should be http://www.shoppinpal.github.io/ng-mobile-menu/demo/#/skinny. That should I add to (change order of link rel doesn't matter):
<link rel="stylesheet" href="topcoat/css/topcoat-mobile-dark.min.css"/>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0./css/bootstrap.min.css"/>
<link rel="stylesheet" href="ng-mobile-menu.min.css"/>
<style>
html, body {
margin:0;
padding:0;
height: 100%;
}
#menubutton {
padding: 0 1.25rem;
font-size: 16px;
/* vertically center button text */
line-height: 3rem;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #454545;
text-shadow: 0 1px #fff;
background-color: white;
-webkit-box-shadow: inset 0 1px #fff;
box-shadow: inset 0 1px #fff;
border: 1px solid #a5a8a8;
}
</style>
Bootstrap is overriding topcoat because you've placed the link to it below topcoat. CSS cascades from the top down, meaning bootstrap overrides, topcoat, and ng-mobile-menu.min.css overrides bootstrap and topcoat. Try putting bootstrap above topcoat, then use developer tool to see what the selectors are for the classes / ID's and overwrite if needed
Related
I have a site in Wordpress where I am inserting a block with html.
This is the inserted html code:
<div class=“options-bar”>
<a href="https://total-speed-customs.myshopify.com/?" class=“options-bar-btn”>FUEL INJECTORS</a>
<a href="https://total-speed-customs.myshopify.com/collections/ignition" class=“options-bar-btn”>IGNITIONS</a>
<a href="https://total-speed-customs.myshopify.com/?" class=“options-bar-btn”>BOLTS</a>
<a href="https://total-speed-customs.myshopify.com/collections/e85-fuel" class=“options-bar-btn”>ELECTRONICS</a>
<a href="https://total-speed-customs.myshopify.com/collections/trailer-parts" class=“options-bar-btn”>WINCHES</a>
HITCHES
</div>
This is in the theme.css stylesheet at the very bottom:
.options-bar {
text-align: center;
}
.options-bar-btn, a { display: inline-block;
color: white !important;
text-decoration: none;
background: black !important;
padding: 10px 20px;
margin: 0px 5px;
border-radius: 6px;
text-align: center;
font-size: 22px;
}
#media screen and (max-width: 500px) {
.options-bar-btn, a { display: inline-block;
color: white !important;
text-decoration: none;
background: black !important;
padding: 3px 3px;
margin: 0px 1px;
border-radius: 3px;
text-align: center;
font-size: 10px;
}
}
It works for the inserted block html, but it also changes the styling of links sitewide. I've enclosed a link to the site in progress to show the row of buttons working correctly, but the top nav has the same styling, which needs to just be transparent for the logo and the main nav.
What I'm missing?
https://total-speed-customs.myshopify.com/
Your expression .options-bar-btn, a {...} means the following: set the following styles to all elements that have class options-bar-btn and to all tags a as well.
The comma in your code is a separator between two rules.
When you need to set a rule for an element that is a child of an element with class options-bar:
.options-bar a {
color: white !important;
}
This will select all a tags inside the elements with class options-bar.
If you want to change a style of all the links with class options-bar-btn:
a[class*="options-bar-btn"] {
color: white !important;
}
This will select all tags a then filter elements that has options-bar-btn class set.
I want to add my own css to override the vuetify v-select element
I've tried to add a class to the element, but it just adds the css underneath the vuetify element
<div>
<VSelect
v-model="value"
:items="sortOptions"
item-text="text"
:return-object="true"
class="rectangle"
/>
</div>
</template>
<style lang="styl">
.rectangle {
height: 40px;
width: 144px;
border: 1px solid #CCD8DB;
border-radius: 4px;
background-color: var(--v-dgrey-lighten3);
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.08);
}
</style>```
Try to add "!important" on your own css to override. Example:
height: 40px !important;
In this ASP.NET MVC 3 project, I've just started experimenting with Twitter Bootstrap, but I notice it messes with the rendering of <fieldset> legends. What is happening to the legend rendering here, and how do I get it back to normal? That is, I want the right line to be vertically aligned with the left line again.
The standard legend rendering, pre-Bootstrap, to the left, Bootstrap-affected rendering to the right:
Update:
I've found out what's causing the broken rendering, at least: Bootstrap changes the legend's width property to 100% and the border-bottom property to '1px solid'. This causes the original border to the right of the legend to be erased and a border beneath it to appear instead. The question is how this is meant to work. Maybe MVC's CSS (Site.css) is interfering with that of Bootstrap?
If you switch your stylesheet declarations so that the bootstrap is last it should correct the issue, ie:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
Bootstrap styles
fieldset {
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 27px;
font-size: 19.5px;
line-height: 36px;
color: #333;
border: 0;
border-bottom: 1px solid #E5E5E5;
}
default MVC Style.css styles
fieldset {
border: 1px solid #DDD;
padding: 0 1.4em 1.4em 1.4em;
margin: 0 0 1.5em 0;
}
legend {
font-size: 1.2em;
font-weight: bold;
}
end result should look like:
vs the other way around (MVC default styles declared last)
Alternatively, get rid of the MVC stylesheet altogether and use bootstrap along with whatever custom styles you need.
I am trying to create highlighted text effect with line break(s).
Example:
I cannot figure out how to add padding to the text. Here is the CSS for the span element that contains the text:
background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 24px;
padding-left: 5px;
When adding padding it only adds padding to beginning of the text and the end, as seen here:
CSS:
background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 3em;
padding: 10px;
Does anybody have any idea on how to make this happen?
I had this same question and I did some hunting and found a pure CSS solution this that only requires a little bit of CSS: CSS create padding before line-break
The basic solution is using padding on top and bottom and a solid box shadow to pad the left and right sides of the text, like this:
.highlight {
color:#fff;
background:#000;
box-shadow:5px 0 0 #000, -5px 0 0 #000;
padding: 5px 0;
}
Here's a method of achieving a multi-line, padded, highlight behavior for text using just CSS.
This is based on the box-shadow method found elsewhere, however as of Firefox 32 the traditional box-shadow solution no longer renders correctly.
Reviewing the changelog for FF32 I found there's a new property: box-decoration-break that causes the breakage.
This property defaults to 'split' but needs to be specified as 'clone' to achieve the desired multiline padding effect.
For more info see:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
.box {
width: 50rem;
margin: 1rem auto;
font-family: arial, verdana, sans-serif;
}
h1 {
color: white;
font-size: 2.5rem;
line-height: 4rem; /* reduce size to remove gap between text */
margin: 0px;
}
h1 span {
background-color: #A8332E;
padding: 0.5rem 0;
-webkit-box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
-webkit-box-decoration-break:clone;
-moz-box-decoration-break:clone;
box-decoration-break: clone;
}
<div class="box">
<h1>
<span>Multi-line, padded, highlighted text that display properly in Firefox using box-decoration-break: clone</span>
</h1>
</div>
Building on Brandon's solution, I figured out you can actually avoid the padding altogether and do it purely using box-shadow's spread option, and the padding on wrapped inline elements behaves as you expect.
.highlight {
background: black;
color: white;
box-shadow: 0 0 0 5px black;
}
you can use box-decoration-break
-moz-box-decoration-break:clone;
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
working sample codepen
Just add:
If space in the text area is all you are looking for.
If this is a "title" or something similar and it wraps because the container is fluid, why not set the background color on the container, then when/if your text/title wraps, all of the space between the lines of text, as well as the text line length, will appear to be the same.
<html>
<head><title>...blah...blah</title>
<style type="text/css" title="text/css">
#masthead{
background-color:black;
color: white;
}
#masthead h1{
text-transform:uppercase;
}
#container{
background-color:red;
}
</style>
</head>
<body>
<div id="container">
<div id="masthead">
<h1>some sort of title goes here</h1>
</div>
</div>
</body>
</html>
Additionally, you can probably just enhance the text in the h1 tag with margin/padding styles to get the appearance you are after.
Add padding for the surrounding block-level element (e.g. div or td) and remove the padding from your span.
I have two css files included on my page.
<link rel="stylesheet" href="/css/screen.css" />
<!--[if IE 8]>
<link rel="stylesheet" href="/css/ie8.css"/>
<![endif]-->
Now in screen.css I have a style like this
ul.treelayout{
list-style: none;
margin: 0px 0px 10px 0px;
background-color: #fff;
padding: 3px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #007b40;
}
I would like to remove the radius related styles in the ie.css such that the result style of ul.treelayout in IE is
ul.treelayout{
list-style: none;
margin: 0px 0px 10px 0px;
background-color: #fff;
padding: 3px;
border: 1px solid #007b40;
}
It seems that due to the fact that the styles cascade simply writing the class without the styles in ie.css doesn't do the trick. Any ideas?
Thanks
Regards
Gabriel
Ok mine is not to reason why ;) - but you can do this the other way around and only give the border-radius styles to NON-IE browsers.. in fact with a combination of Conditional comments you can give the border radius styles to IE9 and other browsers, I don't know which script you mean is clashing but maybe you can also just give the script to the browsers that need it?
here's an example (not using border-radius but hopefully you may get the idea..)
<style type="text/css" media="screen">
div {
padding: 40px;
color: #fff;
}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
div {background: #00f}
</style>
<![endif]-->
<!--[if (!IE)|(gt IE 7)]><!-->
<style type="text/css" media="screen">
div {background: #f00}
</style>
<!--<![endif]-->
HTML:
<div>
<p>background is red in non-IE browsers,and IE gt 7 - but background is blue in other IE's</p>
</div>
About the above conditional comments..
the first is a regular style
the second is a "traditional" hidden conditional comment which Only IE sees
the third is a revealed comment which all browsers see but IE still reads the arguments
you would put the common rules in a normal sheet, and the border radius rules inside a sheet in the third style comment
you can change the argument of the third comment it's basically saying if NOT IE OR is gt IE7
More Information on arguments: About Conditional Comments
ul.treelayout{
list-style: none;
margin: 0px 0px 10px 0px;
background-color: #fff;
padding: 3px;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border: 1px solid #007b40;
}
ta da.
Due to the way the stylesheet will cascade, you only need to have this in your ie8.css:
ul.treelayout {border-radius: 0;}
This will keep all of the styles the same, except it will remove the IE border radius. If you want further IE changes you can add them in as you like.
When overwriting a stylesheet that is always included, you only need to add styles you want to overwrite or have show up in the browser you're customising for. This makes the css file smaller, which is better for your users.