Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I was tinkering around with a few websites in attempting to create and mimic a windows themed style buttons. What would the CSS style patterns be to basically mirror the buttons like the ones found in the picture below?
In the picture, there is an inactive state, hover state and a default state button
You need a combination of:
border-style
border-width
border-color
border-radius
background: linear-gradient
Read the documentation here:http://www.w3schools.com/css/default.asp
For both CSS and CSS3
For the gradient, use this online tool to generate the CSS for you: Colorzilla
Then you need to apply CSS border attribute.
Then you can use the CSS :hover selector to change it's looks upon the button element is hovered.
I hope this will give you a start. So play with these things first and let us know the results. We will then give you more details.
Start with your default state:
button {
border: 1px solid black;
}
Hover state:
button:hover {
border: 1px solid blue;
}
Disabled state:
button[disabled=disabled] {
border: 1px solid grey;
}
These styles are incomplete, but the selectors are the important thing.
The rounded corner effect is generated by adding border-radius: 3px; to the button css.
To get the gradients, you'll want to use a background with a linear-gradient; I recommend a tool like www.cssmatic.com/gradient-generator to generate the styles for you.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
there is a problem that I have had since I started using CSS everything selector [*] with multiple [:not()].
Examples below does not work as I tried:
.post-body *:not(.has-color):not(.has-bg){
color: red
}
.post-body *:not(.has-color)*:not(.has-bg){
color: red
}
.post-body *:not(.has-color .has-bg){
color: red
}
.post-body *:not(.has-color , .has-bg){
color: red
}
Imagine something like WordPress post content; I can not change the content whole structure but I do need to set a primary color for texts which do not have a specific background or text color. So I am trying to set Red Color to any element except elements that contain ".has-color" or ".has-bg" that is it there is no relation between them.
Has somebody solved this issue or even seemed to something like this?
Your first example should work, as shown in this CodePen, but as Louys notes, it’s hard to tell without any markup.
.post-body *:not(.has-color):not(.has-bg) {
color: red;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I can't seem to find how to change the text-color from black to white whenever I hover over the schedule over here http://apavtcongresso.staging.wpengine.com/
Scroll down to "PROGRAMA" and you'll find the schedule, it has a couple of tabs named "Day - 01, Day - 02" etc, inside there's black text that I wish to change to white whenever I hover over the tabs. I've already changed the :active color but I can't find the right classes to customize the css of hover, any help please?
Thanks.
.your-div-class:hover, .your-div-class:focus {
color: #fff;
}
side note: check in your code that .your-div-class or any class associated to its inner text hasn't a color assigned with !important, in that case either remove the !important or assign it to the hover too.
EDIT: try this:
.schedule-layout2 .schedule-nav li:hover .day-number {
color: #fff !important;
}
.schedule-layout2 .schedule-nav li:hover .schedule-date {
color: #fff !important;
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I've a small anomaly ('problem' is not a permitted word ;-)) with setting the background colour in nested divs which is driving me potty. I manage the site at www.teachtoo.org which is Wordpress-driven. I'm trying to set (using the very handy Jetpack CSS editor) the background colour of the 'bar' with the page title, and I've only been partly successful as can be seen.
The page title appears in the following HTML:
<div class="page-title-wide">
<div class="page-title-wrap">
<h2 class="left-title entry-title">Home</h2>
</div>
</div>
I've tried the following (ungainly, I know) CSS to overwrite the theme styles and set the background colour:
/* Set background colour of 'bar' with page title to purple } */
.page-title-wide {
background-color: #645274;
}
.page-title-wrap {
background-color: #645274;
}
The second selector's obviously changing the colour, but not the first. The first selector works in that, if I put something like " font-size: 300%;", something happens.
This is one of these 'issues' which you can stare at for ages and not see the cause, hence my posting here. Can anyone suggest why the background-color isn't being set in the .page-title-wide div?
As with any CMS site, there are scads of stylesheets loaded so it's not easy to dissect then all as it would be were there just the one sheet.
I've read the thread at Nested divs Background-color but the solution there doesn't work with my 'issue'.
In your case there is an additional rule somewhere else which is overriding your statement.
Line 91 of your CSS file
/* ======================================================= *
* Page Styles *
* ======================================================== */
.page-title-wide {
/* background-color: #5370B2; */
background-image: linear-gradient(to right, #093CB5, #5370B2 50%, #093CB5);
color: #F9F9F9;
}
Ok, sorry, I missed something crucial: the theme was loading a background image with a blue gradient. I set background-image:none and that fixed it. Sorry :(
Those styles you are applying need to be declared "after" the default theme styles. The browser will use the last declared CSS style it reads.
In some cases where your styles are being written before the default stylesheet, you can use the following, but it is not recommended
background-color: #645274 !important;
You should inspect the element and see where the current style is being applied from and declare your style after that
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Firstly here's the link
When I click on the carousel's main panel there is a mysterious blue line appearing, it disappears after few seconds. I tried setting the outline to none but it did not work. The style codes from this pices of code which is bootstrap 3's default code:
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
Any help would be appreciated.
Add text-decoration:none to that a:focus rule (or create your own, correctly placed in your stylesheet) and you should be fine. Worked in dev tools.
I have some thoughts on my head that involves changing the background-color of some text input fields I have. I went ahead to see if they'd look as I hoped, and this is what I saw:
First one being truly plain, second one being with the CSS styling background-color: #FFFFFF; and the last one has background-color: #FEFEFE; which you can experience yourself there: JSFiddle
It seems to be that browsers are dismissing all their pre-set styles for the input elements, as soon as I change this style property. Internet Explorer 11 even gives up on the blue glow which is normally present when a text input field is hovered (should also be on blur).
Is it possible for me to change just the background colour without causing all that?
I probably will just thoroughly style the text input fields anyway, I'm asking it out of curiosity.
I did some research about this, its something that makes me wonder what its the real behavior, unfortunately, I couldn't find any explanation to this, so I can only assume, that once you style an input, the appearance of the same, its reset to a default value, ignoring the native styles that the browser is giving to the element.
I think you probably know this already, because of your last comment, but just in case, this will help you keep the blur effect on the inputs, and at the same time, it will make them render in the same way for different browsers, you can also add height to that, to keep it even more consistent.
input
{
border:solid 1px #CCC;
background-color:#FFFFFF;
}
input:focus
{
box-shadow:0 0 3px 0 blue;
outline:none;
border:solid 1px #CCC;
}
I hope this helps!