Author: Manuel Lemos
Viewers: 4
Last month viewers: 1
Categories: New site features, Web site design, Gamification
This article presents a screencast that demonstrates how to create and submit a new theme proposal for the site design contest.
It should be useful for all those willing to submit a proposal but could not understand clearly how to take the most of the design editor tool provided by the site.
It should be useful for all those willing to submit a proposal but could not understand clearly how to take the most of the design editor tool provided by the site.
Contents
* Introduction
* Screencast video
* Video transcript
- Creating a design theme
- Editing the headers and footers HTML template
- HTML template variable marks
- Template variables with alternative presentation modes
- Validation of HTML templates
- Previewing the HTML template in different pages
- Editing the main CSS file
- Replacing the site icon images
- Using custom images
- Submitting your design proposal
- Viewing and commenting approved proposals
- Making changes to a submitted proposal
* Introduction
The design theme contest submission deadline is reaching the end. Still, there is a week remaining to the end and you still have time to join the candidates that already submitted their proposals.
The only way to submit a proposal is to use the design theme editor.
* Screencast video
Since this is something new that you probably never seen anything similar elsewhere, some candidates had difficulties in submitting their proposals using this design user interface.
Therefore, I decided create a screencast that you can watch and learn how to use all the features of the editor and submit a nice design theme in time for the contest.
Here follows the screencast video. You may want to watch it in full screen so you can see clearly what is on the screen.
Below, you may find the transcript of the video, in case you cannot understand clearly something that I have spoken.
Feel free to post a comment to this article if you still have questions.
* Video transcript
- Creating a design theme
This presentation is meant to guide Web designers on how to create and propose a new design theme for the PHPClasses site design contest.
First, you need to go to the design editor page and create a new design theme.
You need to enter a title that will be used for showing your design theme proposal to other users.
Then you need to enter the design short name. This name will be used as a parameter in the URL of the site page that show your design. It must start with a lower case letter and be followed by one or more letters and digits, with up to 20 characters.
- Editing the headers and footers HTML template
Next, the site shows the initial list of files of your theme. These files contain the HTML and CSS templates that the site is currently using.
You should move on and click on the edit link of the template file that you want to change.
Lets start with the HTML template. The site shows you an HTML editor that has a visual mode and an HTML editing mode.
In the visual mode you can see a preview of what your HTML template looks like.
- HTML template variable marks
There are some dashed areas, which you cannot edit their contents. Those areas represent template variables. The site generates the contents of these areas dynamically when the site pages are being served to the users browsers.
You can click on the HTML button of the toolbar to switch to the HTML editing mode. As you may see, the text editor shows the HTML template contents.
You may notice that there are some marks in curly braces. These are the template variables that correspond to the dashed areas in the Visual editing mode.
Each of these marks has a meaning. If you click on the editor form tab labeled "Template marks", you can see a listing table of all supported template variable marks.
The table middle column explains the meaning of each mark. The last column tells you whether the mark is mandatory or not. Most marks are required to be present in the template. The others are optional.
The {body} mark is special. It represents the division between the page headers and footers. All the marks listed before the {body} mark cannot be put in the footer. Likewise the marks after {body} cannot be put in the header.
This edition of the contest is only for proposing a different design for the headers and footers of all site pages. Future editions of the contest will allow editing also the templates of the bodies of common types of pages.
If you click in the Visual button of the toolbar, you get back to the Visual editor.
You may notice that the dashed sections that represent the template variables exhibit the template variable name in the top left corner over a light blue background.
- Template variables with alternative presentation modes
Some template variables are also special. They are denoted with a plus sign after the template variable name. That means that they support alternative presentation styles.
If you click inside the dashed area of those special template variables, a pull-down menu will appear showing the different presentation styles that it supports.
Just click on the presentation style that you prefer and the Visual editor automatically changes the preview of the template variable area.
Currently, the navigation bars template variables support alternative presentation modes. You may see them with borders removed or even laid out vertically.
You may also notice that the name of the template variable changed a little. It appended the alternative presentation style name to the template variable name inside the curly braces.
If you switch back to the HTML editing mode, you may notice that the template variable name is changed the same way you see in the corner of the dashed area.
You can edit your template either in visual mode, editing mode, or alternatively in both modes, depending on what you think is more comfortable for you.
Once you are done with your changes, you need to save your template. Just click on the "Save and preview" button.
- Validation of HTML templates
If there are any issues, like a required template variable that is missing or misplaced, or your HTML does not validate properly, an error message will appear at the top explaining the issues that you need to fix.
Some HTML validation errors may be fixed automatically. For instance, you are not allowed to enter any JavaScript. That is measure to prevent security exploits. Any JavaScript will be automatically removed.
If there are no issues, the template is saved and you continue editing the template.
- Previewing the HTML template in different pages
You may notice that below the editor there is a preview area. It shows how your template appears when applied to real site pages.
You can switch the type of page that you want to preview by clicking on the editor form tab labeled "Page size and preview". This tab shows several columns of options.
The middle column lets you switch the page type. The left column lets you switch the role of the preview user. It can be either anonymous, logged, or premium. Premium users see no advertising spaces.
The right column lets you switch the size of the preview area. You may see it in 800x600, 1024x768, 100% of the current width, or some other custom size that you would like to try.
When you are done with the HTML editor, just click in the "Back to files list" button.
- Editing the main CSS file
Lets see now the CSS file editor. It has just a text editor with the CSS file template.
If you click on the editor form tab labeled "Template marks and styles", it shows all the styles that you can redefine to affect the site presentation. This tab explains the meaning of each style.
You may also notice the explanation of a template variable named {graphics}. This variable will expand to the base URL path of graphic images that you may want to use in your theme. I will be back to this topic ahead.
In the CSS text editor, you can add as many styles as you want besides these if you need them. Just keep in mind that you cannot use JavaScript in the CSS definitions.
A warning will appear if you attempt to save your CSS with JavaScript. The site removes the style properties that use JavaScript or other dangerous properties.
You can also use some properties that are proprietary to some browsers, like those for defining rounded borders in Mozilla Firefox or Safari and Chrome Webkit, as well alpha transparency level in Internet Explorer.
Other proprietary CSS properties are forbidden by default for security reasons, but some more may be enabled later.
You may save your CSS template file using also the "Save and preview" button. The preview area is updated then. You can also switch the options of the page preview clicking in the "Preview page and size" tab.
When you are done editing the CSS template file, just use the Back to files list button to return to the theme design menu.
- Replacing the site icon images
You can also override the site icons or add more theme image files. For that, just click on the "Add image files" link below the files listing.
First you will be prompted to choose the type of image you want to add. You can either add small icon images, large icon images, or custom images.
Small icon images, have the fixed size of 24 by 24 pixels and must be in GIF format. They are used throughout the site, mostly in navigation bars. Usually these images are transparent, so you may upload icons of this size with empty areas around them.
The form shows you a listing of all small icon images that can be replaced, as well the original site icon images, and a small description telling where in the site the images usually appear, so you may understand their purpose.
Large icons also have a fixed size of 80 by 60 pixels. They also must be in GIF format. They are used mostly in menu pages. Usually they are also transparent.
When uploading icon images, you should use the same names as the original. If you leave checked the Automatic file name option, the site will determine the image you want to replace from the name of the file you uploaded.
- Using custom images
Custom images are meant for using either in the CSS or HTML templates. They can be of any size up to 400 by 400 pixels. They can be either in GIF, JPEG or PNG formats, but the image files must not have more than 200KB each.
The custom image file names must have only letters, digits, dashes, and underscores, followed by the extension that must be either .gif, .jpg or .png according to the format of the image file.
Once you upload your image files, you may use them in the HTML or CSS templates using the {graphics} template variable followed by the image file name. For instance, if you uploaded a image file named background.jpg, you should use it for instance like this in the CSS file:
BODY { background-image: url({graphics}background.jpg) }
- Submitting your design proposal
When you are done with your design theme and you are ready to submit it, just use the link above the files listing labeled "submit your design". You will be taken to a page on which you need to enter a few details about your design proposal.
In the description field you should enter a few phrases that describe the key changes of your design relatively to the original site design. That is meant to help the site users to notice what improvements you have over the current site design.
The next fields let you tell whether or not you want to make your design preview viewable to all users before the voting period starts.
If you are afraid that others may copy your design ideas, choose the option labeled "Only after the election starts". This way nobody can see your design proposal, but you also will not be able to get comments about your design from the users until the election starts.
If you would like to get already comments and suggestions from the site users, click on the option labeled "Before the election starts". This way the users will be able to see your proposal and make comments that may help you improve your design.
Next, you see the terms of submission of the contest. You should read these terms with attention to prevent misunderstandings regarding the requirements of the contest.
Once you read and understood these terms, click on the checkbox labeled "I agree with these terms of submission", type your name below in the Signature field, and click in the "Submit" button.
Your proposal will be queued for review by a moderator. If there are any issues, the moderator may refuse your proposal. In that case, you will get an e-mail message explaining the issues and what you need to do to fix it and submit the proposal again.
- Viewing and commenting approved proposals
If it is all right, the moderator will approve your design and it will be listed in the design proposals section of the site:
If you allowed the users to view your design proposal before the election starts, the users may click on your proposal link and see a preview of the design. They may also post comments with their opinions or suggestions of improvements.
If you only allowed the users to see your design when the election starts, only then they can preview and comment your design, but then you will not be able to change your proposal.
- Making changes to a submitted proposal
If you would like to make any changes, you can do them by going to the design editor page and click labeled "cancel the design submission". Only then you can perform any changes. When you are done with your changes, you can resubmit the updated proposal.
When election starts, nobody can make any more changes to their proposal.
So hurry up with your design theme. The deadline is December 15 2009. Good work and good luck for you.
If you still have questions or doubts, feel free to post comments to this post.
* Introduction
* Screencast video
* Video transcript
- Creating a design theme
- Editing the headers and footers HTML template
- HTML template variable marks
- Template variables with alternative presentation modes
- Validation of HTML templates
- Previewing the HTML template in different pages
- Editing the main CSS file
- Replacing the site icon images
- Using custom images
- Submitting your design proposal
- Viewing and commenting approved proposals
- Making changes to a submitted proposal
* Introduction
The design theme contest submission deadline is reaching the end. Still, there is a week remaining to the end and you still have time to join the candidates that already submitted their proposals.
phpclasses.org/design/
The only way to submit a proposal is to use the design theme editor.
phpclasses.org/design.html
* Screencast video
Since this is something new that you probably never seen anything similar elsewhere, some candidates had difficulties in submitting their proposals using this design user interface.
Therefore, I decided create a screencast that you can watch and learn how to use all the features of the editor and submit a nice design theme in time for the contest.
Here follows the screencast video. You may want to watch it in full screen so you can see clearly what is on the screen.
Below, you may find the transcript of the video, in case you cannot understand clearly something that I have spoken.
Feel free to post a comment to this article if you still have questions.
* Video transcript
- Creating a design theme
This presentation is meant to guide Web designers on how to create and propose a new design theme for the PHPClasses site design contest.
First, you need to go to the design editor page and create a new design theme.
phpclasses.org/design.html
You need to enter a title that will be used for showing your design theme proposal to other users.
Then you need to enter the design short name. This name will be used as a parameter in the URL of the site page that show your design. It must start with a lower case letter and be followed by one or more letters and digits, with up to 20 characters.
- Editing the headers and footers HTML template
Next, the site shows the initial list of files of your theme. These files contain the HTML and CSS templates that the site is currently using.
You should move on and click on the edit link of the template file that you want to change.
Lets start with the HTML template. The site shows you an HTML editor that has a visual mode and an HTML editing mode.
In the visual mode you can see a preview of what your HTML template looks like.
- HTML template variable marks
There are some dashed areas, which you cannot edit their contents. Those areas represent template variables. The site generates the contents of these areas dynamically when the site pages are being served to the users browsers.
You can click on the HTML button of the toolbar to switch to the HTML editing mode. As you may see, the text editor shows the HTML template contents.
You may notice that there are some marks in curly braces. These are the template variables that correspond to the dashed areas in the Visual editing mode.
Each of these marks has a meaning. If you click on the editor form tab labeled "Template marks", you can see a listing table of all supported template variable marks.
The table middle column explains the meaning of each mark. The last column tells you whether the mark is mandatory or not. Most marks are required to be present in the template. The others are optional.
The {body} mark is special. It represents the division between the page headers and footers. All the marks listed before the {body} mark cannot be put in the footer. Likewise the marks after {body} cannot be put in the header.
This edition of the contest is only for proposing a different design for the headers and footers of all site pages. Future editions of the contest will allow editing also the templates of the bodies of common types of pages.
If you click in the Visual button of the toolbar, you get back to the Visual editor.
You may notice that the dashed sections that represent the template variables exhibit the template variable name in the top left corner over a light blue background.
- Template variables with alternative presentation modes
Some template variables are also special. They are denoted with a plus sign after the template variable name. That means that they support alternative presentation styles.
If you click inside the dashed area of those special template variables, a pull-down menu will appear showing the different presentation styles that it supports.
Just click on the presentation style that you prefer and the Visual editor automatically changes the preview of the template variable area.
Currently, the navigation bars template variables support alternative presentation modes. You may see them with borders removed or even laid out vertically.
You may also notice that the name of the template variable changed a little. It appended the alternative presentation style name to the template variable name inside the curly braces.
If you switch back to the HTML editing mode, you may notice that the template variable name is changed the same way you see in the corner of the dashed area.
You can edit your template either in visual mode, editing mode, or alternatively in both modes, depending on what you think is more comfortable for you.
Once you are done with your changes, you need to save your template. Just click on the "Save and preview" button.
- Validation of HTML templates
If there are any issues, like a required template variable that is missing or misplaced, or your HTML does not validate properly, an error message will appear at the top explaining the issues that you need to fix.
Some HTML validation errors may be fixed automatically. For instance, you are not allowed to enter any JavaScript. That is measure to prevent security exploits. Any JavaScript will be automatically removed.
If there are no issues, the template is saved and you continue editing the template.
- Previewing the HTML template in different pages
You may notice that below the editor there is a preview area. It shows how your template appears when applied to real site pages.
You can switch the type of page that you want to preview by clicking on the editor form tab labeled "Page size and preview". This tab shows several columns of options.
The middle column lets you switch the page type. The left column lets you switch the role of the preview user. It can be either anonymous, logged, or premium. Premium users see no advertising spaces.
The right column lets you switch the size of the preview area. You may see it in 800x600, 1024x768, 100% of the current width, or some other custom size that you would like to try.
When you are done with the HTML editor, just click in the "Back to files list" button.
- Editing the main CSS file
Lets see now the CSS file editor. It has just a text editor with the CSS file template.
If you click on the editor form tab labeled "Template marks and styles", it shows all the styles that you can redefine to affect the site presentation. This tab explains the meaning of each style.
You may also notice the explanation of a template variable named {graphics}. This variable will expand to the base URL path of graphic images that you may want to use in your theme. I will be back to this topic ahead.
In the CSS text editor, you can add as many styles as you want besides these if you need them. Just keep in mind that you cannot use JavaScript in the CSS definitions.
A warning will appear if you attempt to save your CSS with JavaScript. The site removes the style properties that use JavaScript or other dangerous properties.
You can also use some properties that are proprietary to some browsers, like those for defining rounded borders in Mozilla Firefox or Safari and Chrome Webkit, as well alpha transparency level in Internet Explorer.
Other proprietary CSS properties are forbidden by default for security reasons, but some more may be enabled later.
You may save your CSS template file using also the "Save and preview" button. The preview area is updated then. You can also switch the options of the page preview clicking in the "Preview page and size" tab.
When you are done editing the CSS template file, just use the Back to files list button to return to the theme design menu.
- Replacing the site icon images
You can also override the site icons or add more theme image files. For that, just click on the "Add image files" link below the files listing.
First you will be prompted to choose the type of image you want to add. You can either add small icon images, large icon images, or custom images.
Small icon images, have the fixed size of 24 by 24 pixels and must be in GIF format. They are used throughout the site, mostly in navigation bars. Usually these images are transparent, so you may upload icons of this size with empty areas around them.
The form shows you a listing of all small icon images that can be replaced, as well the original site icon images, and a small description telling where in the site the images usually appear, so you may understand their purpose.
Large icons also have a fixed size of 80 by 60 pixels. They also must be in GIF format. They are used mostly in menu pages. Usually they are also transparent.
When uploading icon images, you should use the same names as the original. If you leave checked the Automatic file name option, the site will determine the image you want to replace from the name of the file you uploaded.
- Using custom images
Custom images are meant for using either in the CSS or HTML templates. They can be of any size up to 400 by 400 pixels. They can be either in GIF, JPEG or PNG formats, but the image files must not have more than 200KB each.
The custom image file names must have only letters, digits, dashes, and underscores, followed by the extension that must be either .gif, .jpg or .png according to the format of the image file.
Once you upload your image files, you may use them in the HTML or CSS templates using the {graphics} template variable followed by the image file name. For instance, if you uploaded a image file named background.jpg, you should use it for instance like this in the CSS file:
BODY { background-image: url({graphics}background.jpg) }
- Submitting your design proposal
When you are done with your design theme and you are ready to submit it, just use the link above the files listing labeled "submit your design". You will be taken to a page on which you need to enter a few details about your design proposal.
In the description field you should enter a few phrases that describe the key changes of your design relatively to the original site design. That is meant to help the site users to notice what improvements you have over the current site design.
The next fields let you tell whether or not you want to make your design preview viewable to all users before the voting period starts.
If you are afraid that others may copy your design ideas, choose the option labeled "Only after the election starts". This way nobody can see your design proposal, but you also will not be able to get comments about your design from the users until the election starts.
If you would like to get already comments and suggestions from the site users, click on the option labeled "Before the election starts". This way the users will be able to see your proposal and make comments that may help you improve your design.
Next, you see the terms of submission of the contest. You should read these terms with attention to prevent misunderstandings regarding the requirements of the contest.
Once you read and understood these terms, click on the checkbox labeled "I agree with these terms of submission", type your name below in the Signature field, and click in the "Submit" button.
Your proposal will be queued for review by a moderator. If there are any issues, the moderator may refuse your proposal. In that case, you will get an e-mail message explaining the issues and what you need to do to fix it and submit the proposal again.
- Viewing and commenting approved proposals
If it is all right, the moderator will approve your design and it will be listed in the design proposals section of the site:
phpclasses.org/design/
If you allowed the users to view your design proposal before the election starts, the users may click on your proposal link and see a preview of the design. They may also post comments with their opinions or suggestions of improvements.
If you only allowed the users to see your design when the election starts, only then they can preview and comment your design, but then you will not be able to change your proposal.
- Making changes to a submitted proposal
If you would like to make any changes, you can do them by going to the design editor page and click labeled "cancel the design submission". Only then you can perform any changes. When you are done with your changes, you can resubmit the updated proposal.
When election starts, nobody can make any more changes to their proposal.
So hurry up with your design theme. The deadline is December 15 2009. Good work and good luck for you.
If you still have questions or doubts, feel free to post comments to this post.
You need to be a registered user or login to post a comment
1,616,107 PHP developers registered to the PHP Classes site.
Be One of Us!
Login Immediately with your account on:
Comments:
3. Templates? - Jim Isaacs (2009-12-11 17:27)
Non-semantic template tags.... - 3 replies
Read the whole comment and replies
2. image question - Daveed (2009-12-10 05:44)
They can be of any size up to 400 by 400 pixels... - 11 replies
Read the whole comment and replies
1. Initiative - Ernani Joppert Pontes Martins (2009-12-08 17:01)
That's some nice initiative.... - 1 reply
Read the whole comment and replies