Dynamik pagination CSS suggestion

I recently noticed some strange styling on my pagination and found it was due to the "disabled" CSS selector, as listed here: .pagination a, .pagination a:visited, .pagination li a, .pagination li.disabled, .pagination li a:hover, .pagination li.active a { }

First of all, I have no idea why the disabled class is being added to my pagination, like so (anyone know why this is happening?!):

<ul><li class="active"><a ...></li>
<li class="disabled"><a ...></li>
<li class="disabled"><a ...></li>
<li class="pagination-next"><a ...></li>
</ul>

In the Dynamik design options, I have added a border to "Post Nav Numeric Border". Because of the .pagination li a and .pagination li.disabled selectors, I am seeing a border around both the li and the a. You can see it at the bottom of this page for now (until I apply some CSS to fix it or just decide to remove the border!): http://www.dubberleylandscape.com/blog/

I suggest that the selector should be changed to .pagination li.disabled a. That should fix issues like mine.

Thanks!
Sarah

@brit77 Hey Sarah,

That's odd. I just checked your site and see what you're talking about, but when I add a 1px border to my "Post Nav Numeric Border" option in a default Dynamik test site I get this:

dynamik-post-nav-numeric-border.png

I even clicked around on those links and each page that loaded displayed only a single border around each page link. Do you have any Custom CSS that might be tweaking those styles as well?

Hi @eric ,
I looked again, and I don't see any custom CSS. On your Dynamik test site, is the "disabled" class added to the page 2 li? I looked at one of the Dynamik skin demos and see no "disabled" class.

I think this is down to Dynamik's CSS. The CSS code via Dynamik is adding the border and padding to:
.pagination li a
and
.pagination li.disabled

So, when class="disabled" is added to the li (no idea why this is happening! Maybe this should be the bigger question?!), the border will wrap both the li AND the a (<li class="disabled"><a ...></li>), which is what you are seeing on my site.

Changing .pagination li.disabled to .pagination li.disabled a does fix this, but I can't do it in dynamik.css as it gets overwritten. I'll probably just remove the border as a quick fix! But I thought you might like to take a look at the CSS though it is just a minor styling issue.

-Sarah

@brit77

What version of Genesis and Dynamik are you working with?

@eric
I think I'm on the latest version of both...Dynamik 2.5.3 and Genesis 2.9.0

Something must have changed at some point since when I first was styling the navigation it looked ok. I suspect it's that recently, for some reason, my navigation li's are being classed with "disabled" making the CSS issue noticeable. I've tried to track down why that is happening, but all my searches bring back results on how to disable navigation...nothing touches on why this class is added to navigation links.

@brit77

Could you try de-activating ALL of your Plugins temporarily and then see if that navigation issue is still present? I'm just wondering if a Plugin is somehow adding that .disabled class. I don't know why that would be the case, but I just can't seem to replicate this on my end.

@eric
I just thought to look at another site using Dynamik, and it is happening there too: http://www.chickendynasty.com/blog/

I had a local copy of this site that wasn't experiencing the disabled issue. It needed updating of most of its plugins and themes, so I started updating one by one and checking to see what caused the addition of the disabled class. It ended up being Dynamik (updated from 2.4.7).

Next, I deactivated all the plugins, and the disabled class disappeared. Turns out it is a conflict with the Toolset Views plugin that started with the latest version of Dynamik (or some version since 2.4.7).

When I get a chance, I'll dig into the Toolset forums and see if anything comes up there and report back.

It is fixed! I didn't find anything of use in the Toolset forum, so I just started fiddling with the settings for the Toolset Views blog archive. I switched the Pagination Settings from"Pagination enabled with manual transition and page reload" to "Pagination enabled with manual transition and AJAX". I'm using the Genesis theme pagination though, rather than Toolset's pagination, so there is no ajax involved, only page reloads. Confusing, but still, it removed the "disabled" class, so that's great!

Do you have any insight on what changed in Dynamik recently that would have conflicted with Toolset? I realized that your pagination CSS probably makes sense if a properly disabled li would not contain an "a" within it....so I withdraw my suggestion!

Thank you so much for helping me troubleshoot this issue, @eric! I was just gonna "fix" it with a CSS hack, but getting to the bottom of the problem is much more satisfying! Feel free to move my post to a more appropriate forum if it no longer makes sense here. 🙂

@brit77

Yay!! I'm glad you were able to find that needle in a haystack solution. 🙂

Regarding what changed in Dynamik that could have triggered that issue, I'm not sure off the top of my head. It's certainly possible that in one of the more recent updates the built-in CSS code got a tweak that added that disabled element, but I'm not 100% sure about that at the moment.

I'll go ahead and move this into the product support forum as I think it ended up being more in that arena.

Log in to reply