In my Angular2 project, I extract some common css into a global-style.css file and link this in index.html.
I also link third-party css in index.html but third-party css conflict with my global-style.css.
Let's see a concrete example.
In my global-style.css I have a style
.display-none { display: none; }
In bootstrap css there is a style
input[type="file"] { display: block; }
When I want to hide file picker I write the code
<input class="display-none" type="file">
But file picker still display because input[type="file"] have higher specificity than .display-none. (according to https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
There is a Plunker live demo: https://plnkr.co/edit/7HOT1if3ZhtSGu0UXOZX?p=preview
My question is, how to make my global-style.css have higher priority than other third-party css?
I know the way declaring !important but is there any other more elegant way? Thanks for any answer!
Here are some things you might be looking for:
Put the bootstrap link before your 'global-style.css'. This will solve your problem as the order of the links is the order that the CSS will be brought in.
Just use !important. A 10 character solution isn't not elegant.
Related
Sorry for being a newbie but i really need your help.
Heres the problem: i have my main wordpress theme with woocommerce, everything works fine. The thing is: i have a secondary theme with another woocommerce style and i need to get this woocommerce css to my main theme.
How could i do this? Because even if i copy paste the .css file, i will still need the html class's from the other theme.
I dont know what to do anymore, i really apprecite any help.
Thanks and sorry, english is not my native language.
#edit
i forgot to say: i dont need all the woocommerce css, i just this the product view. Like this: https://image.ibb.co/kkPtEc/Sem_t_tulo.png
You can use:
https://es.wordpress.org/plugins/custom-css-js/
Use appropiate selectors to target the elements that you want and reach them with more precision to take priority over other css.
For example:
.elementor-745 .elementor-element.elementor-element-lueowvi .elementor-image-box-content .elementor-image-box-title {
color: #0351d8;
font-size: 27px;
font-weight: 500;
}
this is a css selector with it's properties and values (copied from a wordpress that i did some time ago)
if i want this text for being red instead of this kinda blue and change the font size, for example, i'll have to:
div.elementor-image-box-wrapper > div.elementor-image-box-content > h3.elementor-image-box-title {
color: red;
font-size: 30px;
}
Why i did this selector?
i know that this element is inside a div with elementor-image-box-content class, which is inside a div with elementor-image-box-wrapper.
Note that i also specified the html tag in css selector.
Why should it work?
the selector i set is more specific compared to the main theme one. So it will take priority when the css is rendered.
If you deal with id-based classes you'll need javascript (i recommend you to use jQuery as it's loaded by the theme or by some plugin almost always and will let you work faster an cleaner.
when i say id-based classes i mean those like:
<div class="product-id-25">
<!-- other code -->
</div>
<div class="product-id-26">
<!-- other code -->
</div>
You'll need to select product-id-* and make a for each loop to add the css through jQuery (for example)
I am developing a website on wordpress using the theme "Virtue". I have added custom css to change the appearance/behaviour of some elements.
Here is a link to the site: http://deepdive.ma/test5182/
When I open the site, the custom css is not accounted for.
To take a specific example: the menu should be in a light blue color (#e7ecf1), but it is white.
When I use DOM inspector:
The content of my custom css is included in head, including css for the class .headerclass;
But the styling element 'header class="banner headerclass" role="banner"' does not refer to it. It only refers to elements.style, then to external style sheets (default.css; virtue.css; ...).
It's probably something stupid but I really can't find the problem. Anyone can help with this?
You're not properly closing .home .page .wide. You need the closing } in Line 32.
.home .page .wide{
width: 80%;
max-width: 700px;
left:auto;
right:auto;
}
A suggestion: why not customize the theme's CSS instead of dropping the new CSS inline in the HTML document. It'll avoid major headaches.
I am using the plugin: "Wordpress Contact Form 7".
I want to override the CSS that the plugin uses with my own CSS.
I want to do this in such a way that even if I update this plugin, or change my theme, my changes will still remain.
What is the best way to do this?
So far I have been trying to edit style.css of my theme. But this has produced inadequate results. Since style.css may be loaded before the css of the plugin, the css may be overridden by the plugin. It works only if I specify properties for things that have not been defined in the plugin css.
If you only have a few modifications to apply, by far the simplest way to override a plugin's stylesheet is to add body in front of the element you are targeting within your style.css file. Adding body adds CSS specificity to the selector, allowing it to override the original styling. Like Reyzis say.
body .plugin-class {
font-size: 30px;
}
have you tried this for example?
body {
background-color: red !important;
}
edit: sorry - fixed
I just started to port twitter's bootstrap to GWT (see the github project here and a very ugly demo here), but, I was having a log of issues with bootstrap styles vs Gwt styles.
Bootstrap put a border-top in tr/td elements, and GWT components basically use tables everywhere. In the demo you can see that bug in the left VerticalPanel.
So, I was looking for a way to make GWT components ignore bootstrap styles, and I have no idea how to do this.
Is there a simple way to make it work right?
Thanks in advance.
It's possible, but somewhat complex to do something with a Linker in GWT. The high-level idea would be:
Put all your GWT components in a <div id="gwt">...</div>
Add a linker to the GWT Module file that will process CSS files.
In the linker, transform the GWT CSS (e.g., standard.css) to insert a #gwt before each selector rule.
The first part is easy, just add an id to your root element.
The second part is also easy, simply add code that looks like this to your Module.gwt.xml file:
<define-linker name="cssLinker" class="com.you.bootstrap.linker.CssRenamingLinker" />
<add-linker name="cssLinker"/>
The hard part is implementing the Linker. It's possible to do parse it by hand, but you might find it easier to use something like SAC.
Using the Linker, you can transform your CSS by inserting a #gwt before each selector. Using SAC, you might do that by overriding all the DocumentHandler methods to simply emit each of their arguments to an OutputStream. In DocumentHandler.startSelector() you would first emit "#gwt " before each selector.
[Edit]
This assumes that GWT's standard.css defines styles that override the bootstrap styles. If not, you might have to 'enhance' the GWT CSS with defaults. There's a list of W3C recommended defaults here.
The benefit is that this is future-resistant - if GWT styles change or if bootstrap styles change, this should be robust.
Hope that helps,
Adam
You can simply add a style to one of your root GWT objects and then simply override the bootstrap styles to remove those messy borders:
<div class="gwt">
... some other GWT-content
</div>
and in your CSS:
.gwt tr, .gwt td {
border-top: 0px;
}
Of course if you need to embed some bootstrap elements in your GWT elements then you will have to hack around and do:
<div class="gwt">
... some other GWT-content
<div class="bootstrap">...
... Bootstrap elements
</div>
</div>
and in your CSS:
.bootstrap tr, .bootstrap td {
border-top: 1px; // Whatever bootstrap style puts
}
I'm using jquerys autocomplete widget but I'm having a few issues trying to style the box that drop down when you search for something.
I'm trying to move the box down a bit and change the border/bg color but some JS is adding in some embedded styles which are overriding my .css styles. But I can't find it.
I'v based mine off this one.
<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem">
In order to avoid using !important you could add your styles with jQuery and override them in that way.
$('ul.ui-autocomplete').css({
color: 'red'
});
Another solution would be to remove the style attribute from the ul.
$('ul.ui-autocomplete').removeAttr('style');
Without seeing your css styles, or the order you are loading the .css files, you could override the styles by using Firebug to inspect which classes are applied, and adding !important; to your main css styles.
Ex.
ul.ui-autocomplete {
color: red !important;
}
The best way you can combat this is to properly track down if your jQuery plugin has any parameters to help you, or strip the JS yourself and add your own CSS styles.
The above !important; rule can be a nightmare, it is a hack in a sense - but it may work for you.
Try to add margin-top and margin-left in your css
Overriding the top and left value is no good, because it is calculated in regard to the text field it derives from.
I'm really not a pro in jquery but I take a look around in the example you sent and the style of the menu is all givent by a menu style sheet (jquery.ui.menu.css). Look at the link below and there is some info that can help you I think.
http://docs.jquery.com/UI/Menu#theming
You will be able to customize the look and feel of your dropdown in these class.
«If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.menu.css stylesheet that can be modified.» From jquery website.
try using position or append to option...
you can refer here...
http://jqueryui.com/demos/autocomplete/#option-position
Check out the file jquery.ui.theme.css,
the class .ui-widget-content near the top can be used to put a background colour on the autocomplete search results box, borders and positioning can also be tweaked through this class.