Can someone help me, please?. I want to add a border style in the link:hover, to a component of primefaces.
I add like this:
.ui-contextmenu .ui-menuitem-link:hover{
font-weight: bold;
border-style: solid;
border-width: thin;
}
In a file calling pfcrud.css.
The problem is that, the border style is not working/showing.
Thanks!.
Use the shorthand method: border: thin solid black;
CSS
.ui-contextmenu .ui-menuitem-link:hover{
font-weight: bold;
border: thin solid black;
}
Note that this will change the box-model of the element in question, so when you hover over it this border will effectively increase the element size. You may need to consider accommodating for that change by declaring a rule for the element's natural/default state as well, usually a border with the same width, but transparent works in most cases.
May be this you want to try :
.ui-contextmenu .ui-menuitem-link:hover{
font-weight: bold;
border: 1px solid #a32ddf
}
Updated fiddle of bucurvad: https://jsfiddle.net/upq3045g/3/
More info about border at : http://www.w3schools.com/css/css_border.asp
Have you tried using
.ui-contextmenu .ui-menuitem-link:hover {
border-style: solid black 2px;
}
Is this example ok?
https://jsfiddle.net/upq3045g/2/
Related
I have issue with border-color. It didn't work. I'm new to css here is the fiddle.
http://jsfiddle.net/zeburrehman/aFzKy/151/
<div id="box">
Hello! The color of box border should be red!!
</div>
#box {
border-color: red;
}
By default the border-width is 0 and border-style is none
So you need to set them to border-width:1px and border-style:solid. You can combine all the border properties into one as below:
#box {
border:1px solid red
}
I had an issue where it seemed that border-color was not being respected, confusingly it even showed having the right color in the style inspector in Chrome (possibly a Chrome bug). The key thing for me was that if the shorthand border style is specified, it sets all three aspects of the border style, regardless of if they are included or not so:
border-left: 1px;
Actually overwrites both the border-left-style and border-left-color properties even though they weren't included. This can for example cause an inherited style to be overridden and appear not to work.
#box{
border:3px solid #aacfac;
}
I hope this helps!
You need to add the border style:
#box {
border: 1px solid red;
}
You can use hex color code for red as well, which is #ff0000 (RGB). 100% Red, 0% Green and 0% Blue if you want pure red color.
#box {
border: 2px solid #ff0000;
}
Try this :
border: 5px solid red;
I am using QFrame just to have colored border, since I couldn't find
the a way to change color of the QDialog. So because of tampering with
QFrame's border, it is also affecting the QLabel's look, is there any
way to avoid this?
Edit:
Here is the Stylesheet which I am using, where QLabels' doesn't have any effect. It's taking QFrames'
QWidget {
background-color: black;
}
QLabel {
color:white;
border: solid 2px black;
font: bold 19px Sans Serif;
}
QFrame {
border: solid 2px white;
border-radius: 4px;
}
Instead of using a type selector which matches all the instances of that class and its subclasses, use a class selector.
So in your stylesheet, instead of using QFrame{...}, use .QFrame{border: 1px solid red;}. Note the . before the class name.
See more about selector types here.
My website - http://www.automated-stores.com has the strange feature of a blue-ish background for text areas, seen more specifically here: http://www.automated-stores.com/vending-machines-business-electronics-cosmetics-perfume
I didn't code the website, but I suppose that to change this it would have to be in the stylesheet.css, does anyone know what code to enter/change?
I thought it would be this:
input,textarea,select {
padding: 1px;
border: solid 1px #000000;
font-size: 10pt;
color:#000000;
background-color:#ffffff;
}
(the colours were different before) but I have changed it several times with no effect.
I looked through your source code and you need to find your style.css under your root and change this:
input,textarea,select {
padding: 1px;
border: solid 1px #5c8593;
font-size: 10pt;
color:#42484d;
background-color:#224f5f;
}
to this:
background-color:#ffffff;
Remember this will affect everything with the class of input, textarea, select. I used the chrome inspect and firebug lite tool to verify this and it worked. If you only want to effect text areas bg color do this:
input,select {
padding: 1px;
border: solid 1px #5c8593;
font-size: 10pt;
color:#42484d;
background-color:#224f5f;
}
textarea {
padding: 1px;
border: solid 1px #5c8593;
font-size: 10pt;
color:#42484d;
background-color:#ffffff;
}
The code in the question does it, provided that you insert it e.g. in a style element after the tag <link rel="stylesheet" href="style.css" type="text/css" />. The external style sheet sets the background color etc. in a simple manner, which can easily be overridden, provided that you place your code after that link tag.
If this does not appear to work, check, in a browser, the HTML source code of the page. It is possible that the server software does some modifications to your code or that your browser has got an old version of the page (Ctrl+F5 should help then).
your <textarea> have attribute <... class="textarea"... You could add this to your stylesheet
.textarea {
background-color: #FFFFFF;
}
The specific rules changing the color of the textarea on the page you gave (the second link) is in style.css line 44:
input, textarea, select {
background-color: #224F5F; // This is the blue background
border: 1px solid #5C8593;
color: #42484D;
font-size: 10pt;
padding: 1px;
}
If it is just textareas that you want to style but dont want to touch the formatting you can do one of two things:
Option 1
Keep CSS as it is and add this underneath:
textarea {
background-color:#FFFFFF !important;
}
I dont like doing this as it makes the CSS to rigid and lots of !important declarations makes managing the style very difficult.
Option 2
Change line 44 styling to:
input, textarea, select {
border: 1px solid #5C8593;
color: #42484D;
font-size: 10pt;
padding: 1px;
}
textarea {
background-color: #FFFFFF;
}
input, select {
background-color: #224F5F;
}
I'd recommend simply targeting the textareas and changing their background colour and giving them a border.
textarea {
background-color:#FFF;
border:1px solid #224f5f;
color:#000;
}
Im having a problem to determine how to manipulate the Borders for some Tabs
You can see the functionality here on ASP.NET if you are logged-in http://forums.asp.net/user/editprofile.aspx#
You can see for an onClick Event the background-color of the Tab changes to white like its supposed to.
The problem that Im having has to do with the Borders for onClick:
The border-bottom should change from the grey color to white.
The border-left and the border-right should change to the grey color.
Likewise when a Tab is not selected:
The border-bottom should change to the grey color from white.
The border-left and border-right should not have a border.
In my CSS, Im using both the blue and white class for the JavaScript. However I also have: .common-heading-tabs a.selected and this is confusing me.
Here is my Fiddle- if someone could help It would be great
http://jsfiddle.net/NinjaSk8ter/ZSeFA/
I just modified the CSS class for .white a little bit, your CSS mark-up was not the standard:
border-left-color: #A0AFC3;
border-left-style: solid;
border-left-width: 1px;
Additionally, to get the bottom border to go away, you have one of two options, you could do one of either
remove the bottom border from the .common-heading-tabs a class and add it to the .blue class
add border-bottom-color:white !important; to the .white class
The reason that you were seeing the behavior that you were was because the standard tab had a border (from .common-heading-tabs a), and when you switched to white, you tried to change the color or some of the borders, but you used border-left-color-value rather than simply border-left-color, and then you didn't modify the border on the bottom on the tab for the white class, hence either moving the bottom border declaration out of .common-heading-tabs a or explicitly coloring the bottom-border-color:white !important
Hope that helps!
Edit:
You requested having a border run between the tabs, if you were to modify the class .left-col and add to it:
.left-col
{
border-bottom-color: black;
border-bottom-width: 1px;
border-bottom-style: solid;
}
That should do the trick, maybe you should get rid of the borders on the other tabs, if this is what you're looking for, because the double border looks funky.
Let me know if I can help any more
For an example to make bottom border white look this
<html>
<head>
<style type="text/css">
p
{
border-style:solid;
border-bottom-color:white;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>
You have some inheritance going on. Adding explicit values to the .blue class and important to the one in .white worked.
.blue {
background-color: #D7DFEA;
border-bottom: 1px solid #fff;
border-top: none;
border-left: none;
border-right: none;
}
.white {
border-bottom: 1px solid #fff !important;
border-top: 1px solid #A0AFC3;
border-left: 1px solid #A0AFC3;
border-right: 1px solid #A0AFC3;
background-color: white;
}
The problem, as far as I can see, is that while both .common-heading-tabs a and .white are applied to the link, the former is the "more specific" CSS class, which means the browser gives it precedence while determining which styles to apply.
If you want to make sure the .white style overrides the border, you can either add !important to the border style:
.white {
background-color: white !important;
border-bottom-color: #FFFFFF !important;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
...
}
or redesign the appliance of your classes in such a way that conflicting border styles aren't applied to begin with, which in your case could for example mean moving the blue border style from .common-heading-tabs a to .blue.
How do I square the corners of a submit button? Can it be done with CSS? I just noticed that Stackoverflow buttons are pretty much the same thing (don't close it for mentioning SO, just want to illustrate what I mean).
Use the following field and command in your css:
border-radius: 0;
Just add CSS to it, and the default look will dissappear.
input.button, input.submit {
border: 1px outset blue;
background-color: lightBlue;
}
edit: changed the selector to use class name instead, as suggested in comments.
You could use the HTML element instead of input type. It's quite easy to style that one.
If you specify the height and width in the css, you'll make the corners square, and retain the certain level of automatic fancy-ness that normal buttons have... and that way, you wont have to build your own.
input.button, input.submit {
height: 30px;
width: 20px;
}
I seem to remember this only working if the height is large enough, but it might work any which way.
Use border: 1px solid for the element.
<a class="test">click me</a>
<style>
.test
{
cursor: pointer;
background-color:#E0EAF1;
border-bottom:1px solid #3E6D8E;
border-right:1px solid #7F9FB6;
color:#3E6D8E;
font-size:90%;
line-height:2.2;
margin:2px 2px 2px 0;
padding:3px 4px;
text-decoration:none;
white-space:nowrap;
}
</style>
This is how a stackoverflow button is made.