Support Forum

Advanced Search
Forum Scope


Match



Forum Options



Minimum search word length is 3 characters - maximum search word length is 84 characters
coding-topic
Modifying a.spButton .css
Avatar
Bart C.
New Jersey, USA
Member
Free Members
sp_UserOfflineSmall Offline
Oct 5, 2014 - 4:27 pm

Hi folks,

When I inspect the code for the a.spButton I find this

#spMainContainer a.spButton {
    width: auto;
    height: 21px;
    text-align: center;
    line-height: 1.6em;
    padding: 1px 7px;
    margin: 2px;
    font-size: 100%;
    font-family: inherit;
    outline-style: none;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    background: -moz-linear-gradient(100% 100% 90deg, #CFDFEE, #F9FBFC) repeat scroll 0% 0% #F9FBFC;
    border: 1px solid #0075B0;
    border-radius: 5px;
}

But when I go to the .css file to modify the background colors I find this

#spMainContainer a.spButton {
    width: auto;
    height: 21px;
    text-align: center;
    line-height: 1.6em;
    padding: 1px 7px;
    margin: 2px 2px;
    font-size: 100%;
    font-family: inherit;
    outline-style: none;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    background: -moz-linear-gradient(100% 100% 90deg, #cfdfee, #f9fbfc);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9fbfc), to(#cfdfee));
    background: -ms-linear-gradient(top, #f9fbfc 0%,#cfdfee 100%);
    background: -o-linear-gradient(top, #f9fbfc 0%,#cfdfee 100%);
    background: linear-gradient(top, #f9fbfc, #cfdfee);
    background-color: #f9fbfc;
    border: 1px solid #0075B0;
    -webkit-border-radius: 5px; border-radius: 5px;
}

Why are there so many lines regarding the background?  For browser compatibility? 

If I'm going to use a solid background with no gradients can I delete all of the background lines and put something like this in their place

background-color: 93A0AF;

and leave it at that?

Thanks,

Bart

Avatar
Ike
Sawtry, UK
Member
Free Members
sp_UserOfflineSmall Offline
Oct 5, 2014 - 4:34 pm

Hey Bart,

Sure.. Basically we put the rules in place as people will be using various browsers, and various versions of browsers that require different rules, so they are really there just in case. The reason you only see one background call in the inspection is because the browser picks the most relevant one and disregards the rest.

However, using 'background:' and just going with a straight colour is safe all round. I think background-color works the same, but 'background' is definitely recognised in all browsers. Something like:

background: 93a0af;

Avatar
Bart C.
New Jersey, USA
Member
Free Members
sp_UserOfflineSmall Offline
Oct 5, 2014 - 7:14 pm

ok, thanks Ike.  I tried commenting the unneeded stuff out and it worked so I'm onto the next problem.  :)

Avatar
Mr Papa
Simi Valley, CA
SP Master
Free Members
sp_UserOfflineSmall Offline
Oct 5, 2014 - 7:59 pm

good to hear... thanks for the update...

Forum Timezone: Europe/Stockholm
Most Users Ever Online: 1170
Currently Online:
Guest(s) 1
Currently Browsing this Page:
1 Guest(s)
Top Posters:
Mr Papa: 19448
Ike: 2086
Brandon: 864
kvr28: 804
jim: 650
FidoSysop: 577
Conrad_Farlow: 531
fiddlerman: 358
Stefano Prete: 325
Member Stats:
Guest Posters: 619
Members: 17363
Moderators: 0
Admins: 4
Forum Stats:
Groups: 7
Forums: 17
Topics: 10127
Posts: 79625