Show category icons on search page (in results)

This topic contains 20 replies, has 3 voices, and was last updated by  Guust 6 years, 11 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • #411113

    David Sirius
    Expired Member
    Post count: 163

    Ok understood, thanks Guust. I’m not familiar with PHP (only html and CSS) so I wont be able to customise it myself. Shame though as it felt so close. I’ll think of a workaround for now and fix this properly with a developer from your link at a later stage when all road blocks are solved.

    #411119

    David Sirius
    Expired Member
    Post count: 163

    Hi Guust,

    I have developed a workaround via custom fields based on this info: https://wpgeodirectory.com/docs/custom-field-examples/ whereby I’m replicating each category as custom field. This works for one line of icons but fails for a seperation 2 lines. I found a linebreak CSS code ‘content: ‘\A” and ‘white-space: pre’, but it doesnt work, the 2nd parent cat text is not left-aligned underneath the parent cat 1 text (but starts where the line of parent cat 1 finishes) and the subcat icon of parent cat 2 is still misplaced in the line above (see screenshot 1).

    I’m currently using the following CSS code:

    
    
    .geodir_parentcategory1 {
      float: left;
      display: inline;
      clear:none !important;
      margin: 0;
      text-align: center;
      visibility: hidden;
    }
    .geodir_parentcategory1::before {
      content: 'Parent Cat 1:';
      visibility: visible;
    }
    .geodir_parentcategory2 {
      float: left;
      display: inline;
      clear:none !important;
      margin: 0;
      text-align: center;
      visibility: hidden;
    }
    .geodir_parentcategory2::before {
      content: '\A Parent Cat 2:';
      visibility: visible;
    
    }
    .geodir_subcategory1a {
      float: left;
      display: inline;
      clear:none !important;
      margin: 0;
      width: 1.75vh;
      color: transparent;
    }
    
    .geodir_subcategory1b {
      float: left;
      display: inline;
      clear:none !important;
      margin: 0;
      width: 1.75vh;
      color: transparent;
    }
    .geodir_subcategory1c {
      float: left;
      display: inline;
      clear:none !important;
      margin: 0;
      width: 1.75vh;
      color: transparent;
    }
    
    .geodir_subcategory2a {
      float: left;
      display: inline;
      clear:none !important;
      margin: 0;
      width: 1.75vh;
      color: transparent;
    }
    

    I have added another screenshot without the white-space and \A element to show how it normally looks.

    Could anyone help me in getting this properly aligned?

    Many thanks
    David

    #411127

    David Sirius
    Expired Member
    Post count: 163

    I got to work now.. what a long ride. Anyway, here are the steps that I did to make it work and the CSS code for anyone trying to achieve something similar (it’s all about taking AND giving back):

    1) in geodirectory -> place settings -> custom fields -> add a checkbox for each category you have
    2) within the checkbox settings:
    2a) dont enter anything for frontend title
    2b) enter HTML variable name which will be relevant for the CSS (e.g. I used parentcategory1)
    2c) is active yes
    2d) show in listings page
    2e) for parent categories that should have text: dont reference a icon link. For sub cats that should have an icon: enter the icon url.
    3) add the following code to your child theme style

    
    
    .geodir_more_info {
        float: left !important;
        clear: both !important;
    }
    
    [class*="parentcategory"] {
      clear: both !important;
    }
    
    .geodir_parentcategory1 {
      float: left;
      display: inline;
      margin: 0;
      text-align: center;
      visibility: hidden;
    }
    .geodir_parentcategory1::before {
      content: 'Parent Cat 1:';
      visibility: visible;
    }
    .geodir_parentcategory2 {
      float: left;
      display: inline;
      margin: 0;
      text-align: center;
      visibility: hidden;
    }
    .geodir_parentcategory2::before {
      content: 'Parent Cat 2:';
      visibility: visible;
    
    }
    .geodir_subcategory1a {
      float: left;
      display: inline;
      clear:none !important;
      margin: 0;
      width: 1.75vh;
      color: transparent;
    }
    
    .geodir_subcategory1b {
      float: left;
      display: inline;
      clear:none !important;
      margin: 0;
      width: 1.75vh;
      color: transparent;
    }
    .geodir_subcategory1c {
      float: left;
      display: inline;
      clear:none !important;
      margin: 0;
      width: 1.75vh;
      color: transparent;
    }
    
    .geodir_subcategory2a {
      float: left;
      display: inline;
      clear:none !important;
      margin: 0;
      width: 1.75vh;
      color: transparent;
    }

    The final result is in screenshot 1

    The only problem that remains is that the checkboxes deliver the output “yes”, which is not visible due to the CSS transparent attribute, but its still there (see screenshot2). @guust: is it easily possible to remove the “yes” output?

    #411140

    Guust
    Moderator
    Post count: 29970

    Be aware that you now have created a different structure than the standard WordPress structure.
    Your listings will still need to be in a category that is added at Place > Place categories. Although you may have called your custom field “categories”, they are NOT categories as required for WordPress to work.
    Every listing will still need to be in at least one category.
    Custom fields cannot replace categories, they can only be additional to categories.

    The code to hide the “yes” output is at https://wpgeodirectory.com/docs/custom-field-examples/

    
    
    .geodir_parking .geodir-i-checkbox {
    display: none;
    }

    Adjust as required.

    #411142

    David Sirius
    Expired Member
    Post count: 163

    Yep, I’m aware thanks Guust. Hence, I will have to always replicate and mirror actual categories and the pseudo categories in custom fields.

    The code (adjusted for the sub cats) didnt work, it actually just removed the icon and the hidden “yes” was still there.

    Code I used:

    
    
    .geodir_subcategory1a .geodir-i-checkbox {
      display: none;
    }
    #411146

    Guust
    Moderator
    Post count: 29970

    Please give us a URL of the page where we can inspect that code. Thanks

Viewing 6 posts - 16 through 21 (of 21 total)

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
20% Discount Offer
Hurry! Get your 20% discount before it expires. Get 20% Discount