HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


New features for web designers/developers

Login / Search

 [ Join | More ]
 
Posted
Rating:
#42871 (In Topic #9543)
Avatar

Features aimed to make the lives of web designers and developers easier

The next v4 release is going to have some new features made especially to help web designers workaround limitations of XHTML and CSS.

It's commonplace nowadays for professional designers/developers working on static sites to make use of:
  • Rich typography
  • Text overlaid onto images
  • Custom rollovers

Rich typography

It's well known that web browser font support is severely limited, for two reasons:
  1. There is only a small set of fonts you can trust to be installed on a users computer (the "Web fonts").
  2. Browser fonts can often look ugly when put against smooth designs, as they are not anti-aliased (except for on Macs).

Web developers solve these problems using two potential methods:
  1. Usually the developer will just cut out fonts as an image and place the image. This has the clear disadvantage that it can't be content-managed.
  2. More experienced developers will often use something called sIFR. This involves using the Flash plugin to display fonts instead of XHTML, but gracefully degrades to regular XHTML if Flash is not available. Getting this working involves placing and configuring a number of files, configuring some Javascript, and compiling a TTF file into a flash file.

Now in ocPortal it will be very easy to deploy sIFR. We've built everything into the framework so the only thing to consider is getting the compiled TTF font. Once you have this, it's as easy as pie to add pretty text into Comcode:

Code

[block="sifr" data="Test title" font="Chalkboard" color="#2222FF" tag="h2"]main_custom_gfx[/block]

(you can still apply sIFR using the official Javascript technique if you want to - that is cleaner but also more awkward to set up)

Here's what the example looks like:




Full list of parameters:
  • data (the text to write)
  • color (e.g. "#A34621"), link_color, hover_color
  • padding_top (e.g. "10"), padding_bottom, padding_left, padding_right
  • flash_vars (advanced: see sIFR documentation)
  • case (advanced: see sIFR documentation)
  • wmode (advanced: see sIFR documentation)

(things like font size are configured in CSS, in the normal way they are with sIFR)

Don't have Adobe Flash to create the compiled fonts? Get a free tool to do it:
Once compiled, swf files need to be placed in data_custom/sifr.

Text overlaid onto images

It is very common for the best modern designs to have content text built direct into graphics. The only solution until now has been for web developers to make lots of variants of the same image, each with different text. Now it is possible to have a site generate it's own graphics, so it is easy for any content writers to extend and maintain, without ever going back into Photoshop.

Here is a simple example of a custom button:

Code

[block="text_overlay" data="This is a test" img="button1"]main_custom_gfx[/block]

(we've built the button graphic here into ocPortal itself, and the Theme Wizard will style it - but you can tell the block to write onto any theme image of your choice using the 'img' parameter)

Full list of parameters:
  • img (the code of the Theme image to use)
  • data (the text to write)
  • font_size (e.g. "12" for 12pt)
  • 'x' and 'y' (where to write the text)
  • color (has to be 6 hex digits, e.g. 'FFFFF')
  • font (e.g. "Vera" for the data/fonts/Vera.ttf file we bundle with ocPortal [there are a number of other ttf files in that directory ready for use])
  • center (set to "1" to center the text)



Custom rollovers

Take the above example further, how would you like to automatically have both frames of a rollover generated for you?

Code

[block="rollover_button" data="This is a test" img1="button1" img2="button2"]main_custom_gfx[/block]

This takes the same parameters, except 'img' is now 'img1', and there is also an 'img2'.

Flips between:

and:


And, for programmers, more

You have probably spotted that all these examples are using a new block, 'main_custom_gfx'. The three cases above are what we have supplied 'out of the box', but programmers can write additional renderers in PHP code (hooks) to create configurable graphics of any complexity.


Last edit: by Chris Graham


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#42873
Avatar

Community saint

color (has to be 6 hex digits, e.g. 'FFFFF')
O_o

ocP Ver 4.1
Back to the top
 
Posted
Rating:
#42874
Avatar

Community saint

Ah cool and ya sledge thats the way it is in my programs even gimp wants the 6 hex code for the color.
There is a site that has a huge list of hex codes if you need them.

I run http://otakuplayground.com and am hopping to make themes and other things for ocportal even though I no longer use it for otakuplayground.com I still love it and feel it could go far with the right help. It needs themes and needs people to advertise for it.
Back to the top
 
Posted
Rating:
#42875
Avatar

Community saint

That's only 5 was just pointing out the typo. :thumbs:

ocP Ver 4.1
Back to the top
 
Posted
Rating:
#42877
Avatar

Community saint

Oh I guess I did not see that, was thinking you were asking about the 6 digit hex. I know some ask about it because in css you can type fff and it will work.

I run http://otakuplayground.com and am hopping to make themes and other things for ocportal even though I no longer use it for otakuplayground.com I still love it and feel it could go far with the right help. It needs themes and needs people to advertise for it.
Back to the top
 
Posted
Rating:
#42878
Avatar

Thanks :).


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: