Post by IcyFrosty » Thu Oct 22, 2015 11:08 pm

Hi,

I have installed a new theme for my website but found out that the Page Navigation at the bottom of the page is still using the default blue color from the default theme, which does not fit in with the new theme colour scheme at all. How can I change this color? I looked through the whole stylesheet.css but could not find the right lines to edit that can change this color.

Thanks!!

Newbie

Posts

Joined
Thu Oct 22, 2015 11:04 pm

Post by IcyFrosty » Fri Oct 23, 2015 12:05 am

This is the screen shot of how the page navigation controls are looking in my current website.

Attachments

Screen Shot 2015-10-20 at 6.33.19 pm.png

Screen Shot 2015-10-20 at 6.33.19 pm.png (134.32 KiB) Viewed 1330 times


Newbie

Posts

Joined
Thu Oct 22, 2015 11:04 pm

Post by uksitebuilder » Fri Oct 23, 2015 12:27 am

If you know how to use firebug (or right-click Inspect Element), it will give you the CSS ID or Class and which file it is in.

If not, post up a URL to that page

User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by IcyFrosty » Fri Oct 23, 2015 2:59 pm

Thank you so much for responding!!

Yes, I did an Inspect Element and the page buttons should be class=pagination, but I am still unable to find change or add any colour change to the "pagination" in stylesheet.css. Do I need to edit bootstrap css file instead?

The URL to the website is http://thewinestable.com.sg/The-Wine-Stable,White-wines,

Newbie

Posts

Joined
Thu Oct 22, 2015 11:04 pm

Post by uksitebuilder » Fri Oct 23, 2015 3:12 pm

Try popping these styles in your stylesheet.css file and edit to suit

Code: Select all

.pagination > li:first-child > a, .pagination > li:first-child > span {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    margin-left: 0;
}
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    background-color: #337ab7;
    border-color: #337ab7;
    color: #fff;
    cursor: default;
    z-index: 2;
}
.pagination > li > a, .pagination > li > span {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #337ab7;
    float: left;
    line-height: 1.42857;
    margin-left: -1px;
    padding: 6px 12px;
    position: relative;
    text-decoration: none;
}

User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by IcyFrosty » Sat Oct 24, 2015 11:25 pm

It works!!!! Thank you so much, you are brilliant!!!! :-* :-* :-* :-* :-*

Newbie

Posts

Joined
Thu Oct 22, 2015 11:04 pm
Who is online

Users browsing this forum: No registered users and 5 guests