13 {{ upvoteCount | shortNum }}
13 {{ upvoteCount | shortNum }}

Need Quick CSS Help!

by StewartJ
10 replies
  • WEB DESIGN
    • |
Hi There,

I am trying to customize a theme's "nextpage" function so that pagination doesn't look unappealing.

Basically this is what my nextpage page navigation looks like:



As you see the #2 doesn't have any style. That is what I see when I click on the second page. That third page is has a green background because its css a hover effect (I had my mouse over that link when I took the screenshot)

My goal is to make the active page (which in this case is #2) look like the #3 page which has that green background.

Another example would be this one:



If you see the image above, you can quickly see that you are on page 1. Thats exactly what I want to achieve but with the green background color.

This is my current CSS Code:

Code:
.my-paginated-posts {
font-size:1em; font-weight:700; font-family:arial; padding:0.4em 0.8em; text-align:center; }

.my-paginated-posts p { font-size:1.4em; }

.my-paginated-posts p a {
background:#3C3C3C; color:#FFFFFF; margin-left:0.1em; margin-right:0.1em;
padding:0.4em 1em; text-decoration:none; }

.my-paginated-posts a:hover { color:#fff; background:#A6D501; }
What can I add to my CSS Code to make that "#2 current page link" look like the #1 link in the second image which has a background color different from the other links?

Thank you in advance!
#css #quick
  • Profile picture of the author softwarewarden
    try adding
    Code:
     .my-paginated-posts a:active {background:green;}
 .active {background:green;}
    hum that's only temp you'll need to add only lasts a few seconds.
    so you will need to use javascript or php to change/add the class of the active (current page)
    if you need help editing the files please just let me know.
    {{ DiscussionBoard.errors[8817494].message }}
  • Profile picture of the author StewartJ
    Thank you for the quick response Softwarewarden! .... unfortunately, the appearance remains the same as in the first screenshot after adding the suggested line of code to my style.css file.

    I cleaned my cache to make sure I was not seeing something that wasn't there anymore..
    {{ DiscussionBoard.errors[8817511].message }}
    • Profile picture of the author softwarewarden
      Originally Posted by StewartJ View Post

      Thank you for the quick response Softwarewarden! .... unfortunately, the appearance remains the same as in the first screenshot after adding the suggested line of code to my style.css file.

      I cleaned my cache to make sure I was not seeing something that wasn't there anymore..
      refresh I updated my post.
      {{ DiscussionBoard.errors[8817516].message }}
  • Profile picture of the author softwarewarden
    your site use jquery if so ill give you code that should do it
    {{ DiscussionBoard.errors[8817517].message }}
  • Profile picture of the author StewartJ
    thank you for the help softwarewarden! I just added those lines to my style.css file however; there are no visible changes. This is what my style.css looks like for the pagination section:

    Code:
    .my-paginated-posts {
font-size:1em; font-weight:700; font-family:arial; padding:0.4em 0.8em; text-align:center; }

.my-paginated-posts p { font-size:1.4em; }

.my-paginated-posts p a {
background:#3C3C3C; color:#FFFFFF; margin-left:0.1em; margin-right:0.1em;
padding:0.4em 1em; text-decoration:none; }

.my-paginated-posts a:hover { color:#fff; background:#A6D501; }

.my-paginated-posts a:active {background:green;}
 .active {background:green;}
    This is the custom function which refers to the CSS style above:

    Code:
    function custom_nextpage_links() {
 = array(
'before' => '<div class="my-paginated-posts"><p>' . __('PAGES --'),
'after' => '</p></div>',
);
 = wp_parse_args(, );
return ;
}
add_filter('wp_link_pages_args','custom_nextpage_links');
    {{ DiscussionBoard.errors[8817526].message }}
    • Profile picture of the author softwarewarden
      ok whats the url of the page pm me if you want. the php function you posted got all messed up lol. Dang filters.
      {{ DiscussionBoard.errors[8817546].message }}
  • Profile picture of the author StewartJ
    Thank you for the help Softwarewarden. I just PMd u the URL of the test page I am working on ..
    {{ DiscussionBoard.errors[8817562].message }}
    • Profile picture of the author softwarewarden
      Originally Posted by StewartJ View Post

      Thank you for the help Softwarewarden. I just PMd u the URL of the test page I am working on ..
      I gave you a fix via pm if you need more help or it don't work just let me know you.
      {{ DiscussionBoard.errors[8818326].message }}
      • Profile picture of the author StewartJ
        Originally Posted by softwarewarden View Post

        I gave you a fix via pm if you need more help or it don't work just let me know you.
        Hi! Yes it worked PERFECTLY!

        I just wanted to drop a few few lines here and say what an Amazing Guy (or Gal) Softwarewarden is. When I posted here I wasn't expecting much aside from basic suggestions regarding my code but Softwarewarden went above and beyond to help me get this thing working properly.

        I can't thank him/her enough, its people like Softwarewarden that make WF a great place.

        Thank you so much!
        {{ DiscussionBoard.errors[8818791].message }}
        • Profile picture of the author softwarewarden
          Originally Posted by StewartJ View Post

          Hi! Yes it worked PERFECTLY!

          I just wanted to drop a few few lines here and say what an Amazing Guy (or Gal) Softwarewarden is. When I posted here I wasn't expecting much aside from basic suggestions regarding my code but Softwarewarden went above and beyond to help me get this thing working properly.

          I can't thank him/her enough, its people like Softwarewarden that make WF a great place.

          Thank you so much!
          I am a Guy, And I'm gland that I could help you. I'll always help people when I can.
          {{ DiscussionBoard.errors[8819604].message }}

Trending Topics