The members profile has got various elements, some of which are so minor to note. With BuddyBuilder and Elementor integration users can easily style various widgets of the member’s profile. Among the widgets is the navigation which comes with counters in some sections like messages and notifications. One can style this according to his/her own preference. However in this case we are going to style them in the normal, hover and active modes. To do this follow the steps below:
Customizing Nav Counters:
- Go to your WP Admin > BuddyBuilder on the left panel.
- In the BuddyBuilder page, select your Member Profile Template.
- Next, click on “Edit Current”. This takes you to the frontend of elementor to edit the template you just selected.
- On the next page which is the Elementor’s builder, select/click on the Navigation widget.
- Upon clicking it should display its settings on the left panel of elementor.
- Under style settings, select “Counter”.
- The only applicable settings that can change for the Normal, Hover and Active modes are:
- Text Color, Background Color and Border Color.
- For border color to be visible you need to ensure that you set your preferred border type and set a preferred border width. For this case we set:
- Border Type = Solid
- Border Width = 2 px
- To start with the Normal Mode you may use your prefered colors. Here is how we did it:
- Click on “Normal”
- Text color = Black
- Background Color = Grey
- Border Color = Blue
- Click on “Normal”
- Click on “Hover”, set different colors for this:
- Text color = Black
- Background Color = Yellow
- Border Color = Green
- Click on “Active”, set different colors for this too:
- Text color = White
- Background Color = Green
- Border Color = Black
- Once you have made all changes click on “Update”.
We can then view the entire color adjustments on a live view of a sample member profile page. It shows the changes on normal mode, hover mode and active mode. This can be verified in the image below:
