As I see in the primefaces documentation,
1) To change the font-size of PrimeFaces components globally, use the `.ui-widget` style class.
An example with 12px font size.
.ui-widget,
.ui-widget .ui-widget {
font-size: 12px !important;
}
I have 2 questions on this:
Why is the .ui-widget written thrice in the above code?
For two different instances of tabView I want to customize its header background-color differently, but I couldnt find a way to do that. Is that even possible ?
In the style declaration they are comma delimiting the list of different class overrides. Specifically this piece of css states:
Classes ui-widget and ui-widget child elements of an element that has the class ui-widget.
As far as the header background is considered you might not have luck using simple CSS to modify the background color as I believe that it is likely using various different 1px wide GIF or JPG images repeated as opposed to a solid contiguously declared color.
If you want to customize the default themes of the Primefaces components with your own stylesheets then you are best to look into a tool like Firebug, https://addons.mozilla.org/en-US/firefox/addon/firebug/ for inspecting classes, styles and modifying them real time on ANY web page that Firefox is currently viewing. It even has built in Javascript debugging.
For two different instances of tabView I want to customize its header background-color differently, but I couldnt find a way to do that. Is that even possible ?
tabView, like all other PrimeFaces components has the attribute styleClass. Therewith you can assign your own CSS style class to a tabView instance (or any instance of a different component).
So you can create two style classes with different background colors.
xhtml:
<p:tabView styleClass="myClass">
...
</p:tabView>
css:
.myClass {
background-color: yellow;
}
You might need a more specific selector, read about css specificity
Perhaps a little subjective, but unless you're looking to customise existing Jquery UI IDs within a pre-existing/pre-rolled Primefaces theme then you're on a bit of a hiding to nothing. PanelGroups, PanelGrids and TabViews, for example, burst their containers and not even an overflow:auto can repair it.
One of the most infurating things about the Primefaces library is how the components do not pass W3C validation, leading to hours of "Fighting the Framework".
Related
Why does jQueryUI define extra selectors in their CSS?
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight
The first selector is "Find any element having class ui-state-highlight"
The second means "Find any element having class ui-state-highlight and is child of ui-widget-content"
The third is similar to the second.
The last two seem redundant to me, why are there these extra CSS selectors? Did I miss something?
You missed the concept of CSS selector specificity. The two extra selectors with parent class specifications have a higher priority in those contexts, even if a later CSS selector tries to specify a different value for the same properties.
This is especially important in a framework like jQueryUI which is aimed at reuse and flexibility.
For the example you posted, anyone could give .ui-state-highlight a different border colour:
.ui-state-highlight { border-color: red }
But this won’t actually affect any elements with that class and a parent container with the ui-widget-content or ui-widget-header classes, because the more specific CSS sselectors apply to those instead.
Or you can use a different colour to highlight elements in a widget header:
.ui-widget-header .ui-state-highlight { border-color: green }
jQueryUI uses a small number of well-defined consistent classes like these together with selectively to make it easy to understand the different concepts (like highlighting) while at the same time making it possible to use different effects in different contexts (highlighting in a header or the widget content are separate things).
I am using input-group input-group-lg classes to add styles to textarea.
The border is not being applied to the textarea.
Default value for the border is 0.
in bootstrap.css if we modify
.input-group .form-control:first-child{
border:1;
}
Then i am getting border. How can i apply this style to my_styles.css which is in my project.
I pasted above selector in my css file and used !important also and not getting border.
Thanks in advance.
You defined border: 1, what 1? One apple, one meter, one pixel?
Complete border definition is border: 1px solid #000 (width type color), if you only want to change border width, use border-width: 1px;.
Do not use !important unless you really really have to.
To override the existing styles, make sure you load your CSS files after the bootstrap one. Then, make sure your rules are at least as specific as those in the original CSS file, only like that you can override them.
Here is a nice tool for comparing specificity: http://specificity.keegan.st/
Also, make sure you follow the proper syntax for each CSS rule. The example you've shown is not valid CSS therefore it should not work, ever. Look at #panther's answer for detailed explanation.
I don't want to argue regarding the use of inline styles over external styles however I just want to know your ideas on certain situations wherein inline styling could be used.
For example I have 10 types of tables that have different width but always use the same border color, thickness and padding. What I currently think is I should declare a global CSS class that controls the border and the padding of the table and then use inline styling to specify the width of the table.
E.g
<table class="default" style="width: 320px;">
Is my approach applicable?
yes u can declare a global CSS class and use this in all table. it will work for all table.
I believe its a correct approach in your case. As you are making the correct use of external class "default", by using it in all the tables and specifying the different widths inline with the specific elements.
I think you're misunderstanding something here. If you take this:
<table class = "default" style = "width: 320px;">
Then this does not apply width: 320px; on all tables with class default. It only applies it on this specific element which has the style attribute.
If you're looking to specify such CSS without having to <link> external files, you can embed your CSS within <style> tags:
.default { //or table, or whatever your selector is
width: 320px;
}
If you want to style a particular table with the class default with a different width, give it another class (class = "default width320") and do:
.default.width320 { //selects element with BOTH default and width320 classes
width: 320px;
}
Read more about CSS selectors here, and selector specificity here.
Edit: if you only want to style that particular table, your approach is relatively-fine. But, I suggest using classes and merging your styles in one place (whether it's a .css file or an inline <style> definition) — it's much more maintainable and tidier than scattered style attribute definitions.
Edit 2: it's absolutely correct to use style attributes. It's more of a matter of personal choice. If you're sure that this won't cause maintainability issues ('Hey, why is my table 320 pixels wide? I don't see anything in my CSS file that does that'), then go for it. It's what the style attribute is for.
This is only a problem because, most of the time, if you've done it once then you're going to want to do it again. And now you have two identical style properties. And, well, they should both be red-bordered. Oh, and I need a third one of these tables somewhere. And, wait, they should be a little skinnier...
On the other hand, if you used a one-off class, you can just slap it on the next table. Or you can compare all ten tables and tweak them from one place, etc.
The problem with violating principles is that principles are often hard-earned. :)
I have a css file which styles my tables, although I have one table where I would like to use a different style, or no style? is there a way I can do something like <table style="no-style"> and then it is plain and ignores the CSS?
I have looked but I can not find anything related!
Use class definitions for table properties in your CSS file. Whenever you want them, use with class property.
CSS
table.myClass {
...
}
HTML
<table class="myClass">...</table>
<table class="anotherTableWithAnotherClass">...</table>
CSS are cascading style sheets, they only style an element. Can't manipulate anything. You will need to use JavaScript.
Best way I know of, is to use CSS classes for different styles. And use javascript to switch them or remove them.
You need to explore CSS in more depth, and one thing you might focus on is classes. You can create a "class" of styles, and apply it to a particular HTML element like a table, and not have it affect another table you want to leave "plain."
.foo {
border : 1px solid black;
}
Then apply that class to your HTML element:
<table class="foo">
...
</table>
Another way to approach the problem is with selectors.
No, you cannot take off a style that way – there is no way in CSS to say “don’t apply any of my styles inside this particular element.” You can only override style settings. For example, if you have a setting like * { color: red } in your stylesheet (just a foolish example), you cannot add a rule that would exclude a particular element and make the browser apply its default color inside it. But you can set table#foo * { color: black; } to make all text inside a table with id=foo have the black color.
Overriding overall style settings inside a table that way isn’t trivial, but certainly possible. You just need to be explicit about the style you want; you cannot say “use browser defaults.”
However, there’s an indirect way, in a sense, though it is seldom a good idea: If you put your table in a separate document and embed it via an iframe element, then the table will be displayed according to the CSS code specified for the embedded document, quite independently of the style sheets for the embedding document. At the extreme, if you specify no CSS code for the embedded document, it will appear as per browser defaults (though inside a subwindow, an inline frame, with dimensions set by the embedding document).
I always was told to take out multiple properties in your css that you use more then once, and add them all in one rule. Like below. (please excuse the poor example)
I always seen this:
.button, .list, .items { color: #444; }
With multiple rules, can't that leave a lot of clutter?
Only in css tutorials and examples Ive seen this:
.someColor { color: #444; }
And in the css, just add another class of '.sameColor'. (div class="button someColor")
I've never seen this and feels like it would leave less clutter in your CSS. Would this be okay? Or do you think it could leave with more clutter in your HTML ?
Try to name your classes independently of their visual effect. It is a nature of CSS to play with the design and layout without having to change the HTML. Class names such as .someColor or .left-sidebar are a bad practice. Colors and position can change.
And also apply rules to semantic HTML elements rather than adding classes on all different divs and spans. It should be obvious, although many people get this wrong.
CSS is a limited set of rules and that makes it a perfect creativity stimulator.
It's all based on personal preference. I've tried both methods and prefer the second method you listed, except with more generic class names such as middleParagraph or headerGraphic so it applies to an area rather than a specific color because colors can change.
Good classnames and IDs are the first place you should optimize. THEN move onto multiple class names.
Multiple classnames can help out quite a bit though, consider:
<div class="leftColumn">Left</div>
<div class="rightColumn">Right</div>
<div class="middleColumn hasLeft hasRight">I have padding-left of 210px and padding-right of 210px</div>
<!-- alternatively, you could have -->
<div class="rightColumn">Right</div>
<div class="middleColumn hasRignt">I have padding right of 210px</div>
<!-- or -->
<div class="leftColumn">Left</div>
<div class="middleColumn hasLeft">I have padding left of 210px</div>
<!-- or -->
<div class="middleColumn">I have no padding</div>
and your css
.leftColumn { width:200px; float:left; }
.rightColumn { width:200px; float:right; }
.middleColumn.hasLeft { padding-left:210px; }
.middleColumn.hasRight { padding-right:210px; }
The result is floated right/left columns and the center area compensates for them with padding. This means you can style your middleColumn how you want to (e.g. .middleColumn .otherCoolSelector ).
It's perfectly acceptable to apply multiple classes to HTML elements. The trick is to be judicious; I usually find that when I do this, the additional classes are additions or exceptions to the basic styling being applied. For example, here are some classes I occasionally add to an element that already has a class:
error -- to style the current element if the user entered invalid data
first -- to style the first element in a list or in a table row, e.g. to suppress padding-left
last -- to style the final element in a list or in a table row, e.g. to suppress margin-right
even -- to apply zebra-striping to alternate elements
hidden -- to hide an element if it's not currently relevant
These extra classes are typically generated dynamically with a server-side language like ASP.NET or PHP. They can also be added or removed on the client side with JavaScript, esp. with a library like jQuery. This is especially useful to show or hide elements in response to an event.
There are a lot of good answers here. The trick is finding out which one fits your situation best.
One thing to consider is your markup size. In a high-traffic situation, your markup size is critical to the speed of your page loads...every byte counts. If this is the case for you, then you may want to create more CSS classes and put less in your markup. That way, the client is caching more and your website is serving up less.
What you're suggesting is a bit like an in-line style, e.g. style="color:#444". So if you want to change the color of your element you'd have to make a change to the html, which means you've defined style as part of your content. Which is exactly what css is supposed to avoid.
Imagine if you'd included 'someColor,' multiple times across multiple html files and you decide some of these elements shouldn't have 'someColor,' after all, you've got a lot of files to go through.
I'd probably avoid the list option too, if I'm making a component, say a button, I want to find .mybutton class in my css file and see all the rules for that component, without having to go through all sorts of unhelpful global classes. Also if someone comes along and changes the color in our global class he may break my button, where as if the button controlled it's own styles it can't be broken in this way.