Hey there,

This requires Custom CSS to change the styling of it.

The file that renders it is at JoomlaFolder/components/com_easysocial/themes/wireframe/toolbar/default.php line 29 - 179.

If you want to edit something, you need to copy the default.php file from JoomlaFolder/components/com_easysocial/themes/wireframe/toolbar/default.php and paste it at template override location which is at JoomlaFolder/templates/yourCurrentTemplate/html/com_easysocial/toolbar/default.php.

Take note that you need to create the folders manually if you don't see it.

Then, you can start to edit the default.php which is from the template override location.

I was referring more to a CSS editing than a structure editing...

Hey there,

Which part of styling are you trying to change?

The colour of the buttons, the corner radius, perhaps the icons if FA and the color of the icons.... maybe the color of the background too

Hey there,

You can add the following Custom CSS code into Backend > EasySocial > Themes > Custom CSS:

/* color of the FA icons */

body #es.es-dialog.is-mobile .es-dialog-content .o-nav.es-toolbar__o-nav .o-nav__item i {

 color: green;

}



/* the background color of the buttons */

body #es.es-dialog.is-mobile .es-dialog-content .o-nav.es-toolbar__o-nav .o-nav__item a{

  background-color: yellow;

}

Take note that you need to clear all of your caches before you see the changes.

May I know what do you mean 'the corner radius'?

defining the radius of the corner with the CSS rule border-radius
What else?

Can you point me to the actual CSS file, so that I see all the rules in one go?

Hey there,

defining the radius of the corner with the CSS rule border-radius

You can use the following Custom CSS code for it:

/* the background color of the buttons */

body #es.es-dialog.is-mobile .es-dialog-content .o-nav.es-toolbar__o-nav .o-nav__item a{

  background-color: yellow;

  border-radius: 25%

}

Can you point me to the actual CSS file, so that I see all the rules in one go?

We do not recommend our customers to modify the styling at the EasySocial core CSS file because it will be very difficult to maintenance after you update it to the next version.

Oh, I would not change the CSS, of course... I just want to know where is it, so that I can override the classes that I need to override... I tried to locate it using Chrome inspector, but I could not locate where the rules come from, hence I am unable to have all the rules at a glance for me to play around with... I don't want to ask you one by one as I decide which visual aspect I want to change...

Thanks anyway, I figured out the structure.

Hi there,

You are most welcome.

Just for your information, I have locked and marked this thread as resolved to avoid confusions in the future. Please start a new thread if you have any other issue in the future so it will be easier for us to manage your inquiries.

Thanks for understanding.