Emphasize selected page in Journal style

bokehlover71

The Journal style automatically split up an album into pages with 48 photos in each. Even though it varies a bit with different fonts, it is often very difficult to see which page is selected. I guess there are many ways to emphasize the current page number in the navigation bar, for example with a colored background. Do you have any examples?

denisegoldberg

@bokehlover71 said:
...ways to emphasize the current page number in the navigation bar

I just did a little experimenting using your site. This CSS will emphasize the current page number by making it bold plus setting the font-size to be larger than the other numbers.

Unfortunately I don't know if this CSS will effect other things on the site as I only tested it in isolation on this page on your site - http://www.viknefoto.no/Bilder/.

    .sm-button-skin-submit {  
       font-weight: bold;
       font-size: 125% !important;
      }

bokehlover71

Thanks for the code. It also affects my site's user interface when customizing, but that's not a big problem. How can I get a colored background behind the current page number? I am not very skilled in CSS, but I may be able to experiment a little with different colors if I had a code.

Hikin' Mike

This will show a black circle with a white number on the current page. Remove the border-radius: 50%; if you don't want that.

/**
* Displays Current Page Number
****************************************************************/
.sm-user-ui .sm-pagination{
    margin: 5px 0;
    }   

.sm-user-ui .sm-pagination .sm-button-skin-submit .sm-button-label {
    color: #fff;
    background: #000;
    padding: 0 15px;
    border-radius: 50%;
    }

bokehlover71

Thanks a lot! This may be exactly what I've been looking for!