Hey stack over flow I have been getting into styling my fire fox browser and have run into a bit of a bump. When I try and re-color my search bar there seems to be a border or something andcant find out what it is that's making that edge white if any one can help me it would be much appreciated.
here is the code I have put in at the moment
input#gbqfif
{
color: #AADA2C !important;
background: #262626;
border: 0px;
}
here is an image of what i'm going for and what is wrong
http://i.imgur.com/dNVxv1A.png
I hope you guys can help and thanks!
That thing, sir, is a div-beast:
I found in my browser it's id = "gs_tti0" what you want to modify. So you should do:
#gs_tti0 {
background-color: #262626;
}
However, it looks like it might be dynamically generated. Just right click in the search bar, inspect element and change that background. If it doesn't work, go one level up (the parent). Keep doing so until you find the one you want.
Related
I'm currently working on an online code editor. (like jsfiddle codepen etc...)
I got everything working, but I ran into one problem; If a user does something like this:
button {
background-color: red;
}
It also changes the properties of my "run code" and "reset" button I made.
same thing with other things like a div;
div {
padding: 500em;
}
because this will also change the div's Im using in my own code.
I fixed the issue using !importand tags after every line in my css but I'm wordering if there is any other way to fix this? or is !importand really the only way.
As said in the comment by CBroe. To do this you can use iframe.
A more original solution would be to create a web component with a shadow root (which isolate the style too). The support for this is not too bad even if it's fairly new :
But, I've used it myself and it's a little bit harder to understand at first
I'm making this checkbox list and everything works great until i place it inside this div and wrap the scss in it:
<div data-component="modal"></div>
[data-component='modal'] {styling goes here}
Outside of that in css, it checks great. Can someone tell me what is going on?
Also, the reason it's called modal, it's because this checkbox is inside a modal. And at first I thought the modal was messing things up, but it works great. The issue is in scss, for some reason.
Here's the codepen.
The Problem is you have given
background: #fff;
in .custom-checkbox .custom-control-indicator {
that's why tick is not shown.
Remove that and check it again.
Actually it works, you are overriding the check icon with background you can test by deleting or changing this line background: #fff;.
Maybe something like this ?
.custom-control-input:checked~.custom-control-indicator{
background: radial-gradient(circle at center, #1062a4 .6ex, white .7ex);
}
Hope helps,
I'm hoping to find a nice way to edit the css on this page:
http://carbonbi.com/build/?page_id=46
I'm using the wordpress layout shortcodes to create three separate columns. I'd like to add a border in between the first and the second column and the second and the third.
I realize using the built in shortcode might not be the best way to do this, and may require creating my own class to handle this, but if anyone has any effective ways to work on this it would be nice to see.
Thank you in advance.
Just a general tip: by using plugins like "Web Developer" for Firefox (my favorite) or simply left clicking an element and choosing "inspect element" (Firebug is a good choice, although most browsers have their own, firefox actually has a spacy 3d one that can come in handy) you can get the names of classes and id's used by plugins and the like, and then add them to your style.css and edit away!
Bonus Tip: Firebug let's you edit the CSS in real time to preview what it would look like without having to refresh the page.
Add the following CSS to your stylesheet.css:
body .three_col {
margin-right: 2%;
border-right: 1px solid #CCCCCC;
padding-right: 1.75%;
}
body .last {
padding-right: 0px !important;
border-right: none !important;
}
This will add a 1px solid gray border in-between the columns.
I have a menu that's been giving me quite some trouble. What I'm trying to do is make the menu links, when clicked, reveal a drop down secondary division. However, it's acting as if the menu being revealed is floating and I can't seem to figure out why.
Here's the ideal design I want:
http://jsfiddle.net/WeL6j/7/
Notice how the grey division is affected and slides down as well.
I'd like the same thing to happen with the divs that hold 01, 02, etc and the one with the green 01. Basically all the content below the menu. I've posted a fiddle of my code just to give an idea of what it's doing and so you can edit it in real time. I haven't created any fallback code for it, so it's only really viewable in chrome. (sorry) It's also going to be messy as I've been moving things around trying to get it to work properly. Anyways, here's what I have so far.
-removed-
Thanks in advance for the help, Brian.
Try this:
http://jsfiddle.net/ETaqa/63/
BTW, you should really format the nesting. It was confusing figuring out the div levels.
Hi you can define some properties in you css as like this
.content {
position: relative;
top: -7px;
z-index: 10;
}
i'm working On a website for a client, and I've hit a snag. I don't quite know how to fix this one and google searching has done me no help.
I've got a nav as seen on This Site. If you hover over the logo to the top left, it behaves as a link, thus completing my desired goal. But, if you hover a few pixels below the image, no link. No cursor change or anything. Which is good, until you go down beyond that, in which there is a bit of space where you can hover to find the same link as the above image. This is not good, though I can't find a way to remove this without removing the tag, which defeats the purpose anyway. Can anyone help?
Style them correctly.
a {
cursor: default;
}
img {
cursor: pointer;
}
OR (Sass)
a {
cursor: default;
img {
cursor: pointer;
}
}
After a few hours of looking around other people's codes (bootstrap, materialize, etc) I found that changing the position and display values to absolute and inline-block of the link, it would make the link wrap the image. Hopefully this'll help anyone who had this weird problem too.