Find Answers and Get Support › Forums › Cera – Intranet & Community Theme › Website Setup › Posts › Blog page : Display category filter, advanced customization
- This topic has 11 replies, 4 voices, and was last updated 4 years, 7 months ago by
Manathan.
-
AuthorPosts
-
Pilgrim Creative TeamParticipant@pilgrimteam
- 19 Topics
- 55 Posts
Hello again!
I am using the dynamic category filter on my blog page. My categories have quite long names but the number is limited to 6, it might go up to 8 in the future but no more.
At the moment, only the first half is displayed, and the rest is hidden in the “ellipsis” button (three dots), and shows in a pop-up.
Is there a simple way to display all of the categories at all times, instead of hiding them under the ellipsis button? It’s not an issue for me if it’s displayed on 2 lines.On a related note, you will see I added some text right before the filter to indicate what the filter does. I’ve added this text through a pseudo-element which is definitely not best practice. Is there a way to add this maybe via a php snippet or a hidden option somewhere? I hope it’s ok to add this in the same question. For me both of these topics fall under customization of the filter.
Thanks a lot!
June 18, 2020 at 11:21 #14076@themosaurusrex- 0 Topics
- 2048 Posts
Hi @pilgrimteam,
Yes, this is very similar to customization. However, we do believe that it is a limitation stemming from our code base and we will address it as much as we can to help you solve this.
To display string before the post filters and make it future-proof, simply add the following code snippet to your website:
/** * Add a string befor the post filters. */ function cera_custom_before_posts() { echo '<p>Some string to display before</p>'; } add_action( 'cera_before_posts', 'cera_custom_before_posts', 5, 1 );
To add this code snippet to your site, we recommend that you use a the Code Snippets plugin (https://wordpress.org/plugins/code-snippets/). If you have never activated this plugin, please read the following post:
Please also note that we don’t provide any theme customization. So, you shouldn’t expect other snippets from us unless it’s to fix an issue or to address a limitation stemming from our own codebase. We always try our best to help theme users whenever we can and only provide code snippets out of courtesy to prevent them from waiting for the next update.
June 18, 2020 at 14:28 #14090@themosaurusrex- 0 Topics
- 2048 Posts
@pilgrimteam To remove the ellipsis button, simply add the following code snippet to your website the same way as mentioned above:
/** * Remove the "..." Button From the Post Filters */ add_filter( 'cera_grimlock_priority_nav_enqueued', '__return_false', 1000, 1);
And also the following CSS bit.
/** * Remove the "..." Button From Post Filters. */ .posts-filters__child:not([instance]) { opacity: 1 !important; pointer-events: auto !important; }
To add this code snippet to your site, we recommend that you paste it to the Custom CSS panel of your WordPress Customizer. Just go to your dashboard and navigate to “Appearance > Customize > Additional CSS”.
Pasting your code snippet there should do the trick for you.
June 18, 2020 at 14:44 #14093Pilgrim Creative TeamParticipant@pilgrimteam- 19 Topics
- 55 Posts
The first snippet broke my website ?
I’ve added a string in French, changing the apostrophe by the html entity ' , could that be what caused the issue?
Anyway I’ve now deleted the plugin and I’ll have to be careful, following the instructions of the Code Snippet plugin to put it in safe mode before going further with this…I appreciate your help, though I still have to tweak some stuff before I can see if it works! ?
June 18, 2020 at 15:46 #14094@themosaurusrex- 0 Topics
- 2048 Posts
@pilgrimteam Oh, that’s not good. Could you post the french string in your next reply please? Is it
Filtrez à l'aide des catégories suivantes:
?June 19, 2020 at 10:41 #14116Pilgrim Creative TeamParticipant@pilgrimteam- 19 Topics
- 55 Posts
Exactly!
Except I replaced the apostrophe as follows:Filtrez à l'aide des catégories suivantes:
Might be the accent that broke it?
Anyways, not to worry, there’s probably enough here for me to find a solution and update this topic… I wouldn’t want to make you work extra ?Have a great weekend!
June 19, 2020 at 11:44 #14124@themosaurusrex- 0 Topics
- 2048 Posts
@pilgrimteam I really have no idea why this broke your website. I’ve coded this on my demo and it worked like a charm:
/** * Add a string befor the post filters. */ function cera_custom_before_posts() { echo '<p>Filtrez à l'aide des catégories suivantes:</p>'; } add_action( 'cera_before_posts', 'cera_custom_before_posts', 5, 1 );
June 22, 2020 at 16:21 #14177Pilgrim Creative TeamParticipant@pilgrimteam- 19 Topics
- 55 Posts
Hello again,
sorry for the delay, I had to wait to have complete FTP access before digging further in snippets 🙂
I’ve tried the snippet again, the one to add a string before the filter, and it works like a charm. no idea why it broke earlier…So thank you so much for your help.
The other bit however, removing the ellipsis, doesn’t work (i’ve added the php snippet and the css). I’m sharing the result just in case, however I think you’ve done more than enough for me already ? so I’m not expecting any more custom snippets or extra work on your part! I’ll just do without it!
Thanks for the excellent support!
June 26, 2020 at 13:10 #14283@themosaurusrex- 0 Topics
- 2048 Posts
@pilgrimteam I’m sorry about that. We’ll be back to you to fix this, this way we can close this issue.
If you are happy with your theme so far, feel free to review our theme on ThemeForest. Each review is greatly appreciated as it helps us grow on the platform and allows us to improve the quality of our products, bring new features and make even more awesome themes! To do so, it is very simple: go to your ThemeForest downloads page (https://themeforest.net/downloads), find your theme and click on the stars.
Thank you!
June 27, 2020 at 14:15 #14310@themopteryx- 0 Topics
- 615 Posts
Hi @pilgrimteam,
Here is an updated CSS snippet to solve the filters display (without the ‘…’ more dropdown).
Simply add the following code snippet to your website:/** * Remove the "..." Button From Post Filters. */ .posts-filters__child:not([instance]) { opacity: 1 !important; pointer-events: auto !important; overflow: visible; max-height: none; } .posts-filters__child:not([instance]) .posts-filter { display: flex; } .posts-filters__child:not([instance]) .posts-filter li { display: inline-block; margin: 5px; }
Hope this will solve your issue!
Regards,
June 29, 2020 at 11:09 #14329Pilgrim Creative TeamParticipant@pilgrimteam- 19 Topics
- 55 Posts
Waow! That did it. Thanks for this amazing support. Looking really good now!
I’ll be sure to give you 5 stars ?June 29, 2020 at 11:38 #14339@themodactyl- 0 Topics
- 6690 Posts
Hi @pilgrimteam,
I’m glad to read that @themosaurusrex and @themopteryx have been able to help you!
Thank you very much for your great rating! ☺️
Cheers,
June 30, 2020 at 09:43 #14396 -
AuthorPosts
The topic ‘Blog page : Display category filter, advanced customization’ is closed to new replies.