CSS Stylesheet Fix
$30-250 USD
Paid on delivery
--- PLEASE REFER ATTACHED FILE FOR SAME AS BELOW WITH IMAGES EXPLAINING EVERYTHING MORE CLEARLY ---
I have a requirement for 2 small fixes of a CSS Stylesheet for a ‘navigator bar’ in our site.
1) Basically the navigator buttons have a hover state defined but I can’t seem to exclude the ‘Current’ page which I don’t want to have a change when the pointer is over it. The navigator bar looks like this:
A: This is the normal state.
B: This is the state when mouse is over ‘Previous’. This is correct.
C: This is the state when the mouse is over ‘Current’. This is what should not change state. I.e. should look same as A (Above)
This is the code for the navigator.
<div id="tnt_pagination"><div class="pagination"><p align="center">
<?
for($i=1;$i<=$pn;$i++) {
if($i==1 || $i==$page || $i==($page-1) || $i==($page+1) || $i==$pn) {
$i_rewrite=$i;
if ($i==($page-1)) {$i_rewrite="Previous";}
if ($i==($page+1)) {$i_rewrite="Next";}
if ($i==$pn) {$i_rewrite="Last";}
if ($i==1) {$i_rewrite="First";}
if ($i==$page) {$i_rewrite="Current";}
if($i==$page)
echo " <a class="current" name="current" href="#">".$i_rewrite."</a>";
else
echo " <a href="[url removed, login to view]".$i."" class="prevnext">".$i_rewrite."</a>";
}
}
Here you can see the current applied style on the ‘Current’ button:
2) This is the CSS Style Sheet. The second requirement I have is to clean up this stylesheet.
a. To remove any unneeded entries.
b. To combine .pagination and #tnt_pagination into one if possible.
(Note there is also a default style sheet on the page)
/*This is very sloppy as combines 2 stlye sheets to do the 1 thing. RB */
.pagination{
padding: 2px;
}
.pagination ul{
margin: 0;
padding: 0;
text-align: left; /*Set to "right" to right align pagination interface*/
font-size: 16px;
}
.pagination li{
list-style-type: none;
display: inline;
padding-bottom: 1px;
}
.pagination a, .pagination a:visited{
padding: 0 5px;
border: 1px solid #9aafe5;
text-decoration: none;
color: #2e6ab1;
}
.pagination a:hover, .pagination a:active{
border: 1px solid #2b66a5;
color: #000;
background-color: #FFFF80;
}
.pagination [url removed, login to view]{
background-color: #2e6ab1;
color: #999 !important;
border-color: #2b66a5;
font-weight: bold;
cursor: default;
}
.pagination [url removed, login to view]{
background-color: #2e6ab1;
color: #fff !important;
border-color: #2b66a5;
font-weight: bold;
cursor: default;
}
.pagination [url removed, login to view], .pagination [url removed, login to view]:hover{
background-color: white;
cursor: default;
color: #929292;
border-color: #929292;
font-weight: normal !important;
}
.pagination [url removed, login to view]{
font-weight: bold;
}
#tnt_pagination {
display:block;
text-align:left;
height:22px;
line-height:21px;
clear:both;
padding-top:3px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
#tnt_pagination a:link, #tnt_pagination a:visited{
padding:7px;
padding-top:2px;
padding-bottom:2px;
border:1px solid #EBEBEB;
margin-left:10px;
text-decoration:none;
background-color:#F5F5F5;
color:#0072bc;
width:22px;
font-weight:bold;
}
#tnt_pagination a:hover {
background-color:#DDEEFF;
border:1px solid #BBDDFF;
color:#0072BC;
}
#tnt_pagination .active_tnt_link {
padding:7px;
padding-top:2px;
padding-bottom:2px;
border:1px solid #BBDDFF;
margin-left:10px;
text-decoration:none;
background-color:#DDEEFF;
color:#0072BC;
cursor:default;
}
#tnt_pagination .disabled_tnt_pagination {
padding:7px;
padding-top:2px;
padding-bottom:2px;
border:1px solid #EBEBEB;
margin-left:10px;
text-decoration:none;
background-color:#F5F5F5;
color:#b7b7b7;
cursor:default;
}
This is the default stylesheet (cannot change)
.bgF1F1F1 {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #333333;
text-decoration: none;
background-color: F1F1F1;
}
.input_login {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
background-color: F1F1F1;
padding: 2px;
height: 18px;
width: 147px;
border: 1px solid F26521;
}
.buttonSubmit {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: F26521;
text-decoration: none;
height: 18px;
width: auto;
border: 1px solid F26521;
text-align: center;
vertical-align: text-top;
background-color: #FFFFFF;
}
.bgE1E0E0 {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #333333;
text-decoration: none;
background-color: E1E0E0;
}
[url removed, login to view]:link {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #000000;
text-decoration: none;
}
[url removed, login to view]:hover {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
[url removed, login to view] {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #000000;
text-decoration: none;
}
.NormalFont {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #000000;
text-decoration: none;
}
.bgF1F1F1NormalFont {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
background-color: F1F1F1;
}
.NormalFontBold {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #333333;
text-decoration: none;
}
.NormalFontBoldCC0000 {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #0000cc;
text-decoration: none;
}
[url removed, login to view]:link {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #000000;
text-decoration: none;
}
[url removed, login to view]:hover {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
[url removed, login to view] {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #000000;
text-decoration: none;
}
.NormalFontBoldF26521 {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: F26521;
text-decoration: none;
}
.input_time {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
padding: 2px;
height: 18px;
width: 70px;
border: 1px none;
background-image: url(images/[url removed, login to view]);
}
.input_medium {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
background-color: F1F1F1;
padding: 2px;
height: 18px;
width: 80px;
border: 1px solid F26521;
}
.tableBorder_orange {
border: 1px solid F26521;
}
.NormalFontBoldWhite {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
.input_select {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
background-color: F1F1F1;
padding: 0px;
height: auto;
width: 147px;
border: 1px solid F26521;
}
.input_selecttrans {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
background-color: #F1F1F1;
padding: 0px;
height: auto;
width: 147px;
border: 1px solid #F26521;
}
.input_loginLong {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
background-color: F1F1F1;
padding: 2px;
height: 18px;
width: 195px;
border: 1px solid F26521;
}
.input_comment {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
background-color: F1F1F1;
padding: 2px;
height: 90px;
width: 100%;
border: 1px none;
}
.buttonAuto {
font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: #333333;
text-decoration: none;
background-color: F1F1F1;
padding: 2px;
height: 18px;
width: auto;
border: 1px solid F26521;
text-align: center;
vertical-align: baseline;
}
.BoldHead {
font-family: tahoma;
font-size: 13px;
font-weight: bold;
color: #333333;
text-decoration: none;
}
[url removed, login to view]:link {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #000000;
text-decoration: none;
}
[url removed, login to view]:hover {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #43BDD3;
text-decoration: none;
}
[url removed, login to view] {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #000000;
text-decoration: none;
}
.input_comment65 {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
background-color: F1F1F1;
padding: 2px;
height: 90px;
width: 65%;
border: 1px none;
}
.input_auto {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
padding: 2px;
height: 18px;
width: 97%;
border: 1px none;
background-image: url(images/[url removed, login to view]);
}
.input_auto2 {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
padding: 2px;
height: 18px;
border: 1px none;
background-image: url(images/[url removed, login to view]);
}
.input_auto50 {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
padding: 2px;
height: 18px;
width: 65%;
border: 1px none;
background-image: url(images/[url removed, login to view]);
}
.input_selectShort {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
background-color: F1F1F1;
height: auto;
width: 32px;
border: 1px solid F26521;
}
.input_selectYear {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
background-color: F1F1F1;
height: auto;
width: 60px;
border: 1px solid F26521;
}
[url removed, login to view]:link {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #000000;
text-decoration: none;
}
[url removed, login to view]:hover {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #F26521;
text-decoration: none;
}
[url removed, login to view] {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #000000;
text-decoration: none;
}
[url removed, login to view]:link {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #000000;
text-decoration: none;
}
[url removed, login to view]:hover {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #999999;
text-decoration: none;
}
[url removed, login to view] {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #000000;
text-decoration: none;
}
.input_selectAuto {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
background-color: F1F1F1;
padding: 0px;
height: 18px;
width: 320px;
border: 1px solid F26521;
}
.input_selectAuto2 {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
background-color: F1F1F1;
padding: 0px;
height: 18px;
border: 1px solid F26521;
}
[url removed, login to view]:link {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #000000;
text-decoration: none;
}
[url removed, login to view]:hover {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #999999;
text-decoration: none;
}
[url removed, login to view] {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #000000;
text-decoration: none;
}
.opt2 {
background-color: #FFFFFF
}
option { font-weight: bolder }
.none {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
border: 0px;
height: auto;
background: none;
}
.input_selectAutoT {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
background-color: F1F1F1;
padding: 2px;
height: auto;
width: 65%;
border: 1px solid F26521;
}
.NormalFontAB7A14 {
font-family: tahoma;
font-size: 11px;
font-weight: normal;
color: #AB7A14;
text-decoration: none;
}
.NormalFontAB7A14Bold {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #AB7A14;
text-decoration: none;
}
Project ID: #687334
About the project
Awarded to:
15 freelancers are bidding on average $33 for this job
sir, ready to start.. i am expert in CSS and web2 design.. can fix in 2 hours or i have much better pagination class if you are interested i can show them to you. check PMB
