Styling Cufon fonts

More
13 years 6 months ago #1 by laurelle
Replied by laurelle on topic Re:Styling Cufon fonts
Hi,

Those are issues that you would have to bring to the attention of the Cufon developers. Sorry, can help you with that sort of problem.

Cheers.

Laurelle
Developer
Keashly.ca Consulting

Please Log in or Create an account to join the conversation.

More
13 years 6 months ago - 13 years 6 months ago #2 by mamasboy
Replied by mamasboy on topic Re:Styling Cufon fonts
I'd also found out that FF 3 works fine for the line-height when the 'strict' doctype is used.

If only there's a way to have conditional statements for DOCTYPE... cos I don't want to use strict for all browsers... only FF 3.

The other thing that's bothering me is that cufon replace supposedly empty space i.e. < p > tags, into empty cufon space characters in between paragraphs.
Last edit: 13 years 6 months ago by mamasboy.

Please Log in or Create an account to join the conversation.

More
13 years 6 months ago #3 by mamasboy
Replied by mamasboy on topic Re:Styling Cufon fonts
I found out that the main issue is browser specific i.e. FF 3

When I use the other browsers, they could reflect the line-height as per CSS selector accordingly. Bummer...

Please Log in or Create an account to join the conversation.

More
13 years 6 months ago #4 by mamasboy
Replied by mamasboy on topic Re:Styling Cufon fonts
Thanz laurelle for all your help. I really appreciate your kind assistance!

I did not change the doctype from transitional to strict in my Joomla site. I wonder that could be one reason

Please Log in or Create an account to join the conversation.

More
13 years 6 months ago #5 by laurelle
Replied by laurelle on topic Re:Styling Cufon fonts
Hi,

The site seems to be gone, so couldn't look at what you did.

Note that I am just providing the plugin to use Cufon in Joomla, for help on actual Cufon functionality you need to ask the Cufon developers. I think I have provided as much help as I know about Cufon now. Please ask on the Cufon forum for instructions on how to get the line-height to work.

Sorry, we didn't get everything working that you needed, hopefully the Cufon people can help you out.

Laurelle
Developer
Keashly.ca Consulting

Please Log in or Create an account to join the conversation.

More
13 years 6 months ago #6 by mamasboy
Replied by mamasboy on topic Re:Styling Cufon fonts
Hi laurelle

I'd tried tinkering with javascript like u'd said.

I hate to say this.. it still doesn't work

Please Log in or Create an account to join the conversation.

More
13 years 6 months ago #7 by laurelle
Replied by laurelle on topic Re:Styling Cufon fonts
Hi,

Your site is extremely slow to load and I think part of the problem is that you have made the site text use Cufon. You really shouldn't use Cufon for your site text as every word get around 3 cufon tags wrapped around it. That is a lot of processing. Just use Cufon for things like headins and special text, maybe in modules or something that has a span around it for special words/phrases.

Try using the javascript method to change the line-height on the p tags, if you continue to use Cufon for them, like you did with the color for the h1 tag.

Good luck.

Laurelle
Developer
Keashly.ca Consulting

Please Log in or Create an account to join the conversation.

More
13 years 6 months ago - 13 years 6 months ago #8 by mamasboy
Replied by mamasboy on topic Re:Styling Cufon fonts
Hi laurelle,

I'm trying to control the line-height spacing.

I'm also puzzled why is there a space between paragraphs. How do I set that?

You can see this on the front page

I'm doing this on localhost. But I'd put this up on a demo site...
onlineoutsourcegroup.com/brand360/

(yea i use firebug, it says 'cufon' for those replaced)
Last edit: 13 years 6 months ago by mamasboy.

Please Log in or Create an account to join the conversation.

More
13 years 6 months ago #9 by laurelle
Replied by laurelle on topic Re:Styling Cufon fonts
Hi,

What are you trying to control in the template.css file? Did you check with Firebug that the selector is getting the new css definition that you are trying to give it?

I would need a link to your site and what exactly isn't working to help you.

Cheers.

Laurelle
Developer
Keashly.ca Consulting

Please Log in or Create an account to join the conversation.

More
13 years 6 months ago - 13 years 6 months ago #10 by mamasboy
Replied by mamasboy on topic Re:Styling Cufon fonts
Hi laurelle,

Thanz for the info on putting the javascript on the head tag. It works!!

However, the template.css thingy doesn't seem to work.

All css tags used under cufon replacement... their tags are replaced to 'cufon' tag. Even I added a 'cufon' tag in css, it doesn't work.
Last edit: 13 years 6 months ago by mamasboy.

Please Log in or Create an account to join the conversation.

More
13 years 6 months ago #11 by laurelle
Replied by laurelle on topic Re:Styling Cufon fonts
Hello,

When you use the cufon.xxx() commands these are Javascript functions not CSS. So you need to enclose them in a Javascript section in the head of your document.

To change the line-spacing for example, you can just use normal CSS to do that and put that in your template.css file.

For example in the head of your template (change [ to < and ] to >):

[script type="text/javascript"]
Cufon.replace('h1', {
color: '-linear-gradient(red, 0.2=#fff, 0.8=#23d559, rgb(0, 0, 0))'
});
[/script]


and in your template.css you could add:
h1 {line-height: 20px;}

Hope that helps.

Laurelle
Developer
Keashly.ca Consulting

Please Log in or Create an account to join the conversation.

More
13 years 6 months ago #12 by mamasboy
Replied by mamasboy on topic Re:Styling Cufon fonts
Hi laurelle,

I tried to paste the following sample code at the end of template.css
Cufon.replace('h1', {
	color: '-linear-gradient(red, 0.2=#fff, 0.8=#23d559, rgb(0, 0, 0))'
});

The h1 tag is working properly to show the font replacement according cufon plugin. But it doesn't show the gradient for h1 encoded text.

Am I doing it wrong?

Please Log in or Create an account to join the conversation.

More
13 years 6 months ago #13 by laurelle
Replied by laurelle on topic Re:Styling Cufon fonts
Hello,

Just add it to your css files. You don't have to put it anywhere special. I would add it to your template.css file.

The plugin doesn't have any css file, all the css it adds is in the head of the document.

Hope that helps.

Laurelle
Developer
Keashly.ca Consulting

Please Log in or Create an account to join the conversation.

More
13 years 6 months ago #14 by mamasboy
Styling Cufon fonts was created by mamasboy
Hi there,

Congratulations on such a great plugin! I absolutely love it! :woohoo:

I like to find out how to style cufon fonts i.e. line-height, spacing etc.

I know there's a guide at
wiki.github.com/sorccu/cufon/styling

But where do I save such css styling i.e. in which file?

Please Log in or Create an account to join the conversation.

Joomla! & WordPress Hosts

Liquid Web is our recommended web hosting provider for Joomla! & WordPress websites. This is the host that we use for websites that we build. Liquid Web has an excellent reputation, fast servers and most importantly awesome service! They have technicians that are familiar with Joomla! & WordPress. Their technicians go above and beyond what other hosting providers do, in our opinion.

  

Liquid Web Managed Word Press  

Support Development

Please consider a small donation to support development of the extensions on this site.



Joomla! Login

This is the normal Joomla! login module not the VirtueMart login module. Click the 'Create an account' button to see how you are redirected to the VirtueMart registration form when the KC VM Registration Redirect plugin is enabled.

Joomla! & WordPress Web Design and Development

If you are interested in having a website designed or redesign or need custom Joomla! or WordPress development, please visit Keashly.ca Consulting to view our Portfolio of Joomla! & WordPress website work.

Trademarks and logos remain the property of their respective organizations.
The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries.
Keashly.ca Consulting is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Site Map Back to Top