Setting up filters

  • Resolved baphomet1991

    (@baphomet1991)


    6 years, 1 month ago

    Hello everyone 🙂 when its coming up to making websites im complete newbie 😀 im setting up basic page (link provided). Its far from finished but im slowly learning and building it up.

    But i cam across a wish/problem that i dont have slightest idea how to start working on it. For example. On the page you go to accounts – fresh accounts and the page opens with many different accounts (much more will be added) but as you can see, it can be confusing for customerto find what he is looking for.
    So what i want to do, is to make a little screen and with most used/best/most looking for characters, and when you click or check it un the box under the icon, it would show all accounts with this character. This also means if someone is looking for two characters, he would click on two icons and search button and it will show accounts with those two characters. I hope i explained correctly what i want — i also have example page how i want it to look, not the same, but it should be working on same principle – this is example page click on the first icon –> http://www.freshgacha.xyz.

    Thank you and i hope you can help me find a solution and guide me through it 🙂

    The page I need help with: [log in to see the link]

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

    (@tobiasbg)

    6 years, 1 month ago

    Hi,

    thanks for your post, and sorry for the trouble.

    I see what you mean, but unfortunately, I don’t know an existing solution to that, sorry. You will probably have to develop a custom solution using JavaScript (and the API of the DataTables JS library from https://www.datatables.net/ ).

    Regards,
    Tobias

    Thread Starter baphomet1991

    (@baphomet1991)

    6 years, 1 month ago

    Very kind for you to response 🙂

    Sadly was hoping for another answer to be honest hehe 😀

    I will look in to it and see how complicated is it to do. I thought it’s easier with all plugins and extensions out there.

    Any other filter solutions maybe??

    For example i was looking in those two extensions:

    1. https://tablepress.org/extensions/datatables-auto-filter/
    2. https://tablepress.org/extensions/row-filter/

    Maybe i can utilize the search box for this?

    What i had in mind. There are around 200 characters currently, i have pictures named 1, 2, 3 and up to 199. What if i changed each of those numbers to names of characters?
    Is it possible to somehow utilize the serch box than?

    I hope you undrstand what i mean.

    Will explain ones more in practice. One character with guns and eyepatch on is stark. I have his pictures saved as 199. What if i change this picture name to stark? Is it possible to set the search box to look for all accounts with this stark in?

    Greetings,
    Nik

    Thread Starter baphomet1991

    (@baphomet1991)

    6 years, 1 month ago

    p.s. forgot to add. I know search box would easily work if i add add actual names in the tables, like picture+name, but i dont like this cause it doesnt look nice.

    Plugin Author TobiasBg

    (@tobiasbg)

    6 years, 1 month ago

    Hi,

    you could of course add the names to an invisible column. You could then search for the names without actually showing them.

    You could also check out https://tablepress.org/extensions/datatables-columnfilterwidgets/ for some inspiration maybe.
    A good approach could be https://tablepress.org/extensions/datatables-button-filter/ as well.

    Regards,
    Tobias

    • This reply was modified 6 years, 1 month ago by TobiasBg.
    Thread Starter baphomet1991

    (@baphomet1991)

    6 years, 1 month ago

    This is awesome solution with invisible column.

    But there is a problem when i put name in it, it only shows through search button (stark) when it is NOT invisible.

    Solution for this should be this link you provided right? https://tablepress.org/extensions/datatables-button-filter/

    or is there even easier solution like i mentioned above when it shows only VISIBLE column names?

    Greetings,
    Nik

    Plugin Author TobiasBg

    (@tobiasbg)

    6 years, 1 month ago

    Hi,

    for this, you would have to hide the column via CSS (on the “Plugin Options” screen):

    .tablepress-id-123 .column-3 {
  display: none;
}

    The DataTables Button Filter Extension could be a good starting point for a custom image filtering.

    Regards,
    Tobias

    Thread Starter baphomet1991

    (@baphomet1991)

    6 years, 1 month ago

    Sorry for late reply!

    Its working like a charm! Thank you a lot. After I set up whole website with basic options, i will try more if needed, but i think this sorting is just fine 🙂

    One more thing. Table is really narrow, how can i set up each column width?

    Greetings, Nikolaj

    Plugin Author TobiasBg

    (@tobiasbg)

    6 years, 1 month ago

    Hi,

    that’s good to hear 🙂

    For column widths, please see https://tablepress.org/faq/column-widths/

    However, you will most likely have to modify your theme’s CSS to use a wider content area, as that’s what currently limiting the table width.

    Regards,
    Tobias

    Thread Starter baphomet1991

    (@baphomet1991)

    6 years, 1 month ago

    Thank you will try it! 🙂

    but before I do try, will changing theme’s CSS to use wider content are change anything else or just width. Just asking cause i don’t wanna mess up something else.

    Greetings, Nikolaj

    Thread Starter baphomet1991

    (@baphomet1991)

    6 years, 1 month ago

    So, i tried with the link you provided

    .tablepress-id-4 .column-1 {
    width: 100px;
    }

    .tablepress-id-4 .column-2 {
    width: 500px;
    }

    .tablepress-id-4 .column-3 {
    width: 100px;
    }

    It worked great, but as you said, i need to set up theme’s css width, since no matter what width i write in upper codes, it is just managing with the space that it is available.

    I googled a little and tried with some codes (also changed the numbers) and it doesnt work for me :/

    #page {
    max-width: 1038px;
    }
    .inner-wrap {
    width: 978px;
    }

    I tried this one, but no matter what i put in, nothing changed + i moved all the content to the left side of the page.

    I also came across this one:

    @media only screen and (min-width:1420px){
    #page{
    width:1400px
    }

    #page:before{
    width:1000px
    }

    .content-area{
    width:1000px
    }

    .entry-thumbnail{
    width:1000px
    }

    .entry-attachment .attachment{
    width:1000px
    }

    .video-wrapper .video-player{
    max-width:920px
    }
    .entry-thumbnail {
    background: #fff;
    }
    .entry-thumbnail img {
    box-shadow: none;
    }
    }

    But this looks mucj more complicated so i dont want to even try hehe.

    Any much easier solution?

    This one looked very promising https://www.quora.com/How-do-I-customize-body-width-in-a-WordPress-theme

    But couldn’t even find those options?!

    Greetings, Nikolaj

    Plugin Author TobiasBg

    (@tobiasbg)

    6 years, 1 month ago

    Hi,

    for the best way, I recommend to contact the theme developer.

    The quick solution might be

    .page-content {
  width: 980px !important;
}

    Regards,
    Tobias

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Setting up filters’ is closed to new replies.