Version :
Apache MyFaces 2.1.14
Rich Faces 4.3.5
Issue :
We are migrating from JSF1.2 to JSF2. The issue is the style for headerClass is not getting applied correctly for rich:dataTable.
When debugged , it seems that rich faces overrides the headerClass style with its own styles.
The syle selector .rf-dt-hdr-c of rich faces overrides the custom style sheet selector.
(We want to replace the colour of header with custom header image)
Finally , when rich faces supplied style (.rf-dt-hdr-c) is overriden like shown in code below , it worked.
But since it is rich faces built in style , it will be applied to every rich:dataTable which may not be a good option.
The approch as shown here which is similar , is not working here since there is no provision to combine custom style with built in one.
Is there any better approach available to solve this issue ?
Is there any way custom style can be applied alongwith .rf-dt-hdr-c so that it won't effect globally ?
Please help.
Code :
Rich data Table snippet :
<rich:dataTable id="admin" headerClass="richTableHeader1" styleClass="richDataTable1" rowClasses="evenRow,oddRow"
columnClasses="columnRow" value="#{bean.list}" var="val">
Styles :
.richDataTable1{
width:100%;
}
<!-- this is the headerClass style used to apply custom image (not working )-->
.richTableHeader1{
background-image:url(../images/heading1.gif) !important;
background-color: #FFFFFF !important;
}
<!-- rich faces applied style overriden (working )-->
.rf-dt-hdr-c{
background-image:url(../images/heading1.gif) !important;
background-color: #FFFFFF !important;
}
This is a table header:
<thead id="form:j_idt10:th" class="rf-dt-thd">
<tr id="form:j_idt10:h" class="rf-dt-hdr">
<th class="rf-dt-hdr-c" colspan="2" scope="colgroup">Table</th>
</tr>
</thead>
#headerClass is applied to the tr.rf-dt-hdr element. So you have to change your definition to
.richTableHeader1 th {
background-image:url(../images/heading1.gif) !important;
background-color: #FFFFFF !important;
}
Alternatively you can use #headerCellClass, it is not a documented feature but it works.
Related
This is for terms&condition kind of page where there is checkbox next to the term. I dont know how to change the checkbox shape and it still stuck as a blue square. Please help, thank you
I would update the style by applying a classname to the Checkbox and changing the CSS.
Something like:
// style.css
.ant-checkbox.foo span.ant-checkbox-inner {
background-color: hotpink;
border-radius: 50%;
}
// jsx
<Checkbox className="foo" />
I am trying to overwrite mat-form-field styles using ::ng-deep .mat-form-field**. But I read that it would be deprecated soon.
I overrode some styles using ::ng-deep and it partially solves my need. But I also want to use default mat-form-field in some cases.
In my case I decreased height and removed extra padding at bottom for hint as I need to use dense fields in form and having hint padding adds scroll bars.
But I have some dialogs where I can use default mat-form-field and use mat-hint like normal.
I have the below styling in a scss file and I import this file into my component scss using #import
::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-label-wrapper { top: -1.5em;}
::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
transform: translateY(-1.1em) scale(.75);
}
::ng-deep .mat-form-field-wrapper{
padding-bottom: 0;
}
Can someone suggest a way to be able to use both styles, like extending mat-form-field and customizing it in applying for my dense form and using mat-form-field normally at other places?
I saw that the Material Team uses attributes like dense for the mat-lists. So, you can have a global customization in your styles.scss like:
.mat-form-field[dense] {
.mat-form-field-flex > .mat-form-field-infix {
padding: 0.4em 0px !important;
}
.mat-form-field-label-wrapper {
top: -1.5em;
}
&.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
transform: translateY(-1.1em) scale(.75);
}
.mat-form-field-wrapper{
padding-bottom: 0;
}
}
and just add the attribute to your fields:
<mat-form-field dense ...
This kind of atttibutes can be considered as "component variants", and some CSS methodologies suggest to define a class for it like .mat-form-field-dense but I like the attributes approach better :)
Edit: If you want to include this kind of deep customization in your component, you need to disable the encapsulation including:
#Component({
...
encapsulation: ViewEncapsulation.None
})
that will tell Angular to not mark your Component Styles with an attribute that encapsulates your styles to work only with your component elements, and not interfer with another components sub-elements. Please refer to the Angular Styles official documentation if you want to know how it works ;)
In SMACSS where should I be defining colours?
I have defined my base font in the base\base.css for the general content, but my footer requires a different coloured font.
Should I be declaring this in my layout/footer.css so it can cascade down to the components, like so:
.l-footer {
background: #333333;
margin: auto;
color: #FFFFFF; /* Here ? */
}
or, at the module level of the actual component which resides inside the footer in modules/testimonial.css.
.testimonial {
color: #FFFFFF; /* Or here ? */
}
Is there any documentation or links that discuss this?
Thanks so much.
If i were you i would use THEME for such tasks. You define BASE, colors, background and so on, then attach THEME classes (theme.css):
.l-footer {
color: #FFFFFF;
}
More info about THEME rules type
Theme Rules - are things like your page background, typography, colors, etc. This is another area I often pass on, except for when I need to override theme elements for different pages. An example of this would be maybe a content-type that has a different style in order to set it apart from the rest of the site. So if your page has a white background - body {background: #fff;} but on blog pages it should be gray, I’d use a theme rule to overwrite my base rule - .node-type-blog {background: #ccc;}
See more at: https://dev.acquia.com/blog/organize-your-styles-introduction-smacss
I am new to using syntaxhighlighter. I am using there latest version 3.0.83. Can some one help how to customize the color of comments, header, etc ?
I am using < pre class="brush: c"> for coding style.
The easiest solution would be to override the CSS rules for comments, but they're marked as !important so you have to do a little extra work.
Open your shBrushCpp.js file. Down towards the bottom there's a set of regular expression rules paired with a css property. Those values correspond to class names in shThemeDefault.css (or whatever theme you're using).
Copy your theme file to something like shThemeCustom.css or whatever you want. Include this file on your page instead of the original theme. From here, you can change whatever you want. Just reference the CSS rules from the brush file against your custom theme to know what needs to be changed.
In case you don't have full control over the .css or .js files, as is my case (since I followed these instructions here and am using Alex Gorbatchev's hosted files instead), there is still a way to override the !important parameter.
You can customize any of the settings shown here (http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css), for example, as follows:
With the default theme, this HTML...
<pre class="brush:cpp" title="test code">
int myFunc()
{
//do something
return 1;
}
</pre>
...yields this result:
Looking here (http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css), I can see the parameters I am currently using. For example, it contains:
.syntaxhighlighter {
background-color: white !important;
}
.syntaxhighlighter .line.alt1 {
background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
background-color: white !important;
}
...
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
color: #008200 !important;
}
In order from top to bottom, as shown just above, my header background color is white and my alternating code lines 1 and 2 are both white. Comments are green (#008200). Let's change all of that. Add the following code to your blogger template, at the very end of your header, just above </head>:
<style type='text/css'>
.syntaxhighlighter {
max-height: 550px;
background-color: #ff0000 !important;
overflow-y: auto !important;
overflow-x: auto !important;
}
.syntaxhighlighter .line.alt1 {
background-color: #99ff99 !important;
}
.syntaxhighlighter .line.alt2 {
background-color: #99ff99 !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
color: #000082 !important;
font-weight: bold !important;
}
</style>
Now, I have set my max-heightto 550 pixels (make a really long code block and you'll see it constrained to this height now, with a vertical slider to see it all), my header background color is red (#ff0000), my code background color (both alternating lines) is light green (#99ff99), and my comments are blue (#000082) and bold. Follow this format to customize anything you see in your .css theme file--example, for me, here: http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css.
Here is my final result--very different from the default look above:
Note that the font-weight parameter I set is simply a CSS styling you can apply. Many other options exist. See here: http://www.w3schools.com/cssref/pr_font_weight.asp.
is there a way to alter a background when you rollover a link? im making a degree show website and want a large sample image to appear in the background when you rollover the link of persons name. i have an image appearing, however its covering all the text and in a fixed position over the link. is there a way to do this so it just alters the background image and stays behind all the other text on the page?
heres what im working with
#hover_img img
{
display:none;
}
#hover_img:hover img
{
display:block;
position:absolute;
top:0px;
padding-top:0px;
}
html
<div id="hover_img">LINK<img src="image" alt="" /></a></div>
thanks!
** fiddle http://jsfiddle.net/5yhsL/ **
Add z-index: -1 to the image on hover:
#hover_img:hover img
{
display:block;
position:absolute;
top:0px;
padding-top:0px;
z-index: -1;
}
You can accomplish this by putting the text inside another element adjacent to your image element. Absolutely positioned elements will take dominance over their neighbors, and one way you can get around that is by assigning a value to the position property for subsequent elements.
Here is a jsfiddle I've whipped up:
http://jsfiddle.net/93mpW/3/