Profile name on header is in black text

Hello @az45,

Thank you for reaching out to us regarding the issue with the profile name text color on your homepage.

To better understand the issue, could you please provide us with a screenshot of the profile name as it appears while scrolling on the homepage? This will help us identify the exact problem and provide you with a more accurate solution.

Once we have the screenshot, we’ll guide you through the steps to change the text color and ensure it is visible at all times.

Thank you for your cooperation.

Best regards,
Dip Saha

Thanks for the response.

This issue is occurring on the demo site called “University” which was created by Tutor LMS. Upon importing the demo site because I wanted to see how the Tutor LMS plugin works, I immediately noticed how the profile name on the header part is black and it’s very difficult to see even if the background image is white. The color also doesn’t seem to be editable using the header customizer of WordPress perhaps because it is “hard-coded” or generated by the plugin itself.

See screenshot through this link:

https://drive.google.com/file/d/156vThSoGZx9ZerO0qNcfi6vvdjjF5spV/view?usp=sharing

Hello @az45,

Thank you for providing the screenshot.

To make the profile name more visible, you can change its color using custom CSS. Here’s how you can do it:

Using WordPress Customizer:

• Go to Customizer:
  1. In your WordPress dashboard, navigate to Wp-Admin > Appearance > Customize > Additional CSS.
• Add Custom CSS:
  1. Add the following CSS code to change the profile name text color:

.header-profile-name { /* Adjust this selector to match your theme's structure */
    color: #ffffff; /* Change to your desired color */
 }

• Click Publish to apply the changes.

To ensure the CSS applies correctly, you might need to inspect the element to find the exact CSS selector used by your theme for the profile name. Here’s how:

• Inspect Element:
  1. Right-click on the profile name in your browser and select Inspect or Inspect Element.
  2. Look for the specific class or ID associated with the profile name text.

• Adjust CSS Selector:
  1. Replace .header-profile-name in the CSS code with the actual class or ID you found.

For example, if the profile name has a class of profile-name and is within a div with a class header, the CSS might look like this:

.header .profile-name {
    color: #ffffff; /* Change to your desired color */
}

This should make the profile name text more visible while scrolling on the homepage. If you have any further questions or need additional assistance, please feel free to reach out.

And If your problem is solved please make sure you hit the Resolved button. Thank You.

Best regards,
Dip Saha

Thanks for the detailed instructions.

I really appreciate it.

I do have other things I wish to clarify about Tutor LMS, specifically the customizability of the course pages. On some online tutorials, I noticed how when they install Tutor LMS and import certain demo sites, their course pages appear differently and I’m specifically talking about “tab menus” which contain certain information.

On the same demo site I had an issue with about the profile name being in black text, when I go to one of the course pages, first of all, only “Course Info” and “Reviews” appear as tab menus. Others such as “Curriculum” and “Q&A” are missing. (Screenshot: https://drive.google.com/file/d/1dWtA7z8z3Uo-i0mGnghBcy7MCI3H7XfB/view?usp=sharing)

However, I want “Curriculum” and “Q&A” to also be added as tab menus similar to that of how it appears on online tutorials simply because it evenly organizes information and does not clutter one tab menu. (Screenshot: https://drive.google.com/file/d/18M8JwLYphUyuvKI7smNhawF2r4bWLAh_/view?usp=sharing)

I did try to add “Curriculum” from the backend (WordPress admin dashboard) by adding sample course content and text but for some reason it doesn’t display as a tab menu on the actual course page. Instead, it gets displayed at the very bottom of the page. (Screenshot: https://drive.google.com/file/d/1B1PAxb_DSitLgqBZhdOI3tUrq6yGxoSQ/view?usp=sharing)

Is there a way to add “Curriculum” and “Q&A” as tab menus on the course page?

Thanks for the detailed instructions.

I really appreciate it.

I do have other things I wish to clarify about Tutor LMS, specifically the customizability of the course pages. On some online tutorials, I noticed how when they install Tutor LMS and import certain demo sites, their course pages appear differently and I’m specifically talking about “tab menus” which contain certain information.

On the same demo site I had an issue with about the profile name being in black text, when I go to one of the course pages, first of all, only “Course Info” and “Reviews” appear as tab menus. Others such as “Curriculum” and “Q&A” are missing. (Screenshot: https://drive.google.com/file/d/1dWtA7z8z3Uo-i0mGnghBcy7MCI3H7XfB/view?usp=sharing)

However, I want “Curriculum” and “Q&A” to also be added as tab menus similar to that of how it appears on online tutorials simply because it evenly organizes information and does not clutter one tab menu. (Screenshot: https://drive.google.com/file/d/18M8JwLYphUyuvKI7smNhawF2r4bWLAh_/view?usp=sharing)

I did try to add “Curriculum” from the backend (WordPress admin dashboard) by adding sample course content and text but for some reason it doesn’t display as a tab menu on the actual course page. Instead, it gets displayed at the very bottom of the page. (Screenshot: https://drive.google.com/file/d/1B1PAxb_DSitLgqBZhdOI3tUrq6yGxoSQ/view?usp=sharing)

Is there a way to add “Curriculum” and “Q&A” as tab menus on the course page?

Hello again @az45,

Thanks a lot for the appreciation.

To add “Curriculum” and “Q&A” tabs to your course pages you can use use Elementor to build the course page, please follow these steps:

• Install and Activate Elementor:
  1. Ensure that Elementor is installed and activated on your site. You can find it in the WordPress repository.

• Install Elementor Addons for Tutor LMS:
  1. If not already done, install and activate the Elementor Addons for Tutor LMS. This addon provides the necessary widgets to customize Tutor LMS components.
• Edit Course Page with Elementor:
  1. Navigate to Tutor LMS > Courses and edit the course you wish to customize.
  2. Click on Edit with Elementor to open the Elementor editor.
• Add Course Tabs Widget:
  1. In the Elementor editor, search for the “Tutor LMS Course Tabs” widget.
  2. Drag and drop this widget onto your course page where you want the tabs to appear.
• Customize Tabs:
  1. In the widget settings, select the tabs you want to display, including “Curriculum” and “Q&A”. Ensure they are checked along with any other tabs you wish to include.
• Style Your Tabs:
  1. Use Elementor’s styling options to adjust the appearance of the tabs to fit your site’s design.
• Publish/Update the Page:
  1. Once you’re satisfied with the customization, click Update to save your changes.

If you encounter any issues or need further assistance, please don’t hesitate to reach out.

Best regards,
Dip Saha

• This reply was modified 4 months ago by dipsaha.
• This reply was modified 4 months ago by Steven Stern (sterndata).

Hi.

I followed your instructions in adding the “course tabs” widget using Elementor editor but there weren’t any results for “Tutor LMS Course Tabs”. (Screenshot: https://drive.google.com/file/d/1n6yGVOARfDIbooitxUbcj9uwLeb22L15/view?usp=sharing)

Instead, the widgets of Tutor LMS all start with the word “course” (such as “course reviews”, “course carousel”, etc.). I was able to find the widget that would allow me to display tab menus and the name of that widget is called “course content”. I did drag and drop it on to the course page but then “curriculum” still gets displayed at the bottom of the page and not as an individual tab menu. (Screenshot: https://drive.google.com/file/d/1BBpYJPLY4xtNeQ419zzbNhBNo1_6CVRM/view?usp=sharing)

When I click on the “course curriculum” element, the Elementor editor only gives me the option to change the text or name in which it appears on the page. It does NOT give any settings to add it as a “tab menu”. What you described before about going to the widget settings and selecting which tab menus to display does not seem to exist on the Elementor editor. (Screenshot: https://drive.google.com/file/d/1CGwCs_HXY4RQNx5s6tIDADn0FSarlZ2X/view?usp=sharing)

I appreciate the help.

By the way, I currently am using a different demo site than the previous one. In the previous demo site, there were only 2 tab menus that appeared by default on the course page which is “Course Info” and “Reviews” (which I provided screenshots before). However, on the current one, there are 4 tab menus that appear by default which are “Course Info”, “Reviews”, “Q&A” and “Announcements”.

What I mean to say is that I didn’t do anything to make the 2nd demo site display 4 tab menus. It already came with the demo site as I imported it. In this case, the only missing tab menu is “Curriculum” which I want to add if possible. What I understand from this is that different demo sites are “coded” to appear in certain ways which is why some items can’t be added as tab menus unless by code.

Could this possibly be the case?

Hi

I apologize for any confusion caused by my previous instructions. It looks like there might have been a misunderstanding regarding the widget names and their functionalities.

To achieve the desired layout with the curriculum displayed as an individual tab, please follow these updated steps:

• Setting up Tabs in Elementor:
  We can use Elementor’s built-in Tabs widget to create the tab structure manually.
  1. Open your course page with Elementor.
  2. Add the Tabs widget from Elementor’s widget panel to your desired location on the page.
  3. Customize the tab titles (e.g., “Announcement”, “Curriculum”, “Reviews”).

• Adding Course Elements to Tabs:
  1. Click on each tab in the Tabs widget to edit its content.
  2. For the “Curriculum” tab, drag and drop the “Course Curriculum” widget into this tab’s content area.
  3. For the “Reviews” tab, add the “Course Reviews” widget and so on.
• Saving and Previewing:
  1. Save your changes in Elementor.
  2. Preview the course page to ensure the tabs are functioning as expected and the curriculum is displayed correctly within the tab.

The number of tab menus depends on your course settings. If you turn off the Q&A section in the course settings, it will not appear in the tabs. If it is turned on, it will show up under the “Course Content”. The same applies to other sections; their visibility in the tabs is determined by the course settings.

I hope these steps help in setting up your course page as desired. If you encounter any further issues or have any additional questions, please feel free to reach out.

Best regards,
Dip Saha

• This reply was modified 4 months ago by dipsaha.
• This reply was modified 4 months ago by dipsaha.

Thanks for the response.

I followed what you said about using the “tab” widget instead and it still does not work. The reason why is because only text content can be put inside the “tab” widget. (Screenshot: https://drive.google.com/file/d/18szZNyCA9SYv_qDuwAtzqLcRvyJk16y4/view?usp=sharing)

I tried dragging and dropping the “course review” widget into the “tab” widget and it does not work. The “course review” only appears outside (top, bottom, left or right) of the “tab” widget. Not inside of it. (Screenshot: https://drive.google.com/file/d/1F9EaWIoXXffUf2Dljc2Zpxwe2OA3co2Z/view?usp=sharing)

Do you think that the “course curriculum” not displayable as a “tab menu” is a technical issue having to do with how the demo sites were perhaps altered by the developers? When I imported one of their demo sites before, I noticed some courses didn’t even have any pictures (thumbnails) on them and I actually had to manually add them. In some cases, I even had to manually add footer menus. It looked like the demo site was somewhat tampered with.

Regarding the tab menus, the screenshot I gave you before of a video tutorial (made a few years ago) is actually making use of the same demo site I imported. On their side, all the tab menus are complete (Screenshot: https://drive.google.com/file/d/18M8JwLYphUyuvKI7smNhawF2r4bWLAh_/view?usp=sharing). I just don’t know why it appears differently on my side even though I’m using the exact same demo site as them.

I appreciate the help.

Hi

It appears there are compatibility issues with placing widgets inside the “tab” widget. The inability to add widgets to “Tab” containers might be due to Elementor settings. Ensure you have activated Flexbox Container and Nested Elements in the settings.

To do this, go to Elementor > Settings > Experiments and activate these two options. Check the screenshot for reference: https://snipboard.io/9CWcMO.jpg.

By default, the course curriculum is added below the “Course Content” widget rather than in a tab menu. On many sites, users may modify the code so that it appears in a tab menu.

If you continue to face any difficulties, please let me know, and we can explore further options.

Best Regards,
Dip Saha

Hi.

I activated both Flexbox Container and Nested Elements in the settings of Elementor. However, I still can’t drag and drop “course curriculum” inside the tab widget.

You mentioned earlier about modifying the code. Is that something that can easily be applied? If nothing can be done, I’m actually okay with the “course curriculum” not displaying as a tab menu. However, it can really save a lot of space on the page if it can be displayed as a tab menu instead because users don’t have to scroll all the way down the “course info” tab just to see what’s inside the curriculum (which can contain a long list of items such as lessons, etc.). So it’s really best to be displayed as a tab menu if possible.

Please let me know if there are other options to try out.

Hi,

I’m surprised that you are still unable to add the course widgets after activating the Flexbox Container and Nested Elements in the settings, as it should allow you to do so. Please try following this YouTube tutorial: https://www.youtube.com/watch?v=bguPd6B0BGA.

While the coding implementation is straightforward, the solution should work through the widgets. If you continue to face issues, I can provide you with the coding implementation.

Best regards,
Dip Saha

Hi.

Thanks for sending the link of the video tutorial. I was finally able to drag and drop “course curriculum” into the tab widget. The reason why it didn’t work before was because I didn’t refresh the page. After doing so, the tab widget’s appearance changed and I was able to drag and drop any element inside of it. This matter regarding tab menus is now resolved. Really appreciate the help.

I do have something else I want to clarify about Tutor LMS and it’s about the customizability of the dashboard. I do have other plugins I plan on using alongside Tutor LMS (such as a booking plugin, for example) but they do have their own dashboards where users get to see and control their bookings such as cancellations, etc. And because they have their own dashboards, that means users on my site will have to work with 2 different dashboards, one for Tutor LMS and another for the booking plugin.

Is there a way to add another “menu item” on the Tutor LMS dashboard which when clicked, will redirect the user to the booking dashboard I spoke of earlier? The reason for this is so that the user can at least easily access the booking dashboard without having to go to other separate pages of the site. Or do you think this will only be possible if the “menu item” (in the form of a button or clickable text) will be added as code within the Tutor LMS dashboard?

Screenshots: https://drive.google.com/file/d/1JItHvvjIRjKgKelYGm08LYRpe5ELbUWu/view?usp=sharing, https://drive.google.com/file/d/1EEYtG3WNBczHVhFtktsVrTx-J9Wz01w4/view?usp=sharing

Hi,

I’m glad to hear that you’ve resolved the issue with the “Tab menu”.

Regarding your question, you can indeed customize the menu items by adding a short piece of code to your active theme’s functions.php file. Please refer to our documentation for detailed instructions: https://docs.themeum.com/tutor-lms/developers/editing-tutor-dashboard/ . Go through the document and just follow the steps. Hope you will find it helpful.

If you encounter any further issues or have additional questions regarding this, please feel free to ask.

Thank you.

Best regards,
Dip Saha