I am using the Wordpress plugins 'NextGEN Gallery' and 'JJ NextGen JQuery Carousel' because I'm trying to make a carousel that looks alot like the default looks of the last named plugin. The problem is that the plugin uses a div with a background image as a button and it gets this CSS:
div#about-jcarousel_container .jcarousel-skin-custom .jcarousel-prev-horizontal {
top: 188px !important;
}
Because of that, this doesn't work (the top: 0px part):
.jcarousel-skin-custom .jcarousel-prev-horizontal {
position: absolute;
top: 0px;
left: 0px;
width: 32px;
height: 32px;
cursor: pointer;
background: rgba(24, 16, 16, 0.43) url(prev-horizontal.png) no-repeat 0 0;
background-position-y: 50%;
height: 100%;
}
Where it gets nasty is that the 188px is never called anywhere, so I cannot just edit it to make it 0px but client side in the browser. So I've looked around and it seems that the plugin puts the 188px code in inline < style > tags. Because it has !important I can't just use !imporant in my template.css to overwrite it.
Is the another way to overrule the !important tags that are used inline? I realy would like the keep the plugin updateable.
The only way to override !important is to use !important again further in the cascade, so put it in a CSS file after the jcarousel one.
Alternatively, edit jcarousel
It seems that you are referring the jcarousel css file after your .css file in your html file. Keep the reference of the jcarousel .css file before your stylesheet(.css file). Then you can use !important again to override the default jcarousel .css file style property.
You can change the specificity of your code. If possible look for an ID as maybe the parent. And add !important to your top element.
#ID .jcarousel-skin-custom .jcarousel-prev-horizontal {
position: absolute;
top: 0px!important;
left: 0px;
width: 32px;
height: 32px;
cursor: pointer;
background: rgba(24, 16, 16, 0.43) url(prev-horizontal.png) no-repeat 0 0;
background-position-y: 50%;
height: 100%;
}
That's why the use of !important is discouraged. You can only override the !important with another !important and it's not always possible. When there are two rules with !important then the "most important" one is applied.
And the question now is, which one is more important?
inline styles are more important (e.g. <div class="someclass" style="inline style"></div>) than normal styles
more specific rules > less specific (#one .example tag .yeah > .yeah)
if two rules have the same priority, the last one applied wins
If you can't add a more important rule, then you can't override the !important. But you can use a script to add inline styles when the page is loaded. Example (with jQuery):
<script>
$(document).ready(function() {
$("#test").css("color","blue");
});
</script>
Example without jQuery:
<script>
window.onload = function () {
document.getElementById("test").style.color = "yellow";
}
</script>
Related
I am working on a quasar/vue app. I want to style the dialog popup within one component. I'm using scoped CSS, and if the CSS is not scoped, the style works. If the CSS is scoped, the CSS does not work. I only want to style this dialog in this one component.
The template code calling the dialog:
<div class="-nav">
<q-select
outlined
dense
v-model="select"
:options="options()"
behavior="dialog"
style="width: 100px"
/>
The CSS element is:
<style scoped>
.q-dialog__inner {
width: 400px;
background-color: red;
}
</style>
This does not work:
:deep(.q-dialog__inner) {
width: 400px !important;
background-color: red;
}
I noticed that the global quasar style is marked with !important
codepen: https://codepen.io/kiggs1881/pen/oNoOzEj
.q-dialog__inner > div {
width: 400px !important;
background-color: red !important;
}
hope it helps
Have you tried to put the parents class in front of the selector like this?:
(If have seen this here) and it worked for me inside an expansion item.
.q-dialog :deep(.q-dialog__inner) {
width: 400px !important;
background-color: red;
}
I think everything is provided in the quasar.dev documentation if that doesnt help try using on hover => funtion-To-Display-Popover-In-Specific-Component
there are many ways to counter this problem using scoped is not the only one
I have just started to explore GWT, and i'm bit confused with different ways of applying styles to GWT widgets.In gwt docs, there are 4 ways by which you can override default style of a widget,
1) Using a tag in the host HTML page.(Deprecated)
2) Using the element in the module XML file.(Deprecated)
3) Using a CssResource contained within a ClientBundle.
4) Using an inline element in a UiBinder template.
Suppose i have a CSS file in some package say, com.abc.xyz.styles.css .And the file has the following contents,
/**the panel itself**/
.gwt-TabLayoutPanel {
border: none;
margin: 0px;
padding: 0px;
}
/**the tab bar element**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs {
background-color: #F4F4F4 !important;
}
/**an individual tab**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab {
background-color: #6F6F6E !important;
}
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab-selected {
background-color: white !important;
}
/**an element nested in each tab (useful for styling)**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabInner {
font-family: Arial !important;
}
/**applied to all child content widgets**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent {
border: none;
margin: 0px;
overflow: hidden;
padding: 15px;
}
How will i inject this css file ? How can this be done using the 3rd and 4th option of styling mentioned above?.
You can simply add your CSS file to the host page. Then you can use the full power of CSS selectors. This is my preferred method of using CSS in GWT:
What the best strategy to structure CSS in GWT?
How can I restyle the header of ng-grid?
In particular how can I change the background-color and the text color of the header row?
You can override the background-color property on the .ngHeaderCell class declared in the ng-grid.css to use the background color you want on the header cells.
If you don't want to modify the original ng-grid css, you can create your own css and load it after ng-grid's css in which you can later overide the same .ngHeaderCell class with:
.ngHeaderCell {
background-color: [your background color] !important;
bottom: 0;
color: [your foreground color] !important;
position: absolute;
top: 0;
}
I haven't looked into ng-grid before, but looks like a css file is provided for styling? I would advise either changing the actual css file, or over-writing these changes by declaring your own below where the grid.css is declared. Check link if that is what you are talking about.
https://github.com/angular-ui/ng-grid/blob/master/ng-grid.css
For instance, one of the css attributes in the above file is below, just do a ctrl-f and find the attributes you are looking to change.
.ngHeaderCell {
position: absolute;
top: 0;
bottom: 0;
background-color: inherit;
}
I look on Stack Overflow, and didn't find the solution, I know how to override style if style exists, just change its property. But now I have a strange style to override
Here is an example of what I have
First I have this one:
.slikezamenjanje img{
max-width: 100%;
max-height:150px;
padding-right:7px;
}
Now I need to override that style with just this one:
#zoomTarget .slikezamenjanje img {
max-width: 100%;
}
The problem is that first style appends second, but I don't want that, in this second style what I need is just one line, not to append from the first style?
Instead of override you can add another class to the element and then you have an extra abilities.
for example:
HTML
<div class="style1 style2"></div>
CSS
//only style for the first stylesheet
.style1 {
width: 100%;
}
//only style for second stylesheet
.style2 {
width: 50%;
}
//override all
.style1.style2 {
width: 70%;
}
You just have to reset the values you don't want to their defaults. No need to get into a mess by using !important.
#zoomTarget .slikezamenjanje img {
max-height: auto;
padding-right: 0px;
}
Hatting
I think the key datum you are missing is that CSS comes with default values. If you want to override a value, set it back to its default, which you can look up.
For example, all CSS height and width attributes default to auto.
I want an image to slightly grow in size when hovering over it. I know it's pretty simple, but I have looked for a good hour over other examples and cannot seem to figure out what I am missing. I appreciate the help. These images are saved to my computer.
Scope
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<embed src="73797^alarmclock.mp3"; autostart="true"; loop="true"; hidden="true";/>
<body>
<img src ="alarm clock2.jpg"/>
<p> Pulling the sheets into my body, I begin to sink back into the bed...
uggh... my alarm clock... time to get up..
<img style = "position:absolute; top:300px; right: 0px; z-index:1"
src="computer.jpg"/>
<IMG ID="grow" STYLE= "position:absolute; TOP:1157px; LEFT:599px;
WIDTH:47px; z-index:2; HEIGHT:47px" SRC="icon2.gif"/>
</body>
</html>
And here is the stylesheet.css
#grow:hover {
width: 100px;
height: 150px;
}
Inline styles have priority over CSS i believe.
Change your CSS and HTML to the following:
#grow {
position:absolute;
top:1157px;
left:599px;
width:47px;
z-index:2;
height:47px
}
#grow:hover {
width: 100px;
height: 150px;
}
HTML:
<IMG ID="grow" SRC="icon2.gif"/>
The inline style which declared in the HTML element has a higher priority than other css rules. So consider make your rules !important or move the inline style out.
Anyway, the !important rules are not recommended to use regularly. So you have better remove your inline styles and put them in .css files (or at least <style> element inside <head>)
Try this style
#grow:hover {
width: 100px !important;
height: 150px !important;
}
Because you have written inline styles. In order to override it you need to add !important to the styles. Also try to write the html in lowercase and avoid unwanted spaces.
The best thing you can do is avoid inline style and write style as below:
#grow
{
position:absolute;
top:1157px;
left:599px;
width:47px;
z-index:2;
height:47px
}
#grow:hover
{
width: 100px;
height: 150px;
}