I have this bootstrap and custom css that generates nice "books on shelves". When I use the code itself it works. But when I insert the code in the div:
<div class="panel panel-default">....code from the link...</div>
suddenly the shelves disappear. I noticed that somehow pseudo elements (:before, :after) stop working when I use them in panels. Do you have an idea what is going on? Please help :)
bootstraps panel has a background color of white that overrides your :before and :after css.
.panel {
background-color: #fff; /*GET RID OF THIS*/
}
(you can choose to do this in different ways:
you can change the native bootstrap (not recommended, and you cant if you're using cdn).
add a different class on the panel and put this code in:
.newClass { background-color: none !important; }
(you can use none or transparent) either one will get your shelves css back
Related
I have button which is <a> element with href, which doesnt have any background set on :active/:focus/:visited, but on force/3dTouch tap it gets this weird #b8b8bc background under the text only (while <a> doesnt have any children e.g. <span> etc so I suppose this is the text node highlight).
here's the gif to illustrate the behavior.
I've tried adding -webkit-tap-highlight-color: transparent but it changes only regular tap color, not the forced/3d one
also I thought maybe that's selection color (as I can reproduce this on various websites) so tried to use selection selectors which didn't help as well
::selection {
background: transparent;
}
::-webkit-selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
Any ideas about possible origin of this?
Good job digging up.
I had the same issue plus another one and here are my solutions.
Post is old but someone could find it useful like me today.
First of all, the forced background was covering my link text totally because I was using user-select: none; on my header links.
So that's something to check, just in case.
Regarding the background color, Force Touch doesn't use the link parent element background but the one that's under it.
If you want to "feel it", we could say that Forced Touch digs into the direct parent background and let the under layer appears.
So, to counter that without having to touch to background color, I use some z-index in the parent element to elevate it, preventing Forced Touch to "dig" :)
So if your links parent element is named card, you can add to your CSS:
.card {
isolation: isolate;
z-index:1;
}
Now, Force Touch will use the parent background color as we want to.
Okay so I found sort of "solution" based on parent's color.
Try to set *{background: red}.
If worked try set same on few parents .parent1 { background: pink}, .parent2 { background: lightblue}, .parent1 { background: salmon} etc.
In my case I found the color applied to force touched text was menu wrapper's background that takes most of the screen when menu is opened.
Side effect of this change - all forcetouched elements will have same color, no option to specify :hover or :active colors (you can see the color is slightly different on the 1st click) and ALL links will have same background:
I imagine you can try setting wrapper's background via JS based on what is clicked. Not sure if that will work. see docs here:
WebKit DOM Programming Topics
So far this seems to me too fragile to touch and I would not recommend doing this. Though you can change this color I've decided to let OS do what it wants here.
I'm having trouble changing the background color of a certain button on a WordPress plugin.
The button and text are set to white and I'm trying to identify the CSS file that controls it, unfortunately I've had no luck within the inspect element of my browser.
It is incorporated in a popup form - so multiple other files come into play.
I changed the color within the browser during inspect but need a fix.
You can overwrite CSS attributes by setting !important after your definition or by defining the scope better (e.g. by writing body or html before the class selector).
make sure your css file is able to "access" the dom element – if the element is in an iframe the css wont work.
body .wpforms-page-button {
background-color: green !important;
}
Using !important is generally considered hacky. Both rules in your screenshot have the same CSS specificity in that they are both firing on input[type="submit"] and .button.
Without seeing the corresponding HTML I can't give you the exact syntax, but something like
.parentclassname input[type='submit'] and or .parentclassname .button should make your style more specific than the original rule and therefore give it precedence.
Did you try to set !important after the #fff; ?
like this:
input[type=submit] {
background-color: #fff!important;
}
the best way is to define the button in a class, so you can change only the color for this specific button. Otherwise it will changes all the buttons to color #fff if you put the css in a general style.
I am learning as i go for a new website i am working on, never done custom css before. (am noob, please be nice)
Using Theme bemart from themeforest, Kingcomposer Pro, and wordpress.
(current plugin for widget css is zigwidgetclass)
www.aboutautomation.com.au (for inspect element)
I am trying to remove the border on just ONE widget on the side bar (custom_html-9) it is currently being inherited from the theme customisation and when edited will change all borders, which is undesirable. i am wanting to either make this a css class for this widget either making it #ffffff
but i cant manage to get it going, the only thing i have managed is to make it disappear completely with
.hide {
border: #ffffff; }
i am not even sure how that happened?!
does have a custom css on it already hide_on_mobile
#media only screen and (max-width:768px) {
.hide_on_mobile {
display: none !important;}
}
I'd go with:
#custom_html-9 .custom-html-widget {
border: transparent;
}
The contents shift if you removed the border completely (as they take up space) so set the border to transparent so you cannot see it but continues to take up space.
You could also use any combo of CSS classes on the parent aside elements and the inner div. Some other options include:
.sidebar .widget_text .textwidget
.sidebar .widget_text .custom-html-widget
.sidebar .widget_custom_html .textwidget
.sidebar .widget_custom_html .custom-html-widget
The current border is being applied with multiple CSS selectors and it looks like you'll need at least 3 classes or an ID in your selector in order to override the original.
I have a CSS conflict problem when incorporating Slick Carousel in my personal webpage. Below is a link to the page where you can see that there are no visible navigation arrows.
http://matutor2012.scuola.zanichelli.it/animazionibienniowc/drag_and_drop_insiemi/DDM-004-BN/index.php
Can this be due to CSS in my page colliding with Slick's CSS?
Here how it looks before incorporating the carousel on my page:
http://matutor2012.scuola.zanichelli.it/animazionibienniowc/drag_and_drop_insiemi/DDM-003-BN/index.php
Remove height form the .esempio class and add color in .slick-prev::before, .slick-next::before and it's work perfectly
.slick-prev::before, .slick-next::before {
color:red;
}
Arrows are white. Change:
.slick-prev:before, .slick-next:before
{
color:black;
}
you need to remove the color style from slick.css under (slick-prev:before, .slick-next:before) css styles
That is setting the arrows to white which is why they can not bee seen on the page.
Or set these as new styles in your style sheet with the !important tag that way these should be the ones which are used.
I want to set background color on flexbox and tried as follow.
Class definition on app:
<App id="app" class="weight-protocol"></App>
on FlexBox:
<FlexBox
height="20%"
width="100%"
alignItems="Start"
class="calendar-header-bg"
justifyContent="Center">
in the css file:
.weight-protocol .calendar-header-bg {
background-color: #007DB2;
}
The custom background color is not going to apply at all as you can see:
Look at the code inspector, the custom css class stays at the beginning calendar-header-bg instead at last.
Did you try without .weight-protocol ?
.calendar-header-bg {
background-color: #007DB2;
}
If not work you can use !important tag:
.calendar-header-bg {
background-color: #007DB2 !important;
}
You can also try use only background tag instead background-color:
.calendar-header-bg {
background: #007DB2 !important;
}
I hope this helps...
Good Luck!
Shouldn't FlexBox have some css to do what you are trying to achieve? use inspector and watch for the div that cointains the flexbox.
Can you be more specific?
I'm guessing the problem is specificity also known as importance of selectors. This means that the selector you're using (class nested in class) has little weight overall, and it very likely overwritten by a different, heavier selector from within the library you're using. For instance the library might be targeting a class within a class within an id or something similar.
My advice is to see the applied styles within the dev tools, see what's overwriting your styles and then decide if you'll make your selector stronger( by making it more specific) or just add !important after your background-color declaration.