[PREV] and [NEXT]

hi guys
on the template when i use the page break system, the prev and next show only as text... is it possible to have them as buttons / styled to look good with the template?

sample page:
http://guidetogay.com/travel/2003-nyc-s ... -must-do-s

Hello,

You can change the pagebreak style in the content -pagebreak plugin settings

Hello,

You can change the pagebreak style in the content -pagebreak plugin settings

yeah - thats not what i was asking.... the "prev and next" appears as text .... in other templates, it appears as buttons. i would like them to appear as buttons.... its a css issue i gather?

Please open file css/joomla.css and please change the following fragment:

Code: Select all

button,
.button,
input.button,
span.button,
button.button,
div.button,
input[type="submit"],
input[type="button"],
.pagenav-prev a,
.pagenav-next a,
li.previous a,
li.next a,
.readon,
#gkMainbody .itemReadMore,
#gkMainbody .readmore > a,
.button.invert:active,
.button.invert:focus,
.button.invert:hover {
   -webkit-appearance: none;
   background: #eb1e00;
   border: none;
   color: #fff;
   cursor: pointer;
   display: block;
   float: left;
   font-size: 12px;
   height: 38px;
   line-height: 39px;
   margin: 0 5px 2px 2px;
   padding: 0 14px;
   text-align: center;
   text-transform: uppercase;
   transition: all 0.3s ease-out 0s;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
}
button:hover,
.button:hover,
input.button:hover,
span.button:hover,
button.button:hover,
div.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.pagenav-prev a:hover,
.pagenav-next a:hover,
li.next a:hover,
li.previous a:hover,
.readon:hover,
#gkMainbody .itemReadMore:active,
#gkMainbody .itemReadMore:focus,
#gkMainbody .itemReadMore:hover,
#gkMainbody .readmore > a:active,
#gkMainbody .readmore > a:focus,
#gkMainbody .readmore > a:hover,
.button.invert,
.gkShowCart a:hover {
   background: #222;
}

to:

Code: Select all

button,
.button,
input.button,
span.button,
button.button,
div.button,
input[type="submit"],
input[type="button"],
.pagenav-prev a,
.pagenav-next a,
li.previous a,
li.next a,
.readon,
#gkMainbody .itemReadMore,
#gkMainbody .readmore > a,
.button.invert:active,
.button.invert:focus,
.button.invert:hover,
.pager li {
   -webkit-appearance: none;
   background: #eb1e00;
   border: none;
   color: #fff;
   cursor: pointer;
   display: block;
   float: left;
   font-size: 12px;
   height: 38px;
   line-height: 39px;
   margin: 0 5px 2px 2px;
   padding: 0 14px;
   text-align: center;
   text-transform: uppercase;
   transition: all 0.3s ease-out 0s;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
}
button:hover,
.button:hover,
input.button:hover,
span.button:hover,
button.button:hover,
div.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.pagenav-prev a:hover,
.pagenav-next a:hover,
li.next a:hover,
li.previous a:hover,
.readon:hover,
#gkMainbody .itemReadMore:active,
#gkMainbody .itemReadMore:focus,
#gkMainbody .itemReadMore:hover,
#gkMainbody .readmore > a:active,
#gkMainbody .readmore > a:focus,
#gkMainbody .readmore > a:hover,
.button.invert,
.gkShowCart a:hover,
.pager li:hover {
   background: #222;
}
.pager li a {
   color: #fff;
}

thanks so much! worked perfectly!

Please open file css/joomla.css and please change the following fragment:

Code: Select all

button,
.button,
input.button,
span.button,
button.button,
div.button,
input[type="submit"],
input[type="button"],
.pagenav-prev a,
.pagenav-next a,
li.previous a,
li.next a,
.readon,
#gkMainbody .itemReadMore,
#gkMainbody .readmore > a,
.button.invert:active,
.button.invert:focus,
.button.invert:hover {
   -webkit-appearance: none;
   background: #eb1e00;
   border: none;
   color: #fff;
   cursor: pointer;
   display: block;
   float: left;
   font-size: 12px;
   height: 38px;
   line-height: 39px;
   margin: 0 5px 2px 2px;
   padding: 0 14px;
   text-align: center;
   text-transform: uppercase;
   transition: all 0.3s ease-out 0s;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
}
button:hover,
.button:hover,
input.button:hover,
span.button:hover,
button.button:hover,
div.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.pagenav-prev a:hover,
.pagenav-next a:hover,
li.next a:hover,
li.previous a:hover,
.readon:hover,
#gkMainbody .itemReadMore:active,
#gkMainbody .itemReadMore:focus,
#gkMainbody .itemReadMore:hover,
#gkMainbody .readmore > a:active,
#gkMainbody .readmore > a:focus,
#gkMainbody .readmore > a:hover,
.button.invert,
.gkShowCart a:hover {
   background: #222;
}

to:

Code: Select all

button,
.button,
input.button,
span.button,
button.button,
div.button,
input[type="submit"],
input[type="button"],
.pagenav-prev a,
.pagenav-next a,
li.previous a,
li.next a,
.readon,
#gkMainbody .itemReadMore,
#gkMainbody .readmore > a,
.button.invert:active,
.button.invert:focus,
.button.invert:hover,
.pager li {
   -webkit-appearance: none;
   background: #eb1e00;
   border: none;
   color: #fff;
   cursor: pointer;
   display: block;
   float: left;
   font-size: 12px;
   height: 38px;
   line-height: 39px;
   margin: 0 5px 2px 2px;
   padding: 0 14px;
   text-align: center;
   text-transform: uppercase;
   transition: all 0.3s ease-out 0s;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
}
button:hover,
.button:hover,
input.button:hover,
span.button:hover,
button.button:hover,
div.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.pagenav-prev a:hover,
.pagenav-next a:hover,
li.next a:hover,
li.previous a:hover,
.readon:hover,
#gkMainbody .itemReadMore:active,
#gkMainbody .itemReadMore:focus,
#gkMainbody .itemReadMore:hover,
#gkMainbody .readmore > a:active,
#gkMainbody .readmore > a:focus,
#gkMainbody .readmore > a:hover,
.button.invert,
.gkShowCart a:hover,
.pager li:hover {
   background: #222;
}
.pager li a {
   color: #fff;
}