I am using Prime Faces tool tip. I want to know can i change the look and feel of the prime Faces tooltip by applying css or skinning. Like make bigger box and change the color and font of the Tooltip etc.
I am using Prime Faces 2.2
Thanks
You can change the style by adding CSS to style or styleClass attributes.
Also, I strongly recommend to upgrade to 3.0.M4 or 3.0.RC1-Snapshot!
EDIT:
I've found this piece, regarding tooltips styling: http://code.google.com/p/primefaces/source/browse/examples/trunk/prime-showcase/src/main/webapp/ui/tooltipStyling.xhtml?r=1434
As you can see there, you can apply some styling by using some css classes.
Also this is the migration guide for 3.0.M4(RC1): http://wiki.primefaces.org/display/General/Migration+Guide+to+3.0
I know this is old, but you can also go the way of overriding certain CSS properties by using style definitions with higher precedence in your general CSS file. I described this in more detail here. Colors, borders and paddings are no problem, however, the position is rather tricky as PrimeFaces places the tooltips as divs outside the normal structure and the apparently uses some computed absolute positioning to place them.
Related
I want to apply some different styles to HTML elements giving them custom classes for which I will write different CSS style rules.
I'd like to do like:
<p class="padding-top-15">
And then have CSS rules where top and 15 are just identifiers.
For example I'd like my CSS to be like:
.padding-$identifier1-$identifier2 {
padding-$identifier1: $identifier2 px;
}
Is this even possible with CSS3?
No, you cannot. There is nothing even remotely like that in CSS.
Try asking a new question where you explain what you wish to accomplish, instead of presenting an invented syntax to solve an unspecified problem. Note that if it occurred to you use a class name like padding-top-15, you have probably misunderstood some basic ideas of CSS. Think how confusing things will be if you later decide to change the top padding of that class to a top margin of 10px.
I've found that my ng-class is overwritten when used inside an ng-repeat by the Foundation framework that I'm using. The code is relatively simple:
<tr ng-repeat="goal in goals" ng-class="goal.difficulty">
I can see the class being applied in chrome dev tools, but it is overwritten by the tables.scss styles of
tables tr:nth-of-type(even)
I have my CSS after the foundation one, so I'm somewhat at a loss as to how this happens.
Edit:
Since people don't believe it's being overwritten here is an image (you can also check out the project from Github)
http://imgur.com/BtQjInF
https://github.com/OrganicCat/goal-tracker
Try putting !important at the end of your class style definitions so that they override foundation.
That is not a solution, but it indicates that your styling is clashing with zurb. The correct answer then would be to remove the default table styling from zurb using sass, in particular:
// These control the background color for the table and even rows
$table-bg: $white;
$table-even-row-bg: $snow;
http://foundation.zurb.com/docs/components/tables.html
I do not believe the class is not being applied to the element (unless you post up some rendered html showing otherwise).
While applying css I am getting the desired result without the use of the position property i.e:-
position:relative; or
position:absolute; etc...
But, I am a bit worried - is this the right way?
I mean, is applying position property for styling with css considered a good practice?
Thanks
Whether it is best to style the position property depends on your specific situation. If you have need to take elements out of the flow of the page, then you may want to use it.
But no, the position property is definitely not mandatory.
If you have styled your page without using position - and your satisfied that it is fully functional, there's nothing wrong with that.
Read about positioning to properly understand when to and why we change it from the default.
No. For the vast majority of things, position: static (the default) is fine.
Other positioning schemes should be used with a light touch. You can achieve some very powerful effects with them, but for most purposes such things are not needed, and used improperly they can create very fragile layouts.
Going by the CSS tutorial here:
http://www.w3schools.com/css/css_positioning.asp
They are good if you wish to affect the positioning of the image, for example if you need to move it slightly or position it next to another image.
more reading can be found here with examples:
http://quirksmode.org/css/css2/position.html
Personally I always position them, but I do not think it matters
Every element is static positioned by default
You cannot use z-index:property without the position property
You will not get the desired effect for z-index,if you are not specifying any of the position properties(relative,absolute,fixed)
left/right/top/bottom/z-index have no effect on a static positioned element.
NOTE:Just spend a few minutes here too position
I'm trying to style a post on an internet forum that doesn't allow stylesheets, only inline styles. But it seems that inline styles don't get inherited by children, only the text immediately below (for instance using <h1> will remove the background color from the text). Is there any way to make it pass the styles down without having to add them to every node?
although #SimeVidas is right, I think his response was a bit quick. Some caution do is required. I updated his fiddle http://jsfiddle.net/fRpQ2/4/ to demonstrate.
If a specific property is declared in the stylesheet for a given tag, that value will NOT be inherited from the parent with the inline style. I guess this is what you are encountering on the forum post you try to style. Nothing to do about this without using style-tags or linked stylesheets. Just a lot of copying required in your case I'm afraid. You could also inspect the site and apply existing classes to your post, but that is only if you want to copy the styling they already apply wich i doubt is the case.
I would advice you to do some reading on the cascading order of styles if you want to learn more.
couldn't you just also define a <style> block if the forum parses html?
I implement the Eric Meyer's reset.css in my website, and works great, but it was a little problem. As this a CMS users are free to format the content of their articles as they want and the reset CSS resets the formatting of their text.
Any ideas how we can prevent reset.css inheritance to propagate to the dynamic content?
All you input is more than welcome.
It will always propagate (that's kind of the point of reset.css :)), but if you're not already doing so, you should of course make sure that reset.css is the first stylesheet linked in your pages - any custom styles will then override the reset styles.
If the problem is that the styles are "too reset" and you'd like a more sensible set of defaults (e.g. weighted font sizes, margins, line-height etc.) for your dynamic content you could create your own baseline CSS styles and apply them only to the dynamic content area using an ID selector for example.
As Eric Meyer himself says on his CSS Reset page:
The reset styles given here are
intentionally very generic. There
isn't any default color or background
set for the body element, for example.
I don't particularly recommend that
you just use this in its unaltered
state in your own projects. It should
be tweaked, edited, extended, and
otherwise tuned to match your specific
reset baseline. Fill in your preferred
colors for the page, links, and so on.
In other words, this is a starting
point, not a self-contained black box
of no-touchiness.
By the looks of it, you're finding that the CSS Reset is doing a bit too much for you. I would therefore tweak it for the items you're experiencing problems with. For example, as you're experiencing problems with tables, I would either remove the parts of the CSS reset that target tables, thus leaving it at the browser default, or add extra CSS of your own after the reset to specifically style tables your own way.
I've had problems like that, my solution for that was to wrap the dynamic content generated by WYSIWYG editors, into a div with a unique class, where to that class I've created a reset style sheet with standard attributes!
Ex.:
div.wrap_to_prevent {style, style,
style}
div.wrap_to_prevent input,
div.wrap_to_prevent textarea,
div.wrap_to_prevent h1 {style, style,
style}
.
.
etc
Basically, I've used a reset style sheet, but preceded all css style's with the class of my div, that way, it just affects the code inside that div, thus creating a brand new set of rules for that content.
Since 90% of my projects use WYSIWYG editors, with this solution I was able to work around that same problem...
Can't tell if this works for you, but give it a try!!
Does the CMS create inline styles? If so these should override the styles from the reset.css file.
If the CMS includes it's own .css file, make sure that it appears after the reset.css file in your generated html output.
If you need to use the css reset, the only reliable way to work around this is to use an iframe element for the dynamic content. The main problem with iframe s is that they can't be automatically adjusted in height according to the inlying document's size. If you can work around that, I'd say this is the most hassle-free approach.