How to override !important CSS rules generated by a script [duplicate] - css

This question already has answers here:
How to override !important?
(12 answers)
Closed 7 years ago.
i have a plugin in js from external services. This script has built its own css, but its rules doesn't fit in my layout. So i need to change 540 with 700px:
#chat-container.bbhorizontal .main .booking {
margin-top: 0;
min-width: 540px !important;
}
Path from Bugzilla:
<div class="main">
<form name="chat">
<div class="booking">
I have tried:
#div main.chat.booking {
display: block;
visibility: visible;
min-width: 800px !important important;
margin-top: 0;
}
No success...
How i can achieve this? Thank you.
I prefer programming in C that css. UPDATE see the picture please:

Add more specificity to the selector:
#chat-container.bbhorizontal .main form[name="chat"] .booking {
min-width: 700px !important;
}
That should do the trick...

You just need a more specific selector than the one that you wish to override and to also use !important.
For example:
html #chat-container.bbhorizontal .main .booking {
min-width: 800px !important;
}
The html in the selector is the important bit. That makes this selector more specific than the one your script is generating.
NB: You don't have to use html, I just knew that it would work because everything is always beneath an html element.

.main form .booking[style]{
display: block;
visibility: visible;
min-width: 700px !important;
margin-top: 0;
}
jquery
$("#chat-container.bbhorizontal .main .booking").css("min-width","700px !important");

Related

Hover caption on image causes big white gap below image

I am building a website with WordPress. On my homepage I want a picture grid (10 x 3) of different products, and when you hover over each picture, a caption with the product name will pop up.
I have managed to do 3/4 of it but there's this massive white space below each row. :(
I am using the SiteOrigin editor widget to insert the image, and using HTML and CSS to code the hover effects. See below for the current coding.
HTML:
<div id="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Hassaku.png" />
<p class="text">Summer Mikan</p>
</div>
CSS:
.text {
color: #000000;
font-size: 16px;
font-weight: bold;
text-align: center;
background: rgba(255, 255, 255, 0.5);
}
#pic .text {
position:relative;
bottom:80px;
left:0px;
visibility:hidden;
}
#pic:hover .text {
visibility:visible;
}
Here's the website so you can see what I've done: http://peacefruit.net
The top row has the captions, but also, the pesky gap. The bottom three rows are examples of how I want it to look (no borders or gaps between pics). All rows and individual widgets have no padding, margins or gutters and I've already adjusted the theme padding to 0 with CSS.
I'm sure it's a simple line of code I'm missing, but it's driving me crazy!
Please send help.
Try adding to your inline css for siteorigin-panels-stretch
overflow:hidden;
height:164.89px;
Hope this works.
Thanks!
In your case
the id should be unique.
So, it is better to change #pic to a class
Also, the <p> tag in your style contain padding-bottom and it will case the white space problem.
Change each pic to the following
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp- content/uploads/2016/11/Hassaku.png">
<div class="text">Summer Mikan</div>
</div>
CSS:
.pic{
position: relative;
}
.pic .text{
position: absolute;
top: 80px;
width: 100%;
visibility: hidden;
}
then it should be work.
Stylesheets for WordPress themes can have a lot of CSS bloat, so you're on the right track creating a custom stylesheet, to tackle the styling nuances you desire.
Since this is a responsive theme, it's best to begin solving this from a mobile-first perspective.
The first thing to prune is the bottom-margin: 30px; for .panel-grid-cell, like this:
.home #main .panel-grid-cell {
margin-bottom: 0;
}
The next thing is to correct your HTML mark-up. The value of pic is given to multiple id attributes. An id attribute is used to denote a unique element. The class attribute denotes a non-unique element. pic should be assigned to class attributes instead, since many elements in your layout utilize this hook value. Like this:
<div class="pic">
I'm noticing that img.hover and p.text are getting wrapped in an unnecessary <p> tag. Make sure that this does not happen in the SiteOrigin editor.
You should then prune the bottom-margin: 1.5em for paragraphs inside of the .pic divs (note the designation of pic as a class hook .pic, rather than an id hook, which would have been #pic):
.pic p {
margin-bottom: 0;
}
To get even closer, relative positioning should be used on the .pic div to ensure that the subsequent styling suggestion (position: absolute;) will take effect:
.pic {
position: relative;
}
And then, for the text that appears when hovering an image:
p.text {
position: absolute;
width: 100%;
}
The styles above will work for mobile, but your theme is responsive, and you might need to account for some styling variations with different screen sizes.
For tablets, you'd need a media query like this:
#media (min-width: 600px) {
.some-class {
some-property: some-value;
}
etc...
}
And finally, for desktop:
#media (min-width: 1000px) {
.some-class {
some-property: some-value;
}
etc....
}
Thanks everyone for your help :) After some fiddling around with the suggestions and a software update, there is no gap now!
I thought I'd post my final code in case anyone has a similar problem and it might be of some help. (Note: there are some minor style changes which differ from the original post but have no effect on how it works).
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Summer-Mikan.png"/>
<div class="text">Summer Mikan</div>
</div>
WIDGET CLASS:
fade
CSS:
.fade {
-webkit-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
.fade:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.pic {
position: relative;
}
.text {
color: #FFFFFF;
font-size: 22px;
font-weight: bold;
text-align: center;
background: rgba(214, 187, 14, 0.85);
}
.pic .text {
position:absolute;
top: 0px;
width: 100%;
visibility:hidden;
}
.pic:hover .text {
visibility:visible;
}
.pic p {
margin-bottom: 0px;
}
So glad it finally works, much appreciation to everyone!

Primefaces css overrides custom css [duplicate]

This question already has answers here:
How do I override default PrimeFaces CSS with custom styles?
(5 answers)
Closed 7 years ago.
.ui-orderlist .ui-orderlist-list {
height: auto;
}
Should't it set height of list to auto? Because it does't work.
In browser styles appears like
.ui-orderlist .ui-orderlist-list {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: auto;
height: 200px;
width: 200px;
}
.ui-orderlist .ui-orderlist-list {
height: auto; // this line no active
}
You can override css rules by making them more specific than default primefaces rules and thus giving more "weight" for your custom rule. For example, wrap your order list with a < div class="some_class">< p:orderList ... />< /div> and provide css rule like:
div.some_class .ui-orderlist .ui-orderlist-list {
height: auto;
}
You can read more about css specificity here and here.
Alternatively you could add an !important exception to your custom rule like:
.ui-orderlist .ui-orderlist-list {
height: auto !important;
}
Such approach though is not recommended and should be used (as mentioned #Kukeltje in comment) as the last choice.
I had the same issue some days ago. You have to make sure that your stylesheet gets loaded after default PrimeFaces CSS. You can achieve this by including your stylesheet in the following way:
<h:head>
<f:facet name="last">
<link type="text/css" rel="stylesheet" href="/css/yourstyle.css"></link>
</f:facet>
</h:head>
PS: Please do not use !important.

Polymer element-defined styles not working

First of all, sorry for yet another post about this topic but I couldn't see anything that makes sense to me in polymer documentation and on stackoverflow.
I just want to attach style to my element.
From the documentation (https://www.polymer-project.org/0.5/articles/styling-elements.html and https://www.polymer-project.org/0.5/docs/polymer/styling.html#including-stylesheets-in-an-element)it should be straight forward.
<polymer-element name="x-foo">
<template>
<style>
x-foo div { ... }
</style>
...
But it doesn't work as expected. If we define the style for an element, inside the element, it is not applied.
Here is the code:
<polymer-element name="x-button" noscript>
<template>
<style>
/* not working */
x-button {
background-color: green;
}
/* not working */
x-button .hithere{
display: block;
min-height: 50px;
background-color: red;
margin: 20px;
}
/* not working */
x-button .hitheretoo{
display: block;
min-height: 50px;
background-color: blue;
margin: 20px;
}
</style>
<div class="hithere"></div>
<template>
<div class="hitheretoo"></div>
</template>
</template>
</polymer-element>
And a live demo:
http://codepen.io/anon/pen/yyZqMN
Thanks
ssorallen explained the css issue very well and there is more. I couldn't get :host to work on it's own and depending on the browsers you will need to shim the Shadow DOM & add polyfill-next-selector styles.
Additionally, The element never gets registered because you have not used the Polymer() function inside the custom element (unless you chose not to add it in your code example). Here is a codepen of what I found to be one possible solution.
The one thing I am still trying to figure out is the nested <template> issue. I can't pierce the shadow boundary with ::shadow or /deep/. Might be a bug. I'll take a look when I get a few minutes.
Use the :host selector when styling an element from inside itself
<style>
:host {
background-color: green;
}
.hithere {
display: block;
min-height: 50px;
background-color: red;
margin: 20px;
}
.hitheretoo {
display: block;
min-height: 50px;
background-color: blue;
margin: 20px;
}
</style>
When you're styling from inside a custom element all selectors are already scoped to the element. By selecting x-button you are selecting any x-buttons that are descendants of this element, not the element itself. That also means you don't need to prefix selectors with the tag name to scope them; the shadow DOM provides scoping.

How can I use the less pre-processor to handle different styles with two divs one after the other?

I have the following HTML:
<div class="float-left inline orderby">
<div class="arrow up" style="margin-bottom: 2px; margin-left: 2px"></div>
<div class="arrow down" style="margin-left: 2px;"></div>
<input type="checkbox" data-ng-model="inverse" style="margin-left: 0px; margin-right: 10px;">
</div>
I'm trying to use the less pre-processor to create my CSS.
How can I use less to create CSS to remove the styles from this example. In particular I am not sure how to handle the difference between the 1st and 2nd DIV
You mean you want to remove the inline styles?
.orderby .arrow, .orderby input {
margin: 0;
&.up {
/* styles for first div */
}
&.down {
/* styles for second div */
}
}
It's a little unclear exactly what your question is. I can read it two ways:
(1) You cannot remove css set with style with LESS
If you actually have a style property on your html elements, then that cannot be directly affected by LESS at all (so it cannot be "removed" by LESS). Additionally, the only way to overcome those styles with LESS is by using the exact same solution you would have available with CSS, the !important attribute (which I despise, but the facts are the facts when it comes to what is available for CSS styling). So this would remove the margins imposed by the style for all direct children in your div (as your example has):
.orderby > * {
margin: 0 !important;
}
But perhaps you want to know how...
(2) You can move the code from the style to the LESS
In which case, it is something like this:
LESS
.orderby {
.arrow {
margin-left: 2px;
&:first-child { /* or could use &.up */
margin-top: 2px;
}
}
input {
margin-left: 0;
margin-right: 10px;
}
}
CSS Output
.orderby {
.arrow {
margin-left: 2px
&:first-child { /* or could use &.up */
margin-top: 2px;
}
}
input {
margin-left: 0;
margin-right: 10px;
}
}

CSS 3 not selector for print media

I am trying to print a part of my entire html document. I am using the below css to do that.
#media print { body * {
visibility: hidden;
}
#print-area * {
visibility: visible;
}}
It is working but as visibility:hidden reserves the space, it is printing a blank page and my content. I was trying to use :not selector from css3 to set all other divs but "print-area" to display:none as below,
div:not(#print-area){ display:none; }
This will result into a print of blank page. Looks like :not selector is not working with media print. Any suggestions/solutions for this will be most welcome.
Thanks
visibility: hidden; holds the space and it is hidden only. Show use display: none; to your body.
#media print { #wrapper {
visibility/: hidden;
display: none;
}
#print-area {
visibility/: visible;
display: block;
}}
Edit you should also declare for screen
#media screen { #wrapper {
display: block;
}
use this :
:not(#print-area){ display:none; }
Change the style rule for print media to be
:not(#print-area){ display:none !important; }
It's likely that any standard css reset in play on the page is outranking this style rule.

Resources