Okay
  Public Ticket #442760
Category Styling does not work
Closed

Comments

  • Dario de Judicibus started the conversation

    I defined a category and uploaded an image for Background Image or Pattern and another image for Header Background Image: they do not work. When I click on menu related to that category, I see the header background image loaded for another category.

  • Dario de Judicibus replied

    I have looked at WP database by phpMyAdmin and the background header image for each category is correctly stored in wp_options database, however, when I inspect #mgm-header-opacity the background header image used is always that of the FIRST category. The background header images of the other categories are completely ignored.

  • Dario de Judicibus replied

    Hi. Is there anybody? I need support!

  • Dario de Judicibus replied

    I made additional tests and it looks like that the theme ignores completely the setting of all categories but the first one. In fact, not only the background header image is always the one associated to the first category, but the color is always the same. Even if in the database the options are correct: each category is associated to a different color & header image. I need some help. I cannot understand what\'s wrong.

  • Dario de Judicibus replied

    I looked at part-cat-options.php but I cannot fond anything wrong. I have no other ideas how to troubleshoot this.

  •  93
    djwd replied

    Hi there,

    I\'m kinda confused about this one. Please consider that the category customizer is meant for parent categories, customizing a sub-category differently than its parent may lead to undesired effects.

    If that\'s not the issue kindly provide admin access and possibly describe the steps to replicate this, and I\'ll take a peek.

    Regards
    djwd

    Regards
    djwd

  •   Dario de Judicibus replied privately
  •  93
    djwd replied

    Hi there,

    you can provide them here by marking the posts as \"Private Reply\".

    I would need admin access, you can create a temporary one. Kindly also post the steps to replicate the issue, thank you.

    Regards
    djwd

    Regards
    djwd

  • Dario de Judicibus replied

    OK, before giving you access we need to fix the problem related to missing first_post_image() function (I submitted a ticket for that).

  •  93
    djwd replied

    The issue was addressed in the related ticket.

    Regards
    djwd

    Regards
    djwd

  •   Dario de Judicibus replied privately
  •  93
    djwd replied

    Hi there,

    You don\'t need necessarily an e-mail address when a user with admin privileges creates a new account. Just enter any data and uncheck the option \"Send this password to the new user by email.\"

    Regards
    djwd

    Regards
    djwd

  •   Dario de Judicibus replied privately
  •   Dario de Judicibus replied privately
  •  93
    djwd replied

    HI there,

    I can\'t see no content in your categories, hence the colors cannot be verified as clicking the category will take you to the 404 page (which doesn\'t have any category or color).

    I\'ve published a test post in the \"Giochi\" category and now it turns orange as expected.

    Hope it helps

    Regards
    djwd

    Regards
    djwd

  • Dario de Judicibus replied

    I had to remove all posts. Sorry but it was necessary and I did not know when you was going to perform a test. I let you know when all posts will be back., and what to do to replicate the problem. It will take a couple of days. I will message you gere when ready.

  •  93
    djwd replied

    Alright no problem, keep me posted.

    Regards
    djwd

    Regards
    djwd

  •   Dario de Judicibus replied privately
  •   Dario de Judicibus replied privately
  •    djwd replied privately
  •   Dario de Judicibus replied privately
  • Dario de Judicibus replied

    Hi, any news? I had to stop the development of site because of the problem. I have no idea why it does not work. Is it a bug? I had not added images this time, only colors, so it is easier for you to troubleshoot the problem. Thank you in adavnce.

  •  93
    djwd replied

    Hi there,

    the colors \"confusion\" is happening when a certain category has posts in two (or more) parent categories that has different color set.

    For example the Giochi category gets green instead of yellow because it has posts from the Fumetti category as well, having the Fumetti cat a lower ID than then the Giochi category, it takes precedence over it.

    A possible workaround (without having to control ID\'s) could be to enter some custom CSS (targeting the category ID class that is added to the body element) to force the category page to have a specific color regardless categories of posts. Since you\'re using a child theme this should be easier then using the Custom CSS textarea.

    PS: Thanks for explaining the rating thing, I was very surprised when I saw that! By the way if you wish you can easily change it from the Downloads section of your ThemeForest dashboard.

    Regards
    djwd

    Regards
    djwd

  • Dario de Judicibus replied

    Thank you for hint about review. I changed the rating. I did not know that it was editable. I am a little bit confused by your explanation (my fault, of course). I thought that colors were associated to categories, not posts. Since a post may belong to more than one category (for example, an article about SpiderMan can belong to both Cinema and Comics), I expect that the color is inherited from the selected category. So, when the page is related to category Cinema, everything should be red, when is related to category Comics, it should be green. Is the Theme logic different? Can you help me to better understand the workaround you suggest? Yes, a child theme allows me a lot of flexibility. Let me just understand what should I do to say: \"hey, everything in this page should be blue!\". I also would like to change the admin panel for categories to use for images the same approach you used for logo (a small bar to cancel the association with an image, a button to upload). I always forget that uploading a new image REMOVE the previous one with no warning.

  •  93
    djwd replied

    Hi there,

    The system may not be perfect but that is how WP handles category archives.
    These are the css classes affecting the category color:

    .cat-bg, #mgm-header-opacity, .nav-wrap#nav-clone .mgm-logo, .nav-wrap#nav-clone .mgm-logo-text, .sticky .entry-details, #mgm-full-collapsible .btn-success:hover, #mgm-full-collapsible .btn-success:focus, #mgm-full-site-info, .mgm-cat a, .flex-cat, .mgm-title.mgm-title-skin:after, .mgm-title a:after, .mgm-title a:before, .mgm-title span:after, .mgm-title span:before, .inverse .boxed, .reply-wrap .mgm-reply a, .article-content-wrapper:hover .img-hover-info, .rw-criteria.stars-preview, .rw-bar-progress, .social-count-plus ul li, .cat-panes-content .entry-details, .cat-panes-content .entry-details a, .rw-user-rating-desc .user_rating, .rw-user-rating-desc .your_rating, .mgm-share-text, .flex-direction-nav, .woocommerce #comments .star-rating, .woocommerce-page #comments .star-rating, .mgm-onsale, .btn-success, .btn-success:hover, .btn-success:active, .btn-success:focus, .btn-success.disabled, .btn-success[disabled], .generic-button a, .actions a.mark-read, div.item-list-tabs ul li a span, .taxonomy-description p, .mgm-search-icon-trigger:before, .mgm-title span.mgm-stripe, .jackbox-panel:hover, .woocommerce .widget_price_filter .ui-slider .ui-slider-handle, .woocommerce-page .widget_price_filter .ui-slider .ui-slider-handle, .woocommerce-review-link, .label-minus, .label-plus, .single_add_to_cart_button, .mgm-product-single-wrap .price, .shop-banner-price .price, span#subscription-toggle a, span#favorite-toggle a, .woocommerce-result-count
    

    If you\'re editing directly the less files, you could filter them by using the classes wordpress give to the body, for example:

    .category-fashion {
    
    .cat-bg, #mgm-header-opacity, .nav-wrap#nav-clone .mgm-logo, .nav-wrap#nav-clone .mgm-logo-text, .sticky .entry-details, #mgm-full-collapsible .btn-success:hover, #mgm-full-collapsible .btn-success:focus, #mgm-full-site-info, .mgm-cat a, .flex-cat, .mgm-title.mgm-title-skin:after, .mgm-title a:after, .mgm-title a:before, .mgm-title span:after, .mgm-title span:before, .inverse .boxed, .reply-wrap .mgm-reply a, .article-content-wrapper:hover .img-hover-info, .rw-criteria.stars-preview, .rw-bar-progress, .social-count-plus ul li, .cat-panes-content .entry-details, .cat-panes-content .entry-details a, .rw-user-rating-desc .user_rating, .rw-user-rating-desc .your_rating, .mgm-share-text, .flex-direction-nav, .woocommerce #comments .star-rating, .woocommerce-page #comments .star-rating, .mgm-onsale, .btn-success, .btn-success:hover, .btn-success:active, .btn-success:focus, .btn-success.disabled, .btn-success[disabled], .generic-button a, .actions a.mark-read, div.item-list-tabs ul li a span, .taxonomy-description p, .mgm-search-icon-trigger:before, .mgm-title span.mgm-stripe, .jackbox-panel:hover, .woocommerce .widget_price_filter .ui-slider .ui-slider-handle, .woocommerce-page .widget_price_filter .ui-slider .ui-slider-handle, .woocommerce-review-link, .label-minus, .label-plus, .single_add_to_cart_button, .mgm-product-single-wrap .price, .shop-banner-price .price, span#subscription-toggle a, span#favorite-toggle a, .woocommerce-result-count 
    { background-color: blue; } 
    
    }
    

    And force a specific category to have a specific color regardless posts.

    Hope it helps

    Regards
    djwd

    Regards
    djwd

  • Dario de Judicibus replied

    Surely it does, even if I am not an expert of LESS. I am used to use directly CSS, so I have to give a look at LESS and understand how to use it. Just a question: can I do that in child theme? I do not want to change the main one, of course.

  •  93
    djwd replied

    Uhm it should work but I didn\'t test it out, you could also avoid LESS if you need to look into it and include it in a child theme. It will result in a longer code but it will save you time.

    With traditional CSS, you\'d need to prepend the .category-fashion class to each subcategory, basically after every comma, as such:

    .category-fashion .cat-bg, .category-fashion #mgm-header-opacity, .category-fashion .nav-wrap#nav-clone .mgm-logo, .category-fashion .nav-wrap#nav-clone .mgm-logo-text, .category-fashion .sticky .entry-details, .category-fashion #mgm-full-collapsible .btn-success:hover, .category-fashion #mgm-full-collapsible .btn-success:focus, .category-fashion #mgm-full-site-info, .category-fashion .mgm-cat a, .category-fashion .flex-cat, .category-fashion .mgm-title.mgm-title-skin:after, .category-fashion .mgm-title a:after, .category-fashion .mgm-title a:before, .category-fashion .mgm-title span:after, .category-fashion .mgm-title span:before, .category-fashion .inverse .boxed, .category-fashion .reply-wrap .mgm-reply a, .category-fashion .article-content-wrapper:hover .img-hover-info, .category-fashion .rw-criteria.stars-preview, .category-fashion .rw-bar-progress, .category-fashion .social-count-plus ul li, .category-fashion .cat-panes-content .entry-details, .category-fashion .cat-panes-content .entry-details a, .category-fashion .rw-user-rating-desc .user_rating, .category-fashion .rw-user-rating-desc .your_rating, .category-fashion .mgm-share-text, .category-fashion .flex-direction-nav, .category-fashion .woocommerce #comments .star-rating, .category-fashion .woocommerce-page #comments .star-rating, .category-fashion .mgm-onsale, .category-fashion .btn-success, .category-fashion .btn-success:hover, .category-fashion .btn-success:active, .category-fashion .btn-success:focus, .category-fashion .btn-success.disabled, .category-fashion .btn-success[disabled], .category-fashion .generic-button a, .category-fashion .actions a.mark-read, .category-fashion div.item-list-tabs ul li a span, .category-fashion .taxonomy-description p, .category-fashion .mgm-search-icon-trigger:before, .category-fashion .mgm-title span.mgm-stripe, .category-fashion .jackbox-panel:hover, .category-fashion .woocommerce .widget_price_filter .ui-slider .ui-slider-handle, .category-fashion .woocommerce-page .widget_price_filter .ui-slider .ui-slider-handle, .category-fashion .woocommerce-review-link, .category-fashion .label-minus, .category-fashion .label-plus, .category-fashion .single_add_to_cart_button, .category-fashion .mgm-product-single-wrap .price, .category-fashion .shop-banner-price .price, .category-fashion span#subscription-toggle a, .category-fashion span#favorite-toggle a, .category-fashion .woocommerce-result-count {background-color: blue}

    You could also use .category-ID (e.g. category-13 ) instead of .category-slug as per the example.

    Regards
    djwd


    Regards
    djwd

  • Dario de Judicibus replied

    OK, I\'ll try... really a pity there is not a simpler way to do it. That is really a long list of css classes to manage... but what do you do in your code exactly? Do you use this approach? Can you tell me in which file you assign category colors? I might give a look at your code to inspire for a better solution... Thank you in advance.

  •  93
    djwd replied

    Hi,
    I don\'t use this approach, as my category structure is usually different and I try not to give a post several parent categories. In case I have to, I wouldn\'t use category colors as they might will result confusing to the user seeing the same post having different colors. In my view category colors should be used to create some sort of network and colors should separate topics that are unrelated to each other.

    This is some kind of workaround I provided to achieve what you wanted.

    By the way, category colors are handled partials/part-cat-options.php

    Regards
    djwd


    Regards
    djwd