Special class to style link like button
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 79
- Joined: 25 Mar 2013, 13:00
@Aragorn have answered me about this in Sentinel Theme http://forum.primefaces.org/viewtopic.p ... 97#p145479, but the class he created doesn't work in Omega. Can someone help me?
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please try;
Code: Select all
<style type="text/css">
.MyLink.ui-link {
color: #ffffff !important;
background: #2399e5;
border: 1px solid #1f89ce;
border-radius: 3px;
}
.MyLink.ui-button-text {
text-decoration: none;
font-family: "latoregular","Trebuchet MS",Arial,Helvetica,sans-serif;
font-size: 1em; /* you can change this value 1em or 90% */
font-weight: bold;
padding: 0.45em 1em 0.3em 0.55em;
}
.MyLink.ui-button-icon-only {
padding: 0.3em 0 0.3em 0.6em;
width: 1.65em;
}
.MyLink.ui-button-text:hover,
.MyLink.ui-button-text:focus{
background: #1f89ce;
border: 1px solid #156090;
outline: 0 none;
}
.MyLink.ui-button-text:active {
background: #186ba0;
border: 1px solid #156090;
}
.MyLink.fa::before{
display: inline-block;
font-family: "FontAwesome";
color: #ffffff !important;
}
.MyLink.fa::before{
margin-right: 8px; /* you can change this value */
}
.ui-fluid .MyLink.fa::before{
margin-right: 48%; /* you can change this value */
}
.ui-fluid .MyLink.ui-button-icon-only.fa::before {
padding-left: 49%; /* you can change this value */
}
.ui-fluid .MyLink.ui-link {
box-sizing: border-box;
width: 100%;
}
</style>
<h:outputText value="CommandButton:" />
<p:commandButton icon="fa fa-home" value="test" />
<h:outputText value="Link:" />
<p:link styleClass="ui-button-text MyLink fa fa-home" value="test" />
<h:outputText value="CommandButton(Only icon):" />
<p:commandButton icon="fa fa-home" />
<h:outputText value="Link(Only icon):" />
<p:link styleClass="ui-button-text MyLink fa fa-home ui-button-icon-only" />
Github Profile: https://github.com/mertsincan
-
- Posts: 79
- Joined: 25 Mar 2013, 13:00
Working, thank you.aragorn wrote:Please try;Code: Select all
<style type="text/css"> .MyLink.ui-link { color: #ffffff !important; background: #2399e5; border: 1px solid #1f89ce; border-radius: 3px; } .MyLink.ui-button-text { text-decoration: none; font-family: "latoregular","Trebuchet MS",Arial,Helvetica,sans-serif; font-size: 1em; /* you can change this value 1em or 90% */ font-weight: bold; padding: 0.45em 1em 0.3em 0.55em; } .MyLink.ui-button-icon-only { padding: 0.3em 0 0.3em 0.6em; width: 1.65em; } .MyLink.ui-button-text:hover, .MyLink.ui-button-text:focus{ background: #1f89ce; border: 1px solid #156090; outline: 0 none; } .MyLink.ui-button-text:active { background: #186ba0; border: 1px solid #156090; } .MyLink.fa::before{ display: inline-block; font-family: "FontAwesome"; color: #ffffff !important; } .MyLink.fa::before{ margin-right: 8px; /* you can change this value */ } .ui-fluid .MyLink.fa::before{ margin-right: 48%; /* you can change this value */ } .ui-fluid .MyLink.ui-button-icon-only.fa::before { padding-left: 49%; /* you can change this value */ } .ui-fluid .MyLink.ui-link { box-sizing: border-box; width: 100%; } </style> <h:outputText value="CommandButton:" /> <p:commandButton icon="fa fa-home" value="test" /> <h:outputText value="Link:" /> <p:link styleClass="ui-button-text MyLink fa fa-home" value="test" /> <h:outputText value="CommandButton(Only icon):" /> <p:commandButton icon="fa fa-home" /> <h:outputText value="Link(Only icon):" /> <p:link styleClass="ui-button-text MyLink fa fa-home ui-button-icon-only" />
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Glad to hear, thanks for the update
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 4 guests