Joomlabamboo Support Forum :: Topic: Where to make a CSS change (1/1)

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Where to make a CSS change

If you use Zentools please post a review at the Joomla! Extensions Directory.

8 years 3 months ago

HI there,

I have a sidebar list that uses the following CSS:

.sidebar ul li a, .sidebar ul li .zen-menu-heading {
text-transform: uppercase !important;

Where would I make a change to the font-size used for this item?

Steve Pritchard
12 Month Developer
97 posts
Karma: 0

The administrator has disabled public write access.

8 years 3 months ago

Hi

Do you have a link for the site?

Cheers
Paul

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

8 years 3 months ago

Actually I just realized that the sidebar module is from my calendar component. I will forward the question to the developer. However I do have another change I'd like to make to the template.

Development Site: http://dev3.clearmind.com/

CSS change #1: main menu - I would like to alter the height of the main menu background box

Steve Pritchard
12 Month Developer
97 posts
Karma: 0

The administrator has disabled public write access.

8 years 3 months ago

Hi

Is the height smaller or taller?

Cheers
Paul

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

8 years 3 months ago

Hey Paul,

I'd like to shrink the height of the main menu. I'm uncertain asto what height I'm going to settle on, so was hoping I could locate the specific line for this, so I can do some testing.

Steve Pritchard
12 Month Developer
97 posts
Karma: 0

The administrator has disabled public write access.

8 years 3 months ago

Hi

This is a little tricky so this is what I have trying it on your site

#menu ul>li a, #menu ul>li .zen-menu-heading {padding: 10px 30px 6px 20px;}
#menu {min-height: inherit;}
#menu ul>li:last-child a:after, #menu ul>li:last-child .zen-menu-heading:after {height: 40px;}
#menu .off-canvas-trigger {padding: 0px 20px 0px 25px;}
#navwrap #search .zen-icon-search {margin-top: 0px;}

#navwrap #search input {line-height: 40px;}

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

8 years 3 months ago

Thanks Paul! I thought this would be a one-line addition! Glad I asked you first before hacking around!

What CSS page would this be added to and after what line? I can certainly add it, play with the height, and ask further questions if needed.

Steve Pritchard
12 Month Developer
97 posts
Karma: 0

The administrator has disabled public write access.

8 years 3 months ago

A lot of styling is interrelated - you would need to add this to the custom.css file are you familiar with how to do this?

Cheers
Paul

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

8 years 3 months ago

All the customisation options are listed here for templates based on the zen grid framework version 4

docs.joomlabamboo.com/zen-grid-framework-4/theme/customisation

Cheers
Paul

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

8 years 3 months ago

Right, of course! DOH! Sorry for the slow witted response.

Yes I do and will give it a go.
paulus103 wrote:

A lot of styling is interrelated - you would need to add this to the custom.css file are you familiar with how to do this?

Cheers
Paul

Steve Pritchard
12 Month Developer
97 posts
Karma: 0

The administrator has disabled public write access.

8 years 3 months ago

Thanks for this, it will really help!
paulus103 wrote:

All the customisation options are listed here for templates based on the zen grid framework version 4

docs.joomlabamboo.com/zen-grid-framework-4/theme/customisation

Cheers
Paul

Steve Pritchard
12 Month Developer
97 posts
Karma: 0

The administrator has disabled public write access.

8 years 3 months ago

Good luck with it - any problems please get back to us

Cheers
Paul

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

8 years 3 months ago

I'm noticing that my custom.css file is not showing up in my site CSS list.

I've read your instructions re location of file and have been using it, but I should see it as the last CSS entry in the <head> section, shouldn't I?

I've located the file in:
/dev3.clearmind.com/templates/rasa2/css/custom.css

Yet Firebug does not show it in the CSS list.

Steve Pritchard
12 Month Developer
97 posts
Karma: 0

The administrator has disabled public write access.

8 years 3 months ago

Hi

I can see the file in the source ode

dev3.clearmind.com/templates/rasa2/css/custom.css

Cheers

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

8 years 3 months ago

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

8 years 3 months ago

Right, assumed it would show up as last entry in the CSS section of the <head>. Thanks for clarifying!

Ok, next question...

I'm finding some of my custom.css changes not taking place.

For example:

html,
body {
font-weight: 250 !important;
font-size: 400;
p {
margin-top: 0em;
margin-bottom: 1em;
}

Changing font size/weight seems to have no effect?

And the code you supplied for the main menu sees to not alter the size at all.

Steve Pritchard
12 Month Developer
97 posts
Karma: 0

The administrator has disabled public write access.

8 years 3 months ago

Hi Steve,

That css for the font is not quite right:

font-weight:250 isn't a valid font weight. If all of the weights are available then it would be 100,200,300 etc. Some fonts only have standard font weight available so the font-weight option will not have any effect.

Font size needs a measurement eg px, em, % etc.

Also you may need to be more specific with the rule and target p tags. But the built in theme settings for font-size will do the same thing that you are trying to do there.

For the menu try:
#menu,
#menu ul > li:last-child a:after, #menu ul > li:last-child .zen-menu-heading:after {min-height:80px}
#menu ul > li {line-height:56px}

That should do it

Thanks

Anthony Olsen
LIfetime Developer - Big Bamboo
23925 posts
788 Thanks
Karma: 433

The administrator has disabled public write access.

8 years 3 months ago

Thanks Anthony,

I've deleted the previous Navbar menu code supplied by Paul, and substituted yours. I don't see any page changes when I adjust max-height or line-height in either scripts. I've opened the site in other browsers to ensure it's not a caching problem.

Steve Pritchard
12 Month Developer
97 posts
Karma: 0

The administrator has disabled public write access.

8 years 3 months ago

The css at the moment has a few errors in it

td, th {
padding: 15px !important;
}
float: left;
#block1 {
float: left;
#block1 {
float: left;

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

8 years 3 months ago

and

html,
body {
font-weight: 300 !important;
font-size: 400;

no close bracket

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

If you use Zentools please post a review at the Joomla! Extensions Directory.

Where to make a CSS change

Happy Campers