User19 - JoomlaXTC NewsPro
In the User 19 position use our JoomlaXTC Deluxe News Pro Module to display a tabbed category filter. In order to recreate the layout upload the Module to your Joomla install. Next publish the module in User19 position and open then module. Next, select the pawcreative_category_filter_user19 template from the demo Templates included in the module. Set the Columns to 3 and the Rows to 1 and Pages to 1.
Make sure to set the advanced parameters layout parameter to select 'bootstrap'.
In order to make the module work with your own categories, you will need to modify the CSS:
Open the module and select the edit button next to the template selector. This will load the HTML and CSS from the selected template into the module.
Next, select the Advanced Tab and expand the CSS window to edit.
We will now edit a few lines to add your Category ID's. First go to the Content component and view your categories and write down the Category ID #'s. Next, go back to the module CSS and we will add the values. Simply replace the #'s after the portfolio_ with your Category ID's.
.filtrocontainer input.filtro_all_selector:checked ~ .portfolio li, .filtrocontainer input.filtro_selector_1:checked ~ .portfolio .portfolio_133, .filtrocontainer input.filtro_selector_2:checked ~ .portfolio .portfolio_137, .filtrocontainer input.filtro_selector_3:checked ~ .portfolio .portfolio_139, .filtrocontainer input.filtro_selector_4:checked ~ .portfolio .portfolio_140 { opacity: 1; } .filtrocontainer input.filtro_selector_1:checked ~ .portfolio li:not(.portfolio_133), .filtrocontainer input.filtro_selector_2:checked ~ .portfolio li:not(.portfolio_137), .filtrocontainer input.filtro_selector_3:checked ~ .portfolio li:not(.portfolio_139), .filtrocontainer input.filtro_selector_4:checked ~ .portfolio li:not(.portfolio_140) { opacity: 0.1; } .filtrocontainer input.filtro_selector_1:checked ~ .portfolio li:not(.portfolio_133) span, .filtrocontainer input.filtro_selector_2:checked ~ .portfolio li:not(.portfolio_137) span, .filtrocontainer input.filtro_selector_3:checked ~ .portfolio li:not(.portfolio_139) span, .filtrocontainer input.filtro_selector_4:checked ~ .portfolio li:not(.portfolio_140) span { display:none; }
For more information on styling and configuring the Deluxe News Pro Module visit the full documentation HERE
