Support Forum

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.

Noob: Customising CSS in J3 template

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

Hi,

Firstly, thanks for the template (Revision), it's just what I needed.

I have to customise it though, and I'm struggling to see where I should be making changes to the CSS (Colours and font styling only at this stage).

I have the template.css file, and custom.css file, but the changes I make don't have any affect. I think I've identified the correct parts of the css to change (I can change them directly in Chrome, and that also indicates the css file to edit), but no changes come through on my site (working off my computer rather than a server).

Any beginner's clues?

Thanks,

Simon.
  • OzoneGraphics's Avatar
  • OzoneGraphics
  • 12 Month basic
  • 25 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
Hi Simon,

You need to add the changes you want to make to the custom.css file .This will ensure they are protected from an update to the core template files


Not applying -

This can mean the styles you are adding have a syntax error or are not specific enough

Can you see the custom css file in the source code view in the header area

Thanks
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: OzoneGraphics
Hi Paul - that was quick!

Yes, I can see the link to the custom css:
<!-- CUSTOM CSS -->
<link href="/RDS/templates/revision/css/custom.css" rel="stylesheet" />
<!-- //CUSTOM CSS -->

And I have the following css style in custom.css (and those same changes in template.css, if that makes a difference):
body #logowrap #tagline span {
  font-size: 100%;
  color: #05c5ff;
  font-weight: bold;
  display: block;
  margin-top: 20px;
  margin-left: 0px;
}
but the style doesn't appear on the page.

A clue might be that some other changes in the custom.css file do appear, but not this font styling.

There are other changes I need to make but, on the foothills of the learning slope, I need to understand workflow etc.

Cheers,

Simon.
  • OzoneGraphics's Avatar
  • OzoneGraphics
  • 12 Month basic
  • 25 posts
  • 1 Thanks
  • Karma: 0
Last Edit: 10 years 10 months ago by OzoneGraphics.
The administrator has disabled public write access.
Hi Simon,

Do have any syntax errors above this bit of css as these styles should work

body #logowrap #tagline span {
font-size: 100%;
color: #05c5ff;
font-weight: bold;

}

For us its always easier to see a live site when dealing with these issues :)

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: OzoneGraphics
Hi Paul,

Well, in my custom.css I have only put the overrides. So in the case above, custom.css doesn't any other reference for #logotag, #tagline etc.

Getting the site online might be an issue. I'm more than happy to do so, just need a free way of doing so. Can I put it on Joomla.org's servers?

Cheers,

Simon.
  • OzoneGraphics's Avatar
  • OzoneGraphics
  • 12 Month basic
  • 25 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
Hi Simon,

I'm afraid that isn't possible unfortunately regarding joomla.org

With the css

as a test try replacing your styling with

body #logowrap #tagline span {
font-size: 100% !important;
color: #05c5ff !important;
font-weight: bold !important;

}

This should overide every other style and take specificy out of the picture

and then if that doesn't work

paste the style above right at the top of the css file - that should remove the affect of any syntax errors

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul,

Sorry, sorted now. It was basic HTML/CSS rather than anything related to the template. I realised I needed to declare the font style as normal rather than just omitting the italic tag in my custom.css file, otherwise it wouldn't overwrite the italic tag in the temnpalte.css.

Little steps, little steps :)

Thanks for your help.

Simon.
  • OzoneGraphics's Avatar
  • OzoneGraphics
  • 12 Month basic
  • 25 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
No problem

Good luck with the site

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

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

Happy Campers