WordPress.org

Support

Support » Plugins and Hacks » [Resolved] CSS pagination

[Resolved] CSS pagination

  • First and foremost I’d like to compliment you on your fine work. I haven’t rated the plugin yet but will do so very shortly. Props 2u my friend for such an excellent piece of work. Here’s my head scratcher (which you’ll prob i.d. in a minute flat; I’m such a noob):

    Dev Location: http://twointeract.com/wordpress/tablepress-test/
    Shortcode: [table id=2 datatables_columnfilter=”true, automatic_url_conversion=true automatic_url_conversion_new_window=true/]

    I’m having difficulty styling the pagination buttons within TablePress. I’m placing all of my CSS in the Plugin Options>Frontend Options>Custom CSS and nothing is taking. I’ve pulled some samples from a support issue site such as the following and it worked:

    .dataTables_paginate a {
    	color: #bbddaa !important;
    }

    However, when I place the following, nothing happens:

    .paging_full_numbers a {
    	padding: 1px 2px;
    	margin: 0 3px;
    	color: #333333 !important;
    }
    
    .paginate_active {
    font-weight:bold;
    }

    I’ve tried adding <.tablepress-id-N (with N being the table’s ID)> but still nothing:

    .tablepress-id-2 .paging_full_numbers a {
    	padding: 1px 2px;
    	margin: 0 3px;
    	color: #333333 !important;
    }
    
    .tablepress-id-2 .paginate_active {
    font-weight:bold;
    }

    I’ve changed my theme over to Twenty Eleven with the above changes, changed out CSS in Chrome Developer mode, and again, nothing sticks. *Sigh* I held off as long as I could but, I’ve hit a serious wall. Help me Obi TobiasBg Kenobi, you’re my only hope!

    -awachholz

    http://wordpress.org/extend/plugins/tablepress/

Viewing 15 replies - 1 through 15 (of 19 total)
  • Plugin Author TobiasBg

    @tobiasbg

    Hi,

    thanks for your post, and sorry for the trouble.

    Prepending the CSS code with the table ID selector is not necessary (and will in fact not work).

    For me, this works on your site:

    .paging_full_numbers a {
    	padding: 1px 2px;
    	margin: 0 3px;
    	color: #333333 !important;
    }
    
    .paginate_active {
    	font-weight: bold;
    }

    Additionally to that, could you please describe, what you actually want to change in the pagination, i.e. how you want it to appear?

    Regards,
    Tobias

    No worries Tobias. (btw, ur insanely fast with responding….awesome!)
    I’m trying to get the background color, rounded edges, and what-not removed from the pagination styles. Just some simple text links… I put the code into the Custom CSS “as is” (above) and it didn’t work. This image is with Custom CSS changes. The following code was supposed to be removed but still remains:

    border: 1px solid #aaa;
    border-radius: 5px;
    background-color: #ddd;

    This image is edits made in Chrome (what I’d like it too look like). I don’t want to touch the default.css, default.min.css and the like because as you said, any updates will erase the changes. And I plan one using your plugin for quite some time. πŸ™‚

    Uber thanks Tobias for ur help.
    -andrew

    Plugin Author TobiasBg

    @tobiasbg

    Hi Andrew,

    thanks for the explanation! Now I see what you are trying to do πŸ™‚

    Here’s the CSS that you’ll need:

    .paging_full_numbers a {
    	padding: 1px 2px;
    	margin: 0 3px;
    	color: #333333 !important;
    	border: none;
    	background: none;
    	border-radius: 0px;
    }
    
    .paginate_active {
    	font-weight: bold;
    }

    Basically, instead of leaving out certain commands, you’ll need to put them in with the desired valued. That will override the values from the default.css (which you should indeed never edit directly). Just leaving out certain properties will not work, because the default.css still has them, and the Custom CSS is loaded additionally to the default CSS.

    Regards,
    Tobias

    #palm2face
    Ugh… I feel like a complete CSS noob. Thank you. You are indeed, a WordPress master. It’s now working smooth as silk.

    Problem solved, plugin rated (5 stars), ever grateful.

    Cheers Tobias!
    _andrew

    Plugin Author TobiasBg

    @tobiasbg

    Hi Andrew,

    don’t worry, no problem at all! πŸ™‚
    Great to hear that this helped!

    And thanks for the rating and kind words, I really appreciate it!

    Best wishes,
    Tobias

    Hi Tobias!

    Thanks so much for this plugin, its one of my favourites for sure! But I am also experiencing the same problem on http://vanguardmastering.com/discography/
    I have added the code as suggested above, however I don’t see any changes happening in the pagination… Any advice would be greatly appreciated.

    I am trying to change the font colour and either change or remove the arrows as they don’t match my current theme…

    Many thanks and kind regards,
    Benni

    Plugin Author TobiasBg

    @tobiasbg

    Hi Benni,

    thanks for your question!

    To change the font color of the pagination links, you can use this “Custom CSS”:

    .dataTables_paginate .paginate_enabled_previous,
    .dataTables_paginate .paginate_enabled_next {
    	color: #ff0000 !important;
    }
    .dataTables_paginate .paginate_disabled_previous,
    .dataTables_paginate .paginate_disabled_next {
    	color: #00ff00 !important;
    }
    .dataTables_paginate .paginate_enabled_previous:hover,
    .dataTables_paginate .paginate_enabled_next:hover {
    	color: #0000ff !important;
    }

    To change the colors of the arrow images, you can use

    .paginate_enabled_previous:before,
    .paginate_enabled_next:after {
    	color: #ff0000;
    }
    .paginate_disabled_previous:before,
    .paginate_disabled_next:after {
    	color: #00ff00;
    }
    .paginate_enabled_previous:hover:before,
    .paginate_enabled_next:hover:after {
    	color: #0000ff;
    }

    There are three main states (enabled, disabled, and hovered), so that you can adjust three colors.

    Regards,
    Tobias

    Hi Tobias!

    Thanks so much for being super helpful!! πŸ™‚
    I managed to get the following done, but am still having trouble with a tiny shadow under the “previous” arrow when link is enabled, my code looks like this:

    .tablepress thead th,
    .tablepress tfoot th {
    	background-color: #1c1c1c;
    }
    
    .tablepress thead .sorting_asc,
    .tablepress thead .sorting_desc,
    .tablepress thead .sorting:hover {
    	background-color: #272727;
    }
    
    .tablepress .odd td {
    	background-color: #1c1c1c;
    }
    
    .tablepress .even td {
    	background-color: #1c1c1c;
    }
    
    .tablepress .row-hover tr:hover td {
    	background-color: #272727;
    }
    
    .tablepress,
    .tablepress tr,
    .tablepress tbody td,
    .tablepress thead th,
    .tablepress tfoot th {
    	border-color: #313131;
    }
    
    a:link {
    	color: #EBEBEB;
    	text-decoration: none;
    	text-shadow: none;
    }
    
    a:active {
    	color: #EBEBEB;
    	text-decoration: none;
    	text-shadow: none;
    }
    
    a:visited {
    	color: #EBEBEB;
    	text-decoration: none;
    	text-shadow: none;
    }
    
    a:hover {
    	color: #ff00ff;
    	text-decoration: none;
    	text-shadow: none;
    }
    
    .dataTables_paginate .paginate_enabled_previous,
    .dataTables_paginate .paginate_enabled_next {
    	color: #EBEBEB !important;
    	text-decoration: none;
    	text-shadow: none;
    }
    
    .dataTables_paginate .paginate_disabled_previous,
    .dataTables_paginate .paginate_disabled_next {
    	color: #EBEBEB !important;
    	text-decoration: none;
    	text-shadow: none;
    }
    
    .dataTables_paginate .paginate_enabled_previous:hover,
    .dataTables_paginate .paginate_enabled_next:hover {
    	color: #ff00ff !important;
    	text-decoration: none;
    	text-shadow: none;
    }
    
    To change the colors of the arrow images,
    you can use
    .paginate_enabled_previous:before,
    .paginate_enabled_next:after {
    	color: #EBEBEB !important;
    	text-decoration: none;
    	text-shadow: none;
    }
    
    .paginate_disabled_previous:before,
    .paginate_disabled_next:after {
    	color: #EBEBEB !important;
    	text-decoration: none;
    	text-shadow: none;
    }
    
    .paginate_enabled_previous:hover:before,
    .paginate_enabled_next:hover:after {
    	color: #ff00ff !important;
    	text-decoration: none;
    	text-shadow: none;
    }
    
    .paginate_disabled_previous:hover:before,
    .paginate_disabled_next:hover:after {
    	color: #EBEBEB !important;
    	text-decoration: none;
    	text-shadow: none;
    }

    Any advice on how to fix that tiny shadow would be greatly appreciated.

    Alternatively, I was wondering if it was possible to change the pagination to show the WP-PageNavi plugin generated navigation?

    Many thanks for your support! πŸ™‚

    Kind Regards,
    Benni

    Plugin Author TobiasBg

    @tobiasbg

    Hi Benni,

    the problem is that you still have the text

    To change the colors of the arrow images,
    you can use

    in the code (from copy/paste from my post above). That breaks the CSS, so please remove that.
    Also, you don’t need the last block

    .paginate_disabled_previous:hover:before,
    .paginate_disabled_next:hover:after {
    	color: #EBEBEB !important;
    	text-decoration: none;
    	text-shadow: none;
    }

    as the disabled state doesn’t really need a hover state.

    About the other pagination: You can not directly use that from WP-PageNavi, but a similar “full numbers” pagination. To do that, please add this to the “Custom Commands” text field in the “Features of the DataTables JavaScript” section on the “Edit” screen of the table:

    "sPaginationType": "full_numbers"

    Regards,
    Tobias

    Awesome! Many Thanks Tobias, that works beautifully! πŸ™‚
    Except that I think that the added code in the bottom seems to override the CSS settings as previously modified. My code now looks like this:

    .tablepress thead th,
    .tablepress tfoot th {
    	background-color: #1c1c1c;
    }
    
    .tablepress thead .sorting_asc,
    .tablepress thead .sorting_desc,
    .tablepress thead .sorting:hover {
    	background-color: #272727;
    	color: #ff00ff;
    }
    
    .tablepress .odd td {
    	background-color: #1c1c1c;
    }
    
    .tablepress .even td {
    	background-color: #1c1c1c;
    }
    
    .tablepress .row-hover tr:hover td {
    	background-color: #272727;
    }
    
    .tablepress,
    .tablepress tr,
    .tablepress tbody td,
    .tablepress thead th,
    .tablepress tfoot th {
    	border-color: #313131;
    }
    
    a:link {
    	color: #EBEBEB;
    	text-decoration: none;
    	text-shadow: none;
    }
    
    a:active {
    	color: #EBEBEB;
    	text-decoration: none;
    	text-shadow: none;
    }
    
    a:visited {
    	color: #EBEBEB;
    	text-decoration: none;
    	text-shadow: none;
    }
    
    a:hover {
    	color: #ff00ff;
    	text-decoration: none;
    	text-shadow: none;
    }
    
    .dataTables_paginate .paginate_enabled_previous,
    .dataTables_paginate .paginate_enabled_next {
    	color: #EBEBEB !important;
    	text-decoration: none;
    	text-shadow: none;
    }
    
    .dataTables_paginate .paginate_disabled_previous,
    .dataTables_paginate .paginate_disabled_next {
    	color: #EBEBEB !important;
    	text-decoration: none;
    	text-shadow: none;
    }
    
    .dataTables_paginate .paginate_enabled_previous:hover,
    .dataTables_paginate .paginate_enabled_next:hover {
    	color: #ff00ff !important;
    	text-decoration: none;
    	text-shadow: none;
    }
    
    .paginate_enabled_previous:before,
    .paginate_enabled_next:after {
    	color: #EBEBEB !important;
    	text-decoration: none;
    	text-shadow: none;
    }
    
    .paginate_disabled_previous:before,
    .paginate_disabled_next:after {
    	color: #EBEBEB !important;
    	text-decoration: none;
    	text-shadow: none;
    }
    
    .paginate_enabled_previous:hover:before,
    .paginate_enabled_next:hover:after {
    	color: #ff00ff !important;
    	text-decoration: none;
    	text-shadow: none;
    }

    But I can’t seem to see any of this changes replicate in the form as the new pagination seems to have defaulted back to the original colors.

    Much appreciate your support and would be super grateful if you can provide the CSS code for modifying the new pagination.

    Cheers, Benni

    Plugin Author TobiasBg

    @tobiasbg

    Hi Benni,

    first: No need to post your “Custom CSS” here, I can see that in the page πŸ™‚

    Ok, so now you have change to the “full numbers” pagination style, instead of the pagination arrow images. Great!
    Then of course, the CSS that you added so far, will not have an effect, as that only affects the arrow image pagination. You can therefore remove it again from the “Custom CSS”.

    Instead, you can add something like this, to influence the new pagination:

    .paging_full_numbers a {
      border: none;
      border-radius: 0px;
      background-color: transparent;
      color: #999999 !important;
    }
    .paging_full_numbers .paginate_active {
      background-color: #ff00ff;
    }

    or similar.

    Regards,
    Tobias

    Thanks heaps Tobias!

    I am still having some trouble modifying the hover, and also the boarder does not show. I am not sure what I am doing wrong, have tried for an hour now, so your advice once again would be awesomely helpful.

    Many thanks, πŸ™‚

    Plugin Author TobiasBg

    @tobiasbg

    hi Benni,

    no problem!

    For the border, just combine

    border: 1px;
    border-color: #313131;

    to

    border: 1px solid #313131;

    (The border style “solid” is what was missing.)

    About the hover: What would you like to happen/change on a hover?
    And for that, you’ll need to fix the line

    .paging_full_numbers h {

    to

    .paging_full_numbers a:hover {

    Regards,
    Tobias

    Many thanks for your help Tobias!

    I managed to change the hover background by adding an !important;
    The navigation is now showing exactly the way I want it, but for some reason the link does not change the mouse arrow to a link selector, but rather to a text selector.
    Do you know of any way to change this, so the mouse arrow turns into a link selector rather than text selector?

    Cheers,

    B πŸ™‚

    Plugin Author TobiasBg

    @tobiasbg

    Hi,

    great to hear that this is working now πŸ™‚

    To change the mouse pointer, just add

    cursor: pointer;

    in the

    .paging_full_numbers a {

    block.

    Regards,
    Tobias

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘[Resolved] CSS pagination’ is closed to new replies.