WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] CSS pagination (20 posts)

  1. flyfreestate
    Member
    Posted 11 months ago #

    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/

  2. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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

  3. flyfreestate
    Member
    Posted 11 months ago #

    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

  4. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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

  5. flyfreestate
    Member
    Posted 11 months ago #

    #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

  6. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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

  7. benni.krueger
    Member
    Posted 11 months ago #

    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

  8. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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

  9. benni.krueger
    Member
    Posted 11 months ago #

    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

  10. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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

  11. benni.krueger
    Member
    Posted 11 months ago #

    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

  12. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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

  13. benni.krueger
    Member
    Posted 11 months ago #

    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, :)

  14. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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

  15. benni.krueger
    Member
    Posted 11 months ago #

    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 :)

  16. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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

  17. benni.krueger
    Member
    Posted 11 months ago #

    AWESOME! :)

    Thanks so much Tobias! You're a CSS master!!

    I have one last thing before this little project will be complete, and I am not sure if it can be changed within your plugin, but I thought I'd ask you anyway, since you have been the most helpful person so far! :)

    A pink glow appears upon clicking into the search form, and this seems to be universal setting on the site, however, the left and right side of the highlighted surrounding displays a blue instead of the pink as seen above and below... do you have any idea what the CSS code would be to alter this setting?

    Cheers, :)

    B

  18. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    Hi,

    great to hear that this helped as well :-)

    About the blue/pink problem: That's the result of an error in your theme's "dark.css" file. In lines 808 and 810 (which are

    border-right-color-value:rgba(255,0,255,1);

    and

    border-left-color-value:rgba(255,0,255,1);

    the "-value" is wrong. That has to be changed to

    border-right-color:rgba(255,0,255,1);

    and

    border-left-color:rgba(255,0,255,1);

    Regards,
    Tobias

    P.S.: In case you haven't, please rate TablePress here in the plugin directory. Thanks!

  19. benni.krueger
    Member
    Posted 11 months ago #

    Amazing! that totally resolved the problem, and the guys that made the theme haven't even responded to this problem in over 3 weeks...

    Your support is outstanding! many thanks and greetings to you from Chile!

    Cheers, B :)

    ps: have rated with 5 stars!

  20. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    Hi Benni,

    very nice! :-) My pleasure to help!

    And thanks for the rating, I really appreciate it!

    Best wishes,
    Tobias

Reply

You must log in to post.

About this Plugin

About this Topic