Page 1 of 1

How do I change the colour of the Pill Menu in Siteground J16-41?

Posted: Thu Sep 29, 2016 1:27 am
by Riff88
Hallo,

How do I change the colour of the Pill Menu in Siteground J16-41?

Thank you.

Re: How do I change the colour of the Pill Menu in Siteground J16-41?

Posted: Thu Sep 29, 2016 6:32 am
by sozzled
What does the colour of the pill menu look like on your website? A link to your website would be helpful.

Alternatively, you can experiment with different colours using a web designer's tool like Firebug for Firefox.

Re: How do I change the colour of the Pill Menu in Siteground J16-41?

Posted: Sat Oct 01, 2016 2:23 am
by Riff88
sozzled wrote:What does the colour of the pill menu look like on your website? A link to your website would be helpful.

Alternatively, you can experiment with different colours using a web designer's tool like Firebug for Firefox.
sorry, it's www.stemcellsforriaan.co.za

Re: How do I change the colour of the Pill Menu in Siteground J16-41?

Posted: Sat Oct 01, 2016 7:19 am
by sozzled
Do you want to change the background colour only, or do you want to change the font colour only, or do you want to change both the background colour and the font colour?

Re: How do I change the colour of the Pill Menu in Siteground J16-41?

Posted: Sat Oct 01, 2016 8:09 am
by Riff88
sozzled wrote:Do you want to change the background colour only, or do you want to change the font colour only, or do you want to change both the background colour and the font colour?
I just want to change the background - the green area.

Re: How do I change the colour of the Pill Menu in Siteground J16-41?

Posted: Sat Oct 01, 2016 8:24 am
by ribo
As i see there are two images and not css colour

Code: Select all

#sgmenu ul.menu li a span {
    background: transparent url("../images/but_r.jpg") no-repeat scroll right center;
    float: left;
    padding: 0 15px 0 5px;

Code: Select all

#sgmenu ul.menu li a, #sgmenu ul.menu li a:link, #sgmenu ul.menu li a:visited {
    background: transparent url("../images/but_l.jpg") no-repeat scroll left center;
    color: #fff;
    cursor: pointer;
    display: block;
    float: left;
    font-family: Tahoma,Verdana,sans-serif;
    font-size: 11px;
    font-weight: 700;
    height: 31px;
    line-height: 31px;
    margin: 0;
    padding: 0 10px;
You must change the backround images

Re: How do I change the colour of the Pill Menu in Siteground J16-41?

Posted: Sat Oct 01, 2016 9:21 am
by sozzled
OK, this is one method to change the background colour. You need to add these CSS rules:

Code: Select all

#sgmenu a {
    padding: 0 !important;
}
#sgmenu a > span {
    background: rgba(0, 0, 0, 0) linear-gradient(#63767a, #293f50) repeat scroll 0 0 !important;
    border-radius: 4px;
    margin-right: 10px;
    padding: 0 10px !important;
}
This will replace the background image with a textured background defined by the values #63767a (top) and #293f50 (bottom). Make sure you test this on several different web-browsers.

If you want to do something a little extra you could also add:

Code: Select all

#sgmenu a > span:hover, #sgmenu li.active > a > span {
    background: rgba(0, 0, 0, 0) linear-gradient(#ebdea7, #ff0000) repeat scroll 0 0 !important;
    text-decoration: none !important;
}

Re: How do I change the colour of the Pill Menu in Siteground J16-41?

Posted: Sun Oct 02, 2016 3:55 am
by Riff88
Thank you very much, sozzled!