Customise the style of EasySocial and fix search box
By Mel on Saturday, 06 September 2014
Posted in General Issues
Replies 7
Likes 0
Views 695
Votes 0
Hi,

I have just purchased and installed EasySocial and have a couple of questions on the styling/Colours - I want it to blend in with my sites existing colour scheme.


How do i change the Blue Toolbar colour to one of my choice?

I want to replace the icons in the toolbar to my own - is this possible? If so, where are the icon files stored so I can replace them?

The Search area in the toolbar is squashed - see image - how do I correct this?

The sidemenu in your demo did not automatically display when i installed Easysocial, so i assumed I have to install the Module. I have installed it in the right sidebar, but its styling doesn't look like yours. How do i style it to look like yours? - please see image for how it currently looks.


Kind regards

Mel
Hello Mel,

Can you please provide us with the link to the site please and also access to the site so that I can craft out the css codes that you need to customize the toolbar?

As for the icons, we don't use physical images for the icons. Most of the fonts used in EasySocial are purely font's and the reason that we use fonts as icons simply because they work on any screen resolution nicely
Mark
·
Saturday, 06 September 2014 23:21
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi mark,

thanks for responding. I have added the details. I basically just want to change the blue colour to my sites orange colour on the toolbar, and buttons. I have been fiddling for hours but my changes dont show.

I also just want to have my module menus (i.e. EasySocial Menu, Leaderboard etc.) to show on the left side only of all the EasySocial pages (under the existing menus). I followed the module position guidance, adding the suggested position but it doesn't show the modules.

I have added the access details.

Kind regards

Mel
Mel
·
Saturday, 06 September 2014 23:46
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Mel,

Can you add the block of css codes below into your template's css file located at /templates/osprealestate/css/custom.css



body div#fd.es .es-toolbar .es-toolbar-avatar {

  background: #f7931d !important;

 	border: 1px solid #f7931d !important;

}



body div#fd.es .es-toolbar .navbar-inner {

  background: #f7931d !important;

 	border: 1px solid #f7931d !important;

  box-shadow: none !important;

}



body div#fd.es .es-toolbar .fd-navbar-search .search-query,

body div#fd.es .es-toolbar .fd-navbar-search {

    background: #f6b76c !important;

}



body div#fd.es .es-toolbar .fd-navbar-search .search-query {

	padding: 0 14px 0 36px !important;

}


As for the modules, where are you placing it? Should you be positioning the module in your Joomla template's module position?
Mark
·
Sunday, 07 September 2014 00:06
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Mark,

thats perfect, thank you! - and for fixing the search box too

The modules I have tried e--unity-sidebar-top and bottom. I just want to add them under the existing menus that are there i.e. under News, Groups, Applications, Appointments etc.

Mel
Mel
·
Sunday, 07 September 2014 00:19
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Mel,

I think it should be es-dashboard-sidebar-top or es-dashboard-sidebar-bottom . The 'unity' view has been taken out since 1.2
Mark
·
Sunday, 07 September 2014 01:43
·
0 Likes
·
0 Votes
·
0 Comments
·
Brilliant!

Thats exactly what i wanted.

Thanks Mark
Mel
·
Sunday, 07 September 2014 02:30
·
0 Likes
·
0 Votes
·
0 Comments
·
You are most welcome Mel
Mark
·
Sunday, 07 September 2014 20:14
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post