Recent
Categories
View Replies (8)

Chelsea Template_Menu Module_Menu title & items font

  1. Issue
0
Votes
Undo
  1. mabutaha
    mabutaha
  2. Sherlock Holmes
  3. Commercial Templates
  4. Friday, 03 February 2017
  5.  Subscribe via email
Dear Ciaran,

I'm using Chelsea Template to build my own company website. Chelsea is a wonderful and neat template that I thank you for!
I'm on the finalizing stage of launching the website so it's not live yet. I have multiple questions and issues that I did not find a definite answer for them on the forum so I will open multiple cases for the sake of the forum visitors.

My questions here are about the Menu module. I have created mini menu modules on the sidecol. and base position in my templates and I have the following issues;

1- Menu Title font: I have figured out how to change the menu module title font size and color through the forum by adding the following code:
.module .module_surround .module_header h3, .module_menu .module_surround .module_header h3 {
font-size: 20px;
color: #89af53 !important;
}
but when using this code, it reflected the changes on all the menus on the template (sidcol & base menu modules) which I don't want! and it also changed the title of other module types as well!! so how can this be fixed and change the title font size and color of each menu module separately and without affecting other module type??

2- I would like to have the menu title clickable (i.e. linked to another page), how would that be possible?

3- Menu Items list font: I have also used the following code that I found through the forum to change the font and spacing of the menu items list:
.module ul a, .module_menu ul a {
color: #080808;
margin-left: -5px;
font-size: 15px;
font-weight: bold;
letter-spacing: .5px;
text-transform: uppercase;
}

but also this code has reflected the changes on all menu modules on that template (the sidecol and the base menu modules); so how can I change the font size and minimize the spacing of the menu items list of each menu module separately?

4- I have added Font Awesome styling to these menus; how can I change the size of these icons as well?

5- In regards to these icons; I would like to have an icon package that is related to Medical & Science but similar to Font Awesome package so I can download and and use within the template. Any suggestions from your side??

Many thanks in advance.
Responses (8)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

1. To amend try changing your CSS to the following...

.sidecol_block .module .module_surround .module_header h3, .sidecol_block .module_menu .module_surround .module_header h3 {

font-size: 20px;

color: #89af53 !important;

}


2. Sorry to say this option is not available by default within Joomla.

3. To amend try changing your CSS to the following...

.sidecol_block .module ul a, .sidecol_block .module_menu ul a {

color: #080808;

margin-left: -5px;

font-size: 15px;

font-weight: bold;

letter-spacing: .5px;

text-transform: uppercase;

}


4. To amend try adding the following to the Custom CSS field of your templates parameters...

.menu li [class^="fa-"]::before, .menu li [class*=" fa-"]::before {

    font-size: 24px;

}


5. Sorry to say I am not aware of any such icon sets. Font Awesome 5 will allow for custom icons however this is not yet available.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
mabutaha
mabutaha
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Brilliant.. All works perfectly!!

I have also added the following code to reduce the spacing between the menu list items:
.base-1 .module li {
height: 20px;
}

How can I do the same to reduce the spacing after the menu header/title? could not figure out the code...
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Presuming I understand you correctly try adding the following to the Custom CSS field of your templates parameters (edit to taste)...

#container_hornav-sticky-wrapper {

    margin-bottom: -30px;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
mabutaha
mabutaha
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
In fact this code made the changes on the hornav menu... I would actually need to reduce the space after the menu title of the base-1 menu module as shown on the screenshot.
Attachments (1)
base menu module.png base menu module.png
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Would you have a URL to an example of these modules?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
mabutaha
mabutaha
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Will send an email with the details as the site is offline.
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

To amend try adding the following to the Custom CSS field of your templates parameters (edit to taste)...

.base-1 .module_header {

    padding-bottom: 0 !important;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 7
mabutaha
mabutaha
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Did the job perfectly ;)
  1. more than a month ago
  2. Commercial Templates
  3. # 8
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok