Revision as of 10:41, 3 June 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Archived:Editing theme high lights in carbide.ui

From Nokia Developer Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

Only Publisher Partner Program members will be able to submit new theme content to the Nokia Store from 1st July 2013. Carbide.ui is no longer relevent to the community and all its articles have been archived.

Article Metadata
Created: kamalakshan (30 Jun 2009)
Last edited: hamishwillee (03 Jun 2013)


This article describes on how to make use of carbide.ui and Adobe Illustrator to edit vector elements. The process is explained by editing Grid Highlight component.

The components are either divided in to single element or nine element components. In S60 you can find 3 element component also.

6-30-2009 8-01-08 PM.png

To start with you can download the S60 Theme Design Highlight Template provided.

6-30-2009 8-05-14 PM.png

The above provided screen shot is of Grid Highlight from the template, opened in a vector editor. You can hide and unhide the layers as shown above. After opening this you may design it according to your creative requirements.

Edit the elements of the template and keep it ready, once you are satisfied with the changes made save it and keep it open in the editor.

6-30-2009 8-19-34 PM.png

Now open the theme you would like to make the changes to inside carbide.ui.

6-30-2009 8-11-28 PM.png

Go to highlights tab, where you will find grid highlights. Once you click on it, you will find the component view updated to show the Grid elements. the Grid Highlight element in this case is divided in to nine parts.

6-30-2009 8-12-54 PM.png

Some components can be either 9-piece bitmap graphics or individual single-piece svg graphics. The 9-piece component consists of four corner graphics, four side graphics, and a center graphic. You can design the corner graphics individually. The side and center area graphics can be tiled or equal the maximum size of the component area.

Switch to carbide.ui Right click on any element and open it in the external editor (Adobe Illustrator).

Copy the prepared image by dragging and dropping inside the vector editor tool.

6-30-2009 8-28-19 PM.png

You need to replace the element opened from carbide,ui, with the new one you have designed. Alternatively, you can edit it using the vector editor (Illustrator).

After editing or replacing it save the file. And now when you check the edited piece in the carbide.ui, you will find that the changes are reflected in the theme.

6-30-2009 8-36-27 PM.png

You will have to repeat this process for all the nine elements and then save it.

You can follow the above process for editing any other component also.


This page was last modified on 3 June 2013, at 10:41.
28 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.