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" />
Related
I am looking for a way to change the background for a specific mat label.
For example I want to change the background color for content 1
<mat-tab-group>
<mat-tab label="First" class="test">Content 1</mat-tab>
<mat-tab label="Second">Content 2</mat-tab>
<mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>
Thanks in advance !!
One way to change background-color(It can be any style), is to use
::ng-deep
Example:
::ng-deep .mat-tab-label {
background-color: red;
}
What ::ng-deep does is, it disables View Encapsulation for the specified component.
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.
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/
How can I change my tool-tip so that it has a working auto width. I think the problem is at the relative position of the link.
See here my problem http://jsfiddle.net/kzJRW/
How can I fix this and the tooltip works still as I defined.
Thanks for your help!
http://jsfiddle.net/kzJRW/13/
The white-space property helps not break words. I also rearranged some of your declarations, non-changing values such as layout positioning and box-shadow colors don't need to be declared in the :hover pseudo-class.
#shub; you need to just write white-space:nowrap;
like this:
.tooltip span {
margin-left: -999em;
position: absolute;
white-space:nowrap;
}
example http://jsfiddle.net/sandeep/kzJRW/14/
in a tag along with position:relative give display:block
Check this:
http://jsfiddle.net/kzJRW/9/