CF4em - Support

Skins
FAQs
System Requirements
Installation Information
All About CF4em Skins
Request Enhancement / Feature
Report a Bug
Track a Bug
Change Logs



 

 As you undoubtedly know by this point, CF4em is completely 'skinnable' and comes 'out of the box' with multiple default skins. This section will attempt to define the skin layout and functionality so that you may better understand the steps that you would need to take in order to create your own CF4em skin.

Currently, there is no skin editor for CF4em. The only administrative options for skins are pointing to new, uploaded skin directories, removing references to skin directories, and changing the skin directory that CF4em uses.

A Cf4em skin consists of a stylesheet and multiple images. The following is a mapping of a skin directory:
  
/cf4em/skins/skinName
	./buttons	 [dir]
	./css		 [dir]
	./emoticons	 [dir]
	./icons		 [dir]
	./hdrbg1.gif	[file]
	./hdrbg2.gif	[file]
	./pollmeter.gif	[file]
	./pxl.gif	[file]

Anything else you find in the skin directories is either experimental or extraneous. For example you will occasionally find a ./designsupport directory in some of my skin directories. This directory will normally contain .psd files so that you may edit icons, buttons or anything else you might find int he .psd ... you're welcome :-)

I think most of the directories are self explanatory as to what they contain but we are trying to be clear here aren't we?

./buttons Contains buttons such as the edit, submit, save, new post and reply buttons you see throughout the application.
./css Contains a single style sheet titled cf4em.css
./emoticons Contains the smiley face images used in the BBML
./icons Contains small icons used throughout the message board such as the icons used in the top right navigational links of the message board. This directory also contains all status icons such as locked, hot topic, sticky post, announcement, etc...
./hdrbg1.gif This image is used as the background of all main table header bars
./hdrbg2.gif This image is used as the background of all sub header bars
./pxl.gif This tiny transparent image is used as a placeholder in a few different places. one example is the user avatar image found in the profile form. If you currently have an avatar image and select the delete box, the image disappears. In actuality, the image is simply replaced with this tiny image to give the effect that the image has been removed.
This may all seem a bit overwhelming at first, but once you take a closer look, I'm sure you will get grasp the concept.

If you intend to make your own skin, I'd recommend picking an existing skin that is closest to what you are going for and start modifying that. It's undoubtedly the easiest method of creating a new skin.

As always, if you have any questions, please check the forums and FAQs for answers before posting your question or contacting me directly.

...And of course, don't forget to let me see your custom skin when you are done!! :-)