Styling team member page

Hi @clgm

Unfortunately, there are currently no settings to change the styles/colors for the single team page. If you want to change the default styles, it needs to be done with custom CSS.

Thank you.

That is most unfortunate, as the plugin works so well for us otherwise.

Thanks for your reply.

Hi @srafiz

I have styled the single team pages, as you suggested.

I wonder if you could change something in the plugin HTML for the single page.

The h2.tlp-member-title element should really be an h1 not an h2, for the page to be syntactically correct.

Is there a reason for choosing this to be a h2-level heading? A page heading should be h1.

Many thanks

I’m also getting the following console errors from the page, related to this plugin –

DevTools failed to load source map: Could not load content for https://cjboydsolicdev.wpengine.com/wp-content/plugins/tlp-team/assets/css/tlpteam.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

DevTools failed to load source map: Could not load content for https://cjboydsolicdev.wpengine.com/wp-content/plugins/tlp-team/assets/vendor/swiper/swiper-bundle.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Can you look at this please?

Sorry, one more thing – when editing the shortcode, there is the option to display the team member designation, but not the department.

How can we also display the team member department?

Thanks

Hi @clgm

Please check the below answers:

1. Change the HTML for the single page.
Ans: If you want to change the HTML for the single page, you need to override the single template from your child theme. Please check the process below:
1. Copy this template file from plugin-> tlp-team/templates/single-team.php
2. Create tlp-team folder to your child theme and paste the single-team.php file.
3. Edit the file as needed.

2. Console errors for .map files.
Ans: These are not ERRORS, they are warnings. .map files are for “Source Maps”. These are special files to debug CSS/JS before they are minified/compiled. They do not impact the running of your site. This is because they are only ever loaded when you open the inspector/console/debugger window of your Browser. Therefore their absence does not affect the end-users in any way. So please do not worry about them.

3. How to display the team member department.
Ans: This feature is exclusive to Elementor Widgets. To try it, you need to install the Elementor page builder plugin and use our provided team widgets. The widgets have more customization and style options than the shortcodes. Please feel free to try it.

Thanks for understanding. Thank you.

Hi @srafiz thanks for your comprehensive reply.

I’ve done all the customising that I need to. One thing I haven’t been able to address is that the submenu for individual team members in responsive mode (e.g. tablet) doesn’t work. It works perfectly in desktop view.

e.g. https://cjboydsolicdev.wpengine.com/about-us/

Other submenus on the site work correctly.

Are you able to advise please?

Hi @clgm

I haven’t found any issues with the responsive submenu of the team member single pages: https://prnt.sc/k0Q1TTcvv5sW
Can you please elaborate on the problems you are facing here?

Thank you.

Hi @srafiz

Have a look in tablet view, or mobile phone landscape (i.e. viewport > 600px), so that the menu is visible rather than the hamburger icon. When you tap on the “About us” menu item, the submenu appears briefly and then disappears before you can tap on any items. Whereas if you tap on the “Our services” menu item, the submenu appears and stays visible, and the submenu items work.

Hi @clgm

The issue is not related to our plugin. But anyway, please check the below notes:

The root cause for the issue is related to the link assigned to the ‘About Us’ menu item (https://cjboydsolicdev.wpengine.com/about-us/). When the ‘About Us’ item is clicked, it triggers the on-click behavior briefly (which is to show the submenu), but immediately, it reloads and redirects the page to its assigned link (which is the about us page itself). The solution is to set the menu link to ‘#’ or nothing (from the Appearance->Menus) and it will trigger the on-click behavior normally.

Hopefully, your issue will be resolved. I hope you will investigate any issues thoroughly in the future before posting them in the plugin support forum.

Thank you. Have a nice day.

@srafiz thank you, if I do as you suggest (set the menu link to ‘#’ or nothing) the team page doesn’t display at all (see 2nd “About us” item on the main menu for https://cjboydsolicdev.wpengine.com/ as an example).

https://cjboydsolicdev.wpengine.com/about-us/ displays the team page correctly, but we now have another mysterious problem – the links for the individual team members no longer work.

So if I navigate to the “All members” item in the WP dashboard and click on “View” for any individual team member, I get a 404 error.

I have cleared all caches and this hasn’t resolved the problem.

Hi @clgm

It looks like you need to re-save the permalink. Navigate to Dashboard->Settings->Permalinks, scroll to the bottom, and click on Save Changes. This will resolve the 404 error.

As for the ‘About Us’ page link, you may need to think of other solutions such as you can keep the page link to another menu item or you can create another dropdown under the ‘About Us’ menu (nested dropdown). By the way, long press on the ‘About Us’ menu item from the tablet will still trigger the dropdown.

Hope that helps. Thank you.

Thanks @srafiz that resolved the 404 error.

You’re right, long press on the ‘About Us’ menu item from the tablet will still trigger the dropdown. I’m not sure why this isn’t required for the submenu on the other menu item (“Our services”).