How to Change Fonts and Menu (Toolbar) Colours
By Mangesh Sambare on Thursday, 03 April 2014
Posted in Technical Issues
Replies 12
Likes 0
Views 1.7K
Votes 0
Hello There,

I have EasyBlog as well as EasyDiscuss installed on my website. I would like help on the following:

I have configured the font for Titles as "Tahoma" and "Verdana" for the body in EasyBlog by adding the following overrides in my custom.css

#eblog-wrapper #ezblog-body .blog-content{
font-family: verdana;
}

#ezblog-body #ezblog-posts h2{
font-family: Tahoma;
}

#ezblog-body #ezblog-posts h3{
font-family: Tahoma;
}

I would like to change the fonts of EasyDiscuss to match what I have configured in EasyBlog. "Tahoma" for Title and "Verdana" for the body. How do I do that?


I am using the "Origami" theme for EasyBlog which has an All Black Menu (toolbar). In EasyDiscuss, I am using the "Flatt" theme which has a Black Menu (toolbar) with a Blue "Selected item indicator" and a grayish hover effect (different colours as compared to the Origami theme in EasyBlog). I would like to replicate the "Origami" menu colours in Easy Discuss as well.

Can you please guide....

Regards,
Mangesh
Hi Mangesh,

I already updated your ED's toolbar to match the EB's toolbar color scheme. I placed the code at the bottom of this CSS file: custom.css

Please let us know if you need further assistance. Thank you.
Ikram Hakimi
·
Friday, 04 April 2014 17:09
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello,

Can you please provide us with the URL to the page please?
Mark
·
Friday, 04 April 2014 00:24
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Mangesh,

Please place this in your custom.css in your template.
#discuss-wrapper .discuss-story {

	font-family: verdana;

}



#discuss-wrapper .discuss-item-hd h2 {

	font-family: Tahoma;

}


If it doesn't change properly, please provide your Joomla Backend credential and also your FTP so that I could apply it for you.

Thanks:)
Khairul
·
Friday, 04 April 2014 00:34
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Khairul and Mark:

Thanks for your response. Appreciate it. I did some firebug inspection and added the following code to my custom.css:

#discuss-wrapper .discuss-content-item{
font-family: verdana;
}

#discuss-wrapper .discuss-post-title{
font-family: verdana;
}

That has taken care of my fonts issue. Now coming to the menu / toolbar changes.... I have specified all the required login information so that you can help me out.

Just one additional request, please do let me know the files that you change so that I can take a backup of those specific files. I wouldn't want to lose the customizations on the next upgrade of EasyDiscuss

Regards,
Mangesh
Mangesh Sambare
·
Friday, 04 April 2014 11:26
·
0 Likes
·
0 Votes
·
0 Comments
·
Apologies... the font for the post-title has been set to Tahoma

Awaiting your assistance with the Tool bar changes...

Mangesh
Mangesh Sambare
·
Friday, 04 April 2014 11:32
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Mangesh,

I've accessed your SFTP but I cannot find the exact folder to your site: http://screencast.com/t/UDE4GqSTwbL . Can you please add this CSS code in your custom.css file:



#discuss-wrapper,

#eblog-wrapper

{

 font-family: Verdana;

}



#discuss-wrapper .discuss-item-hd h2,

#ezblog-body #ezblog-posts h2,

#ezblog-body #ezblog-posts h3,

{

 font-family: Tahoma;

}



div#discuss-wrapper .discuss-toolbar

{

 border: 1px solid #111;

}

div#discuss-wrapper .discuss-toolbar .navbar-inner

{

 background: #444;

}

div#discuss-wrapper .discuss-toolbar .divider-vertical

{

 border-left: 0;

 border-right: 1px solid #222;

}


Hope this helps.
Nik Faris
·
Friday, 04 April 2014 12:05
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Nick:

My bad. I have specified the path below for your reference (in the optional information section).

I added the given code to the custom.css file however the Nav Bar in Easy Discuss does not change

Can you kindly take a look....

Regards,
Mangesh
Mangesh Sambare
·
Friday, 04 April 2014 12:35
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Mangesh,

I've checked your site and seems like the CSS is working: http://screencast.com/t/WVOfW9QSlb . You might want to clear your browser cache or did I miss anything? Please advise.
Nik Faris
·
Friday, 04 April 2014 13:03
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Nick:

I guess my initial post was not clear. What I want is that the EasyDiscuss NavBar looks exactly the same as that of EasyBlog (Origami Theme) in terms of colour schemes.

1. Currently the EasyDiscuss NavBar has a "Blue" colour for the selected item (discussions by default) whereas in EasyBlog NavBar you do not have any such demarcation.
2. When you hover over any of the icons in EasyDiscuss NavBar you see a grayish colour on the icon itself.... again this is not like EasyBlog. In EasyBlog the icon remains white and there is a slight colour change in the background.

I want to replicate the exact colour scheme of EasyBlog NavBar to EasyDiscuss NavBar.

Hope I have been able to successfully explain the issue.... In case you are not clear, please let me know and I will take screenshots and send them across.

Regards,
Mangesh
Mangesh Sambare
·
Friday, 04 April 2014 13:15
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello,

Sorry to bug you, but there is no change Can you please paste the code in a reply....

A few minutes back I made some changes to the custom.css and I might have accidentally overwritten your code.

Regards,
Mangesh
Mangesh Sambare
·
Friday, 04 April 2014 17:17
·
0 Likes
·
0 Votes
·
0 Comments
·
I am so sorry Ikram......

My humble apologies.... I went blind

Yes, the ED toolbar now appears like the EB toolbar.... Thanks a ton:)

Regards,
Mangesh
Mangesh Sambare
·
Friday, 04 April 2014 17:19
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks for updating, glad that your issues are resolved now.
Mark
·
Friday, 04 April 2014 17:42
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post