Recent
Categories
View Replies (7)

readmore button - Letterpress

0
Votes
Undo
  1. kelsjens
    kelsjens
  3. Commercial Templates
  4. Tuesday, 11 February 2014
  5.  Subscribe via email
Hi there,
I am using the letterpress template, but I want to change the readmore button styling.
I tried replacing the code in nexus.css, but it envelopes the existing button with my new button style.
I also want to remove the right chevron. Using a css inspector, I can see there is a span class associated with the readmore button. But I'm not sure where that lives.
Thanks for your help.
Responses (7)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Would you have a URL to an example of your read more button and details on you would like to change it?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
kelsjens
kelsjens
Accepted Answer Pending Moderation
0
Votes
Undo
Hi! Thanks for answering my post.
Here's the original readmore button: http://demo.joomla51.com/0102/index.php/j-stuff/category-blog
And I'd like to take away the > image (right chevron) and replace the gray style with something like this (only because it matches my styling better): http://www.bestcssbuttongenerator.com/#/LkN1KioBhx
I can copy the code for the new button, but I don't know where to put it :dry:
Thanks for your help!
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

Could you try adding the following to the Custom CSS field of your templates parameters...


.readmore .btn {

    background: none repeat scroll 0 0 #44C767 !important;

    border-radius: 20px;

    padding: 12px 20px;

}

.readmore .btn .icon-chevron-right {

    display: none;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
kelsjens
kelsjens
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,
That code did change the appearance of the button, but it loses the effects when hovered over. Do you have another solution?
This is the full code for the new button I'd like:

<a href="#" class="myButton">olive</a>

.myButton {
-moz-box-shadow:inset 0px 0px 14px -3px #f2fadc;
-webkit-box-shadow:inset 0px 0px 14px -3px #f2fadc;
box-shadow:inset 0px 0px 14px -3px #f2fadc;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dbe6c4), color-stop(1, #9ba892));
background:-moz-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);
background:-webkit-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);
background:-o-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);
background:-ms-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);
background:linear-gradient(to bottom, #dbe6c4 5%, #9ba892 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dbe6c4', endColorstr='#9ba892',GradientType=0);
background-color:#dbe6c4;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #b2b8ad;
display:inline-block;
cursor:pointer;
color:#757d6f;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ced9bf;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #9ba892), color-stop(1, #dbe6c4));
background:-moz-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);
background:-webkit-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);
background:-o-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);
background:-ms-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);
background:linear-gradient(to bottom, #9ba892 5%, #dbe6c4 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9ba892', endColorstr='#dbe6c4',GradientType=0);
background-color:#9ba892;
}
.myButton:active {
position:relative;
top:1px;
}
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
To include your hover styling try also adding the following to your Custom CSS field...


.readmore .btn:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #9ba892), color-stop(1, #dbe6c4));

background:-moz-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);

background:-webkit-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);

background:-o-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);

background:-ms-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);

background:linear-gradient(to bottom, #9ba892 5%, #dbe6c4 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9ba892', endColorstr='#dbe6c4',GradientType=0);

background-color:#9ba892;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
kelsjens
kelsjens
Accepted Answer Pending Moderation
0
Votes
Undo
Hello again,

Almost got it - the hover code alone works.... what would the code be for that button I want (given the big long code above)?
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Have you tried simply posting your CSS as is using the read more button selector (.readmore .btn)?

Eg.


.readmore .btn {

-moz-box-shadow:inset 0px 0px 14px -3px #f2fadc;

-webkit-box-shadow:inset 0px 0px 14px -3px #f2fadc;

box-shadow:inset 0px 0px 14px -3px #f2fadc;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dbe6c4), color-stop(1, #9ba892));

background:-moz-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);

background:-webkit-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);

background:-o-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);

background:-ms-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);

background:linear-gradient(to bottom, #dbe6c4 5%, #9ba892 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dbe6c4', endColorstr='#9ba892',GradientType=0);

background-color:#dbe6c4;

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

border:1px solid #b2b8ad;

display:inline-block;

cursor:pointer;

color:#757d6f;

font-family:arial;

font-size:15px;

font-weight:bold;

padding:6px 24px;

text-decoration:none;

text-shadow:0px 1px 0px #ced9bf;

}

.readmore .btn:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #9ba892), color-stop(1, #dbe6c4));

background:-moz-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);

background:-webkit-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);

background:-o-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);

background:-ms-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);

background:linear-gradient(to bottom, #9ba892 5%, #dbe6c4 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9ba892', endColorstr='#dbe6c4',GradientType=0);

background-color:#9ba892;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 7
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok