I'm sure this is a topic that has been dealt with elsewhere, though I haven't been able to find it in the forums yet so please point me in the direction of another post if it has.

1) I want to use a custom typeface for the text beanie the logo on the Base3 template. In the screenshot I've solved it rather clumsily by doing it as an image. How would I install a custom font and set it as a style in this instance?

2) In the same screenshot, I want to reduce the space above the Titles in the ZenGrid layout. Could you point me in the right direction for that css?

As I said, just point me to the right forum if these have already been answered and I'll search there.

1) Is that free for commercial use?

2) Do you have a link?

Cheers
Paul

Hi Paul,

1) No, the font is Klavika, we've bought the desktop license but will buy the webfont license as well. Alternatively, I'll just find a similar Google Font. If it's easier to guide me using Google Fonts then that's fine. I'm sure I can figure out how to use a TypeKit font at a later date.

2) garageastdev.co.za/thunderbolt/index.php/what-we-do/the-brands-we-represent

3) I'd really like to educate myself a lot more on working with typography in the JoomlaBamboo templates. Could you point me in the direction of some posts or tutorials that could help me get a good grasp of this?

Hi

It will be a lot easier to use a google font - its just a case of adding the chosen google font name from the google font website

Typography we are about to release a new extension called Zen shortcodes so it may be worth waiting for that

There are lots of different content areas within typography - numbers, lists, headings etc - what are looking for?
It does also vary between templates and frameworks

You can also use css3 to create some really nice font effects

Cheers
Paul

Thanks, Paul. I'm not looking for any effects, really. I just want to learn to get more control of the type in terms of spacing, sizing and variations beyond the h1,h2, styles. In other words, creating my own styles, either with the template fonts provided or by incorporating other Google Fonts. It's more a case of wanting to create better, cleaner type layout than embellishment. I'd really appreciate it if there is any reading material on this site that you can point me to in the meantime.

With regards to the spacing of the ZenGrid titles, I assume that's affected by the spacing of the h3 (in this case) css style? Which css file would I find that in?

I'll have a look for some tutorials on it tomorrow as its just past 2am here

I was reading a book on css3 font styling as there are some interesting font typography options coming along

I think what you are referring to is this

.zentools.grid .zenimage {margin-bottom: 20px;}

So if you wanted to target this div you would take the module id that uniquely identifies this module and tack on the style you want to target

#zentools386 .zentools.grid .zenimage {margin-bottom: 20px;}

So paste the above style and change the value as required - probably zero is best

You could then if you wanted move some of the list elements around to add space

#zentools386 .zentools.grid li {margin-bottom:20px !important;}

for example

I'm following the same process but the existing template style has an important so I need to match it

Cheers
Paul

Thanks for the guidance, Paul. 4:30am here so I'll turn in and have a go at those in the morning and try find some more tutorials so I can get up to speed. Really appreciate all the time you take to answer these questions.

Cheers

No probs

night

Cheers
Paul

paulus103 wrote:
Sorry, Paul, I'm just looking for the location of that css code… would it be something I edit in the template.css section or do I add it to the custom.css?

EDIT: located it in the module CSS, where I should have looked first time.

paulus103 wrote:
Hey Paul, not having any luck with this. I've experimented with extreme values but it's not having any effect.

Hi there,
Which file have you put that in?

Best to add it to a css/custom.css file I think. At the moment I cant see that rule int he source - although I may have missed it.
Thanks!

Anthony Olsen wrote:
That did it, thanks Anthony. Yeah, I don't think I had updated the test site from my localhost yet, which is why you wouldn't have picked it up. Thanks for the help, guys.

You need to add the styling I suggested to the custom.css file

It needs the module Id also to make the style more specific

The css does exist in the module css but when you update the zentools module it would be overwritten

Cheers
Paul

ah sorry I had your message on screen and didn't refresh it to see your answer

Cheers
Paul

paulus103 wrote:
Thanks, Paul. That module ID is genius, I had no idea you could target it so specifically.

Yep comes in handy for me quite often

Cheers
Paul