Okay
  Public Ticket #1250249
Look and Feel of a table .. CSS
Closed

Comments

  •  4
    jcsatujp started the conversation

    Re:  http://www.keepwerking.co.uk/collection/

    Hello,

    I am trying to change a few things in relation to the Drop down box that is used to select the number of entries to display.

    1) I want to remove the underline that appears under the actual number of entries (and if not to remove, how to amaned the color?)

    I have entered the following to no avail:

    .wpdt-c .bootstrap-select > .btn-default {
        border-bottom: 1px none #e0e0e0 !important;
    }

    2 I would like to change the color of the inverted triangle that appears next to the actual number of entries.

    3 When you click on the entries you see a new menu showing the list of the available number of entires you wish to see on each page. I would like to remove the "All" option. Is this possible?

    Lastly, at the bottom of each page there is the area where you can jump to a specific page, or go the the last page etc. Is there any way of highlighting the page that you are actually on? Maybe by making the font a little bigger / bold / color change?

    Thanks for you help.

  •  1,771
    Miloš replied

    Hi John

    1. Can you please try to add this code.

    .wpdt-c .wpDataTablesWrapper .dataTables_length .bootstrap-select .dropdown-toggle{
    border-bottom: white !important;
    }

    2.

    .wpDataTablesWrapper table.wpDataTable thead th.sorting:after, .wpDataTablesWrapper table.wpDataTable thead th.sorting_asc:after{
    border-bottom-color: blue !important;
    }

    3.
    Unfortunately something like this requires some code customization. We can offer you our paid customization service where you can hire one of our developers to implement this feature for you. Our price is 50/hour and customization like this will not require more than 1 hour. If you are interested let me know so we can send you an invoice for this.

    4.
    This request is on our TODO list but unfortunately for now it is not possible to achieve. we need to find the proper solution for this and until that there is no option to change the font or something similiar to notify you on which page of the table you are.

    Best regards.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  4
    jcsatujp replied

    1. Worked fine. Thank you.

    2. I didn't see any change. But I notice that I may have misleaded you in what I was after. I would like to change the color of the inverted triangle that appears next to the number for the drop down box of the number of entries to show on each page.

    3. OK. I will live with it.

    4. OK. I will live with it.

    Thank you once again for your assistance.

  •  6
    onaforeignshore replied

    Number 4.

    I could not change the font colour, size, or face as was said below, but I did manage to make the current page stand out by using the following CSS to change the background:

    a.paginate_button.current {
      background-color: #eeeeee !important;
      border-color: #eeeeee !important;
      border-radius: 5px !important;
      border-style: solid !important;
      border-width: 1px !important;
    }
  •  4
    jcsatujp replied

    Thanks so much @onaforeignshore. That words a treat!

    I amended it sligthly..

    background-color: none !important;
    border-color: #00ff00 !important;
    

    Which gives me a result that fits into my site ... please take a look .. http://www.keepwerking.co.uk/collection/

    All I need now is the code to amend that little triangle near the "Show" and "Entries" for the drop down box for the number of entries per page. And yes .. believe me I have spent ages trying to find / work out how to do it myself.


  •  6
    onaforeignshore replied

    I also applied hover styles on my site to allow people to see which page selection they are hovering over. For my site, the completed code is:

    .wpdt-c a.paginate_button {
      border-color: #fcfcfc !important;
      border-radius: 5px !important;
      -webkit-border-radius: 5px !important;
      -moz-border-radius: 5px !important;
      border-style: solid !important;
      border-width: 1px !important;
    }
    .wpdt-c a.paginate_button:hover {
      background-color: #fd7e29 !important;
      border-color: #fd7e29 !important;
    }
    .wpdt-c a.paginate_button.current {
      background-color: #eeeeee !important;
      border-color: #eeeeee !important;
      cursor: default !important;
    }
    .wpdt-c a.paginate_button.first,
    .wpdt-c a.paginate_button.previous,
    .wpdt-c a.paginate_button.next,
    .wpdt-c a.paginate_button.last {
      padding: 9px 7px !important;
    }
  •  6
    onaforeignshore replied

    Hope this helped.

    The padding adjustment on the paginate_button first, previous, next and last was to ensure that the hover box is the same size on those as it is on the numbers. If you don't care about it being a different size, you can leave that CSS out.

  •  4
    jcsatujp replied

    Thanks for you reply. I will investigate and perhaps incorporate some additional changes from your suggestion later.


    The email notification I recieved had the question "How did you get the filter to be at the top of the table instead of at the bottom?" But for some reason it is not in here? Also I can not see your comment on the triangle. Most strange


    Anyway .. the answer is that there is an option in
    Settings, Main Setting tab,