Buttons of Portofolio Categories - by designerobot

This topic has 31 replies, 3 voices, and was last updated 7 years, 3 months ago ago by Laranz

  • Avatar: designerobot
    designerobot
    Participant
    July 30, 2017 at 04:12

    Hi, I’ve two questions for you.

    I’m referring to a page like this example:
    https://www.8theme.com/demo/woopress/sidebar-boxed/portfolio/?col=4

    —————

    I’ve created these four my own Portofolio Categories:

    Name: Very Important
    Slug: 1-veryimportant

    Name: More Important
    Slug: 2-moreimportant

    Name: Less Important
    Slug: 3-lessimportant

    Name: Not Important
    Slug: 4-notimportant

    —————

    Your theme now shows the buttons in this way:
    “Show All” – “Less Important” – “More Important” – “Not Important” – “Very Important”

    But I would like to show them in this way:
    “Show All” – “Very Important” – “More Important” – “Less Important” – “Not Important”

    —————

    In other words, now the theme shows the buttons (i.e. “.portfolio-filters li .btn” in the CSS) according to the alphabetical order of the names, but I would to show them according to the alphabetical order of the slugs.

    1. First question:
    What code I need to insert in the CSS (or elsewhere in my Child Theme) to obtain this result?

    —————

    2. Second question:

    After every description inside the buttons, could I add a number between brackets in order to know how many elements are present for every category?

    I.e. in order to obtain en effect like this example:
    “Show All (41)” – “Very Important (12)” – “More Important (18)” – “Less Important (2)” – “Not Important (9)”

    —————

    Thanks for your help

    30 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    July 31, 2017 at 13:59

    Hello,

    1. You can add 'orderby' => 'slug', in get_etheme_portfolio function (woopress/framework/portfolio.php file) http://prntscr.com/g2iozp
    We recommend you to make changes in a child theme.
    2. If you need help with additional customization you may contact WPKraken team because this is outside the scope of our support.

    Regards

    Avatar: designerobot
    designerobot
    Participant
    July 31, 2017 at 17:26

    Hi, thanks for your replies.

    1. It doesn’t work. I did this in my child theme and it doesn’t work at all (also other modifications were not seen).
    In the main theme folder other customozations work but not this just suggested by you. You can check… see below the link to enter. Maybe we need to add something else?

    2. Ok, I’ll write to them. In the meantime if you maybe have any idea how to obtain that effect, maybe I can try it with the help of some tutorials online. What do I have to look for on google?

    3. Moreover, now the permalink has this fortmat: http://www.domain.com?etheme_portfolio=project
    Could I change the part “?etheme_portfolio=” with “?media=

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 1, 2017 at 13:08

    Hello,

    1. Sorry, seems it is not so simple. I’ve sent portfolio.php to email, try to use this one. You can change order to DESC in 594 line.
    2. This articles may be useful https://developer.wordpress.org/reference/classes/wp_query/ https://developer.wordpress.org/reference/functions/get_terms/
    http://php.net/manual/ru/control-structures.foreach.php
    3. All available permalink settings you can find in Dashboard > Setting > Permalinks.

    Please note, that additional customization in theme files is outside the scope of our support.

    Regards

    Avatar: designerobot
    designerobot
    Participant
    August 2, 2017 at 02:05

    Hello,

    1.
    Thank you very much Rose, now it works.

    To be honest this new order works perfectly for the buttons (.portfolio-filters li .btn in CSS) but it doesn’t work yet on the description below the featured image (.portfolio-descr .posted-in in CSS).

    I suppose I need to add something in content-portfolio.php file at the line <span class="posted-in"><?php print_item_cats($postId); ?></span>, but what?

    2.
    Thanks, I found that I need to insert the script reported in the examples but doing it the entire page stops to work.
    Now I’m looking for a plugin with this function already inside because your paying customer service asked me too much for a simple thing like these. Honestly, I would spend less to buy a new theme from scratch in case.

    Moreover in edit-tags.php file there is already this function, why it cannot be used inside the theme too?

    By the way, as you can check in my control panel, lately I bought not one (1) but five (5) licenses of the same your theme.
    I’m using this theme for several client projects, for this reason, I’m doing several answers to you (I need to respond to my client requests).
    Until now I’ve appreciated your very efficient and available client service and support, but if now you tell me to ask to write to your paying customer service for any other request, at this point I’ll not buy any new license in future because this becomes not convenient (for a simple request they already did me a very expensive quote).

    3.
    This permalink seems to not be in this page at all

    4.
    Even if I’ve selected the 4 columns option, in the mobile version it appears like 1 column.
    Can I obtain 4 columns (or at least 2 columns) also in the mobile version?
    Without this modification it’s impossible to use this template with a lot of project in the portfolio on the mobile version.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 2, 2017 at 09:20

    Hello,

    1. Your question is bit unclear for me. Please describe with more details what exactly you want to achieve.
    2-3. We understand your situation and we are glad to help you with any questions related to our theme features and options, of course, you can rely on any help with theme settings. But if you are asking about custom development which is outside the scope of support we can offer (according to TF support policy http://prntscr.com/fki0tq https://themeforest.net/page/item_support_policy ) we offer you to contact our partners https://wpkraken.io/?ref=8theme or hire an own developer.
    4. Add col-xs-6 http://prntscr.com/g3bkl7

    Regards

    Avatar: designerobot
    designerobot
    Participant
    August 2, 2017 at 13:36

    Hello,
    1. See the two screenshot in pvt content.
    2-3-4 Ok, thanks.

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 2, 2017 at 14:04

    In portfolio.php file change et_force_name_sort to et_force_slug_sort and use new content-portfolio.php file. I’ve sent the file to your email.
    Use child theme to prevent losing changes them after theme update https://codex.wordpress.org/Child_Themes

    Regards

    Avatar: designerobot
    designerobot
    Participant
    August 2, 2017 at 14:52

    Thank you very, now all works perfectly.

    I’ve put content-portfolio.php in ChildTheme and works, but portpolio.phs have to be in main theme to work, in Child it doesn’t work at all. I did several tests but nothing…

    Avatar: designerobot
    designerobot
    Participant
    August 2, 2017 at 15:07

    Sorry, I just noted that col-xs-6 (in content-portfolio.php) in real doesn’t work very well.

    In mobile version now the columns are two (correctly) but the content is showed only in the first (the second is empty).

    See in pvt the screenshot or the link for the test.

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 2, 2017 at 16:04

    Hello,

    Please put portfolio.php in child theme in empty framework folder.

    Try to add this code in Theme Options > Custom css > Custom css for mobile:

    .portfolio {
        height: auto !important;
    }
    .portfolio .portfolio-item.col-xs-6 {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        opacity: 1 !important;
    }
    

    Regards

    Avatar: designerobot
    designerobot
    Participant
    August 3, 2017 at 04:42

    Hi, this script work… i.e. the thumbnails are now showed in the correct way in mobile too, but now in mobile version the buttons with category don’t work anymore

    Avatar: designerobot
    designerobot
    Participant
    August 3, 2017 at 05:11

    By the way, I insert portpolio.php in an empty folder called “framework” inside the child theme, but it doesn’t work. It works only in the main theme. I tried several times… try you too please

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 3, 2017 at 07:52

    Hello,

    Please provide wp-admin and FTP access in Private Content.

    Regards

    Avatar: designerobot
    designerobot
    Participant
    August 3, 2017 at 13:16

    Hello,

    here are, see below in pvt content.

    Thanks.

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 3, 2017 at 14:07

    Hello,

    Seems changes in portfilo.php can’t be transferred into the child theme, so it would be better to save this file and after theme update re-create changes.
    I’ve changed css code. Please check now.

    Regards

    Avatar: designerobot
    designerobot
    Participant
    August 3, 2017 at 14:31

    Hello, now the columns work perfectly, thanks!

    Ok, no problem… I’ll keep a copy of this file to avoid to lose changes at the next update.

    I noted another error in the same page… in past, you told me the code to remove the magnifying lens icon and insert the link on the entire picture. But now I noted that it doesn’t work perfectly.
    The active area is only in a part of the picture, even if the rollover is on the entire surface. See the attached picture (in pvt) to better understand what I mean

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 3, 2017 at 14:45

    Please check link on portfolio image now.

    Regards

    Avatar: designerobot
    designerobot
    Participant
    August 3, 2017 at 14:49

    I polished the cache, tried several different browsers but I see all like before

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 3, 2017 at 14:53

    Please see screenshot http://prntscr.com/g3wa0n

    Regards

    Avatar: designerobot
    designerobot
    Participant
    August 3, 2017 at 15:01

    I saw the screenshot, but if you go to the page and move the cursor of the mouse above the pic, you will note that the link is yet on about only the half of the surface.

    I tried on Safari and on Thunderbird on Mac Os, maybe is it a problem of this OS? Maybe you on Windows see another thing?

    Avatar: designerobot
    designerobot
    Participant
    August 3, 2017 at 15:26

    In the meantime we solve the previous point (hoping it is possible), I would ask another thing.

    When the categories are too much or when the title is too long, the pagination is not perfect because the grid becomes broken. See the attached pic to understand what I mean.

    To remove the green space and maintain the grid still perfect, I need to shorten the two text blocks (showed in the pic by arrows 1 and 2).

    I thought it was very simple… I tried these scripts:
    http://www.wpbeginner.com/wp-themes/how-to-truncate-wordpress-post-titles-with-php/
    and
    http://wpsnipp.com/index.php/cat/truncate-description-within-categories-admin-panel/

    But they don’t work on my portfolio page 🙁
    What is it the right syntax in this case?

    Please, contact administrator
    for this information.
    Avatar: designerobot
    designerobot
    Participant
    August 3, 2017 at 16:24

    Regarding the problem of the link area on the surface of the image, I noted that meanwhile the page is still loading (because there are a lot of item in this portfolio) the surface is linkable at 100% (as it should be) but when it finishes to load, the problem previously described appears.

    Avatar: designerobot
    designerobot
    Participant
    August 4, 2017 at 09:48

    Hello, any news?
    Can you help me or I need to contact an external developer to solve this?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 4, 2017 at 10:44

    Hello,

    Please try to change this code:

    .portfolio {
        height: auto !important;
    }
    .portfolio .portfolio-item.col-xs-6 {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        float: left;
        opacity: 1;
        transition: all 0.9s ease-in-out;
    }
    .portfolio .portfolio-item.col-xs-6.isotope-hidden {
        display: none;
        opacity: 0;
    }

    to

    .portfolio .portfolio-item.col-xs-6 {
        width: 49.9%;
    }

    and add this code in Global custom css, then check links

    .portfolio-item .portfolio-image {
        cursor: pointer;
    }

    Regards

    Avatar: designerobot
    designerobot
    Participant
    August 4, 2017 at 11:59

    Hi, something has changed.
    Now the pointer becomes from “arrow” to “hand” on the entire surface of picture, but the working link is still only on a part of the picture, like the area showed yesterday with the attached picture.

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 4, 2017 at 12:10

    Oh I see, add this also

    .portfolio .portfolio-image {
    	pointer-events: none;
    }
    .portfolio .portfolio-image a {
    	pointer-events: all;
    }

    Regards

    Avatar: designerobot
    designerobot
    Participant
    August 4, 2017 at 12:32

    Now it works, thanks!!!

    Regarding the other pending question, do you have a solution?

    The question was:
    When the categories are too much or when the title is too long, the pagination is not perfect because the grid becomes broken. See the attached pic to understand what I mean.

    To remove the green space and maintain the grid still perfect, I need to shorten the two text blocks (showed in the pic by arrows 1 and 2).

    I thought it was very simple… I tried these scripts:
    http://www.wpbeginner.com/wp-themes/how-to-truncate-wordpress-post-titles-with-php/
    and
    http://wpsnipp.com/index.php/cat/truncate-description-within-categories-admin-panel/

    But they don’t work on my portfolio page 🙁 What is it the right syntax in this case?

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 4, 2017 at 13:18

    It was fixed http://prntscr.com/g4azrf Please check http://prntscr.com/g4azzx

    Regards

    Avatar: designerobot
    designerobot
    Participant
    August 4, 2017 at 14:55

    Ok, thanks!
    I asked another thing, but at this point I’ll start a new topic not to do confusion.
    This topic is solved.

  • 1 2
    Viewing 30 results - 1 through 30 (of 31 total)

The issue related to '‘Buttons of Portofolio Categories’' has been successfully resolved, and the topic is now closed for further responses

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.