The same css that you used for 1.4 can no longer be used for 2.x. The new structure no longer uses #fd.es as the selector. For instance, to make the toolbar black with gray,

[gist]
body #es .es-toolbar .es-toolbar-avatar, body #es .es-toolbar .navbar-inner {
background: #000 none repeat scroll 0 0;
border: 1px solid #000;
}
body #es .es-toolbar .o-navbar-search .o-navbar-search__query, body #es .es-toolbar .o-navbar-search {
background: #666 none repeat scroll 0 0;
}
[/gist]

Please take note that as stated in our support policy, we do not provide support for customizations

Hello Mark,

I only succeeded by editing path/easysocial2/components/com_easysocial/themes/wireframe/styles/style.min.css

Unfortunately your suggestion did not work for me. I put the entry into custom.css as you stated and tried with changing the colours. Then I tried it with 'body' statements removed. I tried in the following files:-

path/easysocial2/components/com_easysocial/themes/wireframe/styles/custom.css

path/easysocial2/templates/mytemplate/css/custom.css

I know that you do not support customization but I wonder what could have gone wrong:o

1. You need to check with your Joomla template if the template allows you to create a custom.css file in their css folder. If the template does not support this, you can forget about this option.

2. If option #1 is not viable, create this file exactly as shown below and place your codes in that file

/templates/JOOMLA_TEMPLATE/html/com_easysocial/css/custom.css

By the way, I am just wondering why was the documentation not sought for first posting this question here eh? Because #2 has been explained very thoroughly in https://stackideas.com/docs/easysocial/administrators/templating/adding-custom-css-codes

Is there any navigation issues with the documentation or you can't find the information that you want?

Thanks Mark. I check the documenation for some things but not for what I percieve to be a new issue. But you are right, I'll check it first next time for all 'customization'.

Ah okay, I see. I was just wondering as to why people aren't using the documentation because we spend a lot of time and resources updating our docs and we even hired a full time person to write up the documentation.

If people aren't using the documentation, it wouldn't be worthwhile for us to spend resources and time on the documentation.

I just checked and my entry WAS inside that particular custom.css. I think this was when I used easysocial on the back-end to add custom entries. Still no joy.

I've successfully had things in custom.css in the past but that was with other templates. So much has changed and it is hard to know where the problem is likely to be.

I tried viewing http://www.youdiplomat.com/cty/login and it seems like the toolbar color has already changed eh?

Hi Mark,

I only succeeded by editing path/easysocial2/components/com_easysocial/themes/wireframe/styles/style.min.css

This is my work-around but I think it will be modified during each easysocial upgrade.

I don't see any of your changes here, http://www.youdiplomat.com/templates/yoo_helios/css/custom.css

I don't see any of your changes here, http://www.youdiplomat.com/templates/yoo_helios/css/custom.css

I tried many things in many places and removed them whan they failed. Otherwise I'll have troubleshooting issues in the future.

I've now added it again

To be honest, I really have no idea what you are trying to achieve. By default, the wireframe toolbar is black and you have added some modifications in the theme css file and changed it to blue

However in your custom.css, i see you are trying to change it to black.

LOL. I understand. I think that wireframe uses colours #000 or #222. I wanted to change it to blue using Custom.css. When that failed I removed the entries in the custom.css. I found a work around (style.min.css) which I'm happy with except that I think that it will be overwritten during easysocial upgrades.

I had removed all my custom.css entries since a found a workouround but you just said that there was no entry in path/yoo_helios/css/custom.css therefore I put an entry to show you that it doesn not work.

In path/yoo_helios/css/custom.css and
/yoo_helios/html/com_easysocial/css/custom.css plus /components/com_easysocial/themes/wireframe/styles/custom.css

I've now canged it to have green and red to show that the custom.css does not work.


#es .es-toolbar .es-toolbar-avatar, body #es .es-toolbar .navbar-inner {
background: #ff0000 none repeat scroll 0 0;
border: 1px solid #000;
}
#es .es-toolbar .o-navbar-search .o-navbar-search__query, body #es .es-toolbar .o-navbar-search {
background: #00ff00 none repeat scroll 0 0;
}

Your css selectors are incorrect and it's not because of a problem with the custom.css

[gist]

body #es .es-navbar__body {
background: #00ff00 none repeat scroll 0 0;
border: 1px solid #000;
}
body #es .es-navbar__search-input {
background: #ff0000 none repeat scroll 0 0;
}

[/gist]

I believe you copied exactly as what I have posted initially and that was just referencing what you have done on 1.4.

Hi Mark. Thanks for your help. It is now resolved.

You are most welcome