Servlet Web Hosting - MySQL, Java, JSP, Servlet, Tomcat, SSH Blog

360 CHAPTER 12 STYLING PHPBB You now likely have a subSilver board wrapped in your site s colors and layout. That s good progress, and you ve completed about half of the job. Now is a good time to visit your pages and make sure there are no major problems in terms of layout or other areas. I recommend using multiple browsers to do this, as some browsers will catch errors that others may ignore. If you find some problems with the layout, double-check that all the code you ve inserted is correct and works well with the existing pages. You may find that you have additional tweaking to do in your header and footer templates. Generally, it s always better to get these major layout errors out of the way sooner rather than later. After you ve verified that your layout and the existing phpBB pages are in harmony, it s time to take on the other half of the job: tweaking the tables, images, and other miscellaneous items scattered throughout to fit your web site s design and color scheme. Customizing Pages You should concentrate on modifying the pages that are the most frequently visited, and thus templated: index_body.tpl, viewforum_body.tpl, viewtopic_body.tpl, and posting_body.tpl. How you make those pages look can largely dictate how the rest of the forum looks. Those four templates are the ones I recommend that you spend the most time on initially. (If the error box is the first thing your users see rather than the Forum Index page, chances are you have bigger problems to resolve at the moment.) Try to stick to the subSilver coding where you can, but do feel free to edit the tables accordingly. When you find a style of tables that you like, you can then begin implementing that on other pages throughout the site. Changing Graphics After you have your code straightened out, you can change into graphic designer mode. You ll want to alter, in some way, the graphics listed earlier in Tables 12-3 and 12-4, to help your site s integration. If your site uses a dark-blue background in some of the tables and also the sub- Silver-colored graphics, you ll notice a serious clash. If you re integrating phpBB into your main web site, redoing the graphics is a must for the professional appearance you want. You can search some of the phpBB styles sites for graphics that match your new custom template, or you can modify the existing graphics. If you are feeling really ambitious, you can try your hand at creating your own graphics. This can be a fun and rewarding way to put your stamp on your forums. Plus, there s no feeling quite like when you can honestly say, Yes, I did all the graphics. Caution If you decide to edit some of the language-sensitive graphics (listed in Table 12-4), make sure you can provide translations for each of the language packs you have installed. Failing to do so will likely result in inconsistency and a language pack that s effectively broken. Plus, you run the risk of alienating visitors who use those language packs. When you change the graphics of your template, it is often easier to stick with the sub- Silver naming convention versus going with your own. This prevents you from having to do heavy editing on your template configuration file (the template.cfg file, where template corresponds to the name of the folder your template resides in) to reflect these changes.
You want to have a cheap webhost for your apache application, then check apache web hosting services.

CHAPTER 12 STYLING PHPBB 359 After you decide a strategy to use to attack the CSS, the next step is to dive into the HTML of the header and footer template files to do the bulk of the integration portion of the project. Using Headers and Footers to Integrate with Your Site Site integration projects generally require you to work the most on the header and footer files. You need both because overall_header.tplopens most of your pages, and overall_footer.tpl closes them. When customizing your board, think of overall_header.tpl extending to where the body of the board begins. For example, I like to employ a sidebar in my designs. If you have a sidebar on the left side of your site, this is the file where you would want that sidebar to show up. However, if the sidebar is on the right side of your site, you will want to edit overall_footer.tpl and insert it there instead, as that picks up where the body of the page left off. The key to templating is that you are just editing one fragmented HTML page. Understanding the templating of the header and footer is critical, especially if you use tables for layout. If you forget to finish your tables in the footer, you may run into serious problems with your page breaking. When editing the header, it s important to preserve the links to the specific pages of your forums (editing profiles, registration, and so on). Going through and doing wholesale deletions can be costly; for example, you may realize that you can no longer check your private messages easily. Make sure you use the subSilver template as a guide, and check constantly to make sure you ve kept the links. It s a smart idea not to replace the titles of the links with images or textual characters that are not localized to the language, unless you are planning on serving an English- only site. By replacing the {L_. . .} variables, you re removing the references to the localizations. Optional items include the site title and slogan. I usually end up using an image to replace these. A smart idea would be to use the site title and slogan as the alternate text for any title image you may create. Use the footer to round out the design, whether tabular or via style sheets. Feel free to add your site s standard footer, not disturbing the link to phpBB too much. After rounding out your design in the footer, take a look at your site. You may be wondering about the simple_header.tpl and simple_footer.tplfiles (briefly explained in Table 12-1). These are the simple header and footer used in the pop-up windows. If you ve decided on full CSS replacement, you ll want to remove the subSilver CSS embedded in simple_header.tpl and replace it with what you are using. You might edit simple_footer.tpl only if you wish to modify the style of the copyright, as that is all that is displayed on that screen. Caution Do not delete the link to phpBB in the footer! By doing that, not only are you denying credit where credit is due (I doubt you wrote the source code behind phpBB), but you are also putting yourself in jeopardy of not being able to receive support for your forums if you run into a problem. You re getting phpBB for free, and the least you can do is acknowledge the work the phpBB Group has put into it.
From our experience, we are can tell you that you can find a reliable and cheap webhost service at Java Web Hosting services.

358 CHAPTER 12 STYLING PHPBB an aSilver.cfg file. Do not rename subSilver.css to anything else! Go ahead and make aSilver the default style so you can see your changes as they happen. (See the Installing and Using Themes section for more details on installing themes to your phpBB board and setting the default style.) Now it s time to consider some strategies for managing style customizations. Considering Styling Customization Approaches You can take a couple different approaches to handling styling customizations in phpBB. You can provide a static style sheet in a separate .css file. This approach is generally good if you are going for site integration. It does not permit you to make changes to colors and fonts using the Styles Administration panel, however. If you are looking to possibly release your template, you ll want to keep the subSilver method of adding styles to the board intact. subSilver places the contents of its style sheet in the overall_header.tplfile, complete with references to appropriate template variables for the theme, which permit you to use the Administration panel to change some colors and fonts. Go ahead and crack open overall_header.tpl in your copy of subSilver. The first thing you will likely notice is the large amount of CSS representing all the styles that control sub- Silver s layout. This CSS is controlled via the Administration panel. If you remove this CSS, you will lose that control. For site integration projects, removing the embedded CSS is perfectly fine, unless you wish to support multiple color themes. Otherwise, you ll want to customize the embedded CSS accordingly. Having a static style sheet generally reduces bandwidth usage. While smaller sites may not have problems with high-bandwidth usage, busier sites will likely prefer the static style sheet, which can be cached in the browser, so it is not downloaded with each page visit. If you are doing a site integration project, you should take another step and create your own style sheet and use the
HTML tag to link it to your page in overall_header.tpl. This way, you can style everything from scratch. If you wish, you can stick with the built-in subSilver identifiers, or you can take a harder, but more powerful, route and rip out subSilver s CSS definitions and replace them with your own. This is the route I almost always take. While it is a lot more work to replace the subSilver CSS definitions with your own, the control you get is unparalleled. Again, regardless of which path you take, do not delete the subSilver.cssfile! phpBB permits you to theme the Administration panel along with the rest of the site. This is fine, but removing the CSS file without altering any of the definitions can have incredibly strange consequences. If you decide to use a separate style sheet, make sure you don t disturb any of the theme settings in the Administration panel, as subSilver is perfectly fine for your behind-the-scenes work. Removing these values will cause the Administration panel to go haywire and become completely illegible (think black screens and one-pixel fonts, seriously!). If you are sticking with the subSilver definitions and theme-controlled colors, feel free to change those. You will notice that the Administration panel undergoes some changes as you do this; this is perfectly normal, as you re altering the settings for your theme in its entirety. Caution Under no circumstances should you delete the subSilver.css file!
We would like to recommend you tested and proved virtual web hosting services, which you will surely find to be of great quality.

CHAPTER 12 STYLING PHPBB 357 Defining blocks provokes a little nitpicking from the template engine. Block definitions must occur on their own line, and the code inside the HTML comment identifiers must be set off from each identifier by a space. Here is a great example of what not to do when defining blocks: . .

You’re logged in! Notice the problems with this example. Line 1 has the block delineation on the same line as other code; phpBB does not like this. Line 3 shows the END keyword is directly next to the opening HTML comment identifier, where it should be set off with one space. These kinds of errors are easy to make, but you need to be careful to avoid them, because they can cause problems, even to the point of malfunction. Limitations on Using Templates phpBB 2.0 templates have some limitations that you should be aware of before you start modifying or creating templates. Some of these limitations are due to the nature of its syntax; others are due to performance and reliability concerns. Because the phpBB templating system uses HTML comments to denote blocks of HTML code, it is generally a good idea to place a C++-style comment (//) before the text of your HTML comment, after the opening marking (
{myblock.COUNTER} A repeating block is generally identified by the presence of block-specific template variables (the template variables prepended with blockname. before each variable name). These variables are local in scope to the block only, and they cannot be used outside the boundaries of the block. The other reason to use blocks is to display when a certain condition is met, such as whether or not the user is logged in. Here is an example of a conditional block:

Welcome back to our community!

You ll find that the names of conditional blocks generally start with the prefix switch_ and the condition for executing the command. phpBB s template engine does not necessarily make decisions. Instead, it relies on flags set by the phpBB script to determine whether a block of code should run.
If you are looking for affordable and reliable webhost to host and run your business application visit our ftp web hosting services.

CHAPTER 12 STYLING PHPBB 355 than 100 separate template variables are available. Here, I ll cover the most commonly used template variables. For a comprehensive list of every template variable supplied with phpBB (excluding template variables that may be created by code modifications) with brief descriptions, see http://www.phpbb.com/styles/listvars.php. This list is kept up-to-date when changes warrant, so you can be confident that it s reliable information. Template variables generally come in the form {VAR}, where VAR is the name of the template variable as defined in the phpBB script file. If you are using a template variable defined inside a block (commonly seen on pages such as viewforum.php and viewtopic.php), the template variable will be formatted slightly differently: you ll see a line like {myblock.VAR}, where myblock is the name of the block in which the variable VARis defined. (You ll learn more about blocks in the next section.) Template variables are always denoted by the two curly braces surrounding the identifier. Therefore, you should use care when using curly braces in your layout. In fact, I recommend avoiding the usage of curly braces outside of template variables. If they are unavoidable, make sure you have one space separating the first curly brace from the word inside, and one space after the word in between. This way, phpBB will not attempt to execute the variable. If you use a template variable that isn t defined, phpBB will simply replace that variable with a blank space character. When using template variables, you can stick them anywhere in the template file in the section of your HTML document, within a hyperlink, or anywhere else you wish a piece of text from phpBB to be output to the screen. For example, subSilver contains the following code snippet, which generates a title for the resulting HTML document from two template variables: The two template variables in this example are {SITENAME}, which will display the name of your site as you configured in the Administration panel when you first set up your board, and {PAGE_TITLE}, which is, predictably, the title of the page as set in the page s PHP code. This line displays in the title bar of the user s browser. So, for a site named MyForums on the Memberlist page, you ll see the following output in your HTML source after the previous code is parsed: Notice the clean replacement of text. Template variables are often small snippets of text, but they can also contain sizable chunks of HTML in some rare instances. I reiterate that you can use a template variable anywhere in a template file, as long as it will be defined for that file. Refer to Chapter 11 for details on creating template variables for use within your pages. Be warned: not every template variable exists in all pages of phpBB. There are two types of template variables: Global variables are defined in page_header.php and page_tail.php, and are available to every page in your script. Per-page variables are defined in each individual phpBB page such as index.php or viewforum.php. Template variables defined in files other than page_header.php and page_tail.php are not global to the entire script, and therefore take effect only for individual pages. Often, though,
If you are in need for chaep and reliable webhost to host your website, our recommendation is http web server services.

354 CHAPTER 12 STYLING PHPBB Finally, Table 12-4 lists the images that are language-specific. If you have installed addi tional language packs, you will want to ensure these images are translated as well. This table shows the files in the lang_english directory. Put images you port to other translations in a lang_language directory, where language is the language to which you are translating. Table 12-4. subSilver Language-Sensitive Image Files (in templates/subSilver/images/ lang_english) File Description icon_aim.gif Icon displayed in individual posts that represents a link that starts an AOL Instant Messenger conversation with the user who made the post, if the user volunteers that information in her profile icon_edit.gif Icon displayed in individual posts that is linked to the post editing functionality, if the logged-in user is authorized to edit the post icon_email.gif Icon displayed in individual posts that, depending on e-mail settings you choose in the Administration panel, is linked to a mailto: address for the user s registration e-mail, or links to a page from which you can send an e-mail icon_icq_add.gif Icon displayed in individual posts that permits you to add a user to their ICQ buddy list, if he volunteers his ICQ number icon_ip.gif Icon that links to the IP manager, permitting authorized users to get the IP address of the user making a post, if the user has permissions to view IP addresses of posts icon_msnm.gif Icon that links to the user s profile that contains MSN Messenger contact information, if this information is given icon_pm.gif Icon that permits users to send a private message to the user who made the post icon_profile.gif Icon that links to the profile of the user making a post icon_quote.gif Icon that links to the quote reply page for posts in open threads icon_search.gif Icon used on public user profile pages that links to a search query on the user s posts icon_www.gif If the user specifies a web site, icon that appears on her posts and profile icon_yim.gif If the user specifies a Yahoo! Messenger account name, the icon that appears on his posts and profile; clicking its associated link starts a Yahoo! Messenger chat session msg_newpost.gif Image associated with a link to send a new private message post.gif Image appearing on viewforum.php and viewtopic.php pages that starts a new post, if the forum or topic is not closed reply.gif Image appearing on viewtopic.php pages that links users to the reply page, if they are permitted to post and the topic is not closed reply-locked.gif Image appearing on viewtopic.php or viewforum.php pages that notifies the user that the topic is closed to further responses Template Variables The template engine s syntax is not incredibly complex. Studying the layout of the subSilver template will help you get used to the syntax quickly. By far, the most common element you will deal with while writing your template is the insertion of template variables generated by the phpBB script for output in your page. More
We recommend you use shared web hosting services, because many users agree that it is cheap, reliable and customer-satisfying webhost.

CHAPTER 12 STYLING PHPBB 353 File Description icon_mini_groups.gif Image that appears on each forum page, next to the usergroups link in the default subSilver header icon_mini_login.gif Image that appears on each forum page, next to the login/logout link in the default subSilver header icon_mini_members.gif Image that appears on each forum page, next to the memberlist link in the default subSilver header icon_mini_message.gif Image that appears on each forum page, next to the private message link in the default subSilver header icon_mini_profile.gif Image that appears on each forum page, next to the profile link in the default subSilver header icon_mini_register.gif Image that appears on each forum page, next to the register link in the default subSilver header (users who are logged in will not see this image or link) icon_mini_search.gif Image that appears on each forum page, next to the search link in the default subSilver header icon_minipost.gif Image that appears in individual posts next to the Posted time in a viewtopic.php page to indicate that this post is not new since the user s last visit icon_minipost_new.gif Image that appears in individual posts next to the Posted time in a viewtopic.php page to indicate that this post is new since the user s last visit icon_newest_reply.gif Image that appears next to titles of topics containing new posts since the user s last visit in a viewforum.php page; associated with a hyperlink that takes you to the first new post in a thread index.htm Page that displays the credit image, created_by.jpg, used to block outside readers from seeing the contents of your template directory logo_phpBB.gif phpBB logo image that appears on each phpBB page logo_phpBB_med.gif phpBB logo image that appears in the left pane of the Administration panel msg_inbox.gif Icon representing the Private Message Inbox in privmsgs.php msg_outbox.gif Icon representing the Private Message Outbox in privmsgs.php msg_savebox.gif Icon representing the Private Message Savebox in privmsgs.php msg_sentbox.gif Icon representing the Private Message Sentbox in privmsgs.php spacer.gif One-by-one transparent image used for spacing items topic_delete.gif Icon associated with link to delete a topic; displays for authorized users in viewtopic.php topic_lock.gif Icon associated with link to lock a topic; displays for authorized users in viewtopic.php topic_move.gif Icon associated with link to move a topic to a new forum; displays for authorized users in viewtopic.php topic_split.gif Icon associated with link to split a topic into two topics; displays for authorized users in viewtopic.php topic_unlock.gif Icon associated with link to unlock a topic; displays for authorized users in viewtopic.php vote_lcap.gif Image used to round out the left side of a poll percentage bar vote_rcap.gif Image used to round out the right side of a poll percentage bar voting_bar.gif Image used to fill in the middle of a poll percentage bar whosonline.gif Icon for the Who s Online feature, displayed on the Forum Index page
Visit our web design programs services for an affordable and reliable webhost to suit all your needs.

352 CHAPTER 12 STYLING PHPBB Table 12-3 lists the language-neutral images supplied with subSilver, located in the templates/subSilver/images subdirectory. Table 12-3. subSilver Language-Neutral Images (in templates/subSilver/images) File Description cellpic1.gif Background image most commonly used in subSilver category headers cellpic2.jpg Background image gradient used on the right side of table headings on the Forum Index page cellpic3.gif Background image used for subSilver table titles and headers cellpic.gif Does not appear to be used created_by.jpg Credit image for the subSilver theme (optionally, you can create one for your theme) folder.gif Image that represents topics with no new posts since the user s last visit that have not reached the hot topic threshold (by default 25 posts in a thread); used primarily in viewforum.php pages folder_announce.gif Image that represents topics marked as announcements that do not have any new posts since the user s last visit (there is no hot topic threshold for announcements or sticky topics) folder_announce_new.gif Image that represents topics marked as announcements that have new posts since the user s last visit folder_big.gif Image used on the Forum Index page to represent a forum with no new posts since the user s last visit folder_hot.gif Image that represents topics with no new posts since the user s last visit that have met the hot topic threshold folder_lock.gif Image that represents topics with no new posts since the user s last visit that have been locked by a moderator or administrator folder_lock_new.gif Image that represents topics containing new posts since the user s last visit that have been locked by a moderator or an administrator folder_locked_big.gif Image used on the Forum Index page to represent a forum that has been set to not permit any posting folder_new.gif Image that represents topics containing new posts since the user s last visit that have not reached the hot topic threshold folder_new_big.gif Image used on Forum Index page to represent a forum containing new posts and/or topics since the user s last visit folder_new_hot.gif Image that represents topics containing new posts since the user s last visit that have reached the hot topic threshold folder_sticky.gif Image that represents topics marked as sticky that contain no new posts since the user s last visit. (there is no hot topic threshold for sticky topics) folder_sticky_new.gif Image that represents topics marked as sticky that contain new posts since the user s last visit icon_delete.gif Image that appears on individual posts in viewtopic.php where the logged-in user has permission to delete a post (for example, a moderator could click this icon to delete an individual post) icon_latest_reply.gif Image that appears on the Forum Index and viewforum.php pages, in conjunction with a link to the latest reply in a thread icon_mini_faq.gif Image that appears on each forum page, next to the FAQ link in the default subSilver header
Note: If you are looking for cheap and reliable webhost to host and run your mysql application check mysql web server services.

CHAPTER 12 STYLING PHPBB 351 File Description privmsgs_popup.tpl Template file that provides the content of the pop-up window that appears when a new private message is received privmsgs_preview.tpl Template file that provides preview functionality for sending private messages privmsgs_read_body.tpl Template file for reading a private message profile_add_body.tpl profile_avatar_gallery.tpl Template file for the form to edit user profiles Template file used in generating the avatar gallery profile_send_email.tpl Template file that provides the interface to sending e-mail to users (when board e-mail is enabled) profile_send_pass.tpl Template file for the page that sends new passwords profile_view_body.tpl Template file for the page where people view user profiles search_body.tpl Template file that contains the main search form search_results_posts.tpl Template file that is used for results displayed as posts search_results_topics.tpl search_username.tpl Template file that is used for results displayed as topics Template file used for searches for posts made under a given username simple_footer.tpl Footer file used in small pop-up windows and topic review simple_header.tpl Header file used in small pop-up windows and topic review viewforum_body.tpl Template file used for laying out the contents of a forum viewonline_body.tpl Template file used for displaying the Who s Online page viewtopic_body.tpl Template file used in laying out a topic page viewtopic_poll_ballot.tpl Template file containing a block of HTML for displaying a poll ballot viewtopic_poll_result.tpl formIE.css Template file containing a block of HTML for displaying poll results CSS file containing rules for modern browsers (Internet Explorer 4 and later; Mozilla browsers, and so on) that are ignored by other, older browsers (Netscape 4.x, Internet Explorer 3.0, and so on) to help maximize compatibility subSilver.css The master external style sheet for the subSilver theme Table 12-2 lists the two configuration files that come packaged with subSilver and are found in generally any theme you may to create or install. Table 12-2. subSilver Configuration Files File Description subSilver.cfg A PHP file that largely provides paths to images. When you create your own theme, you will rename this file to the name of your theme. theme_info.cfg A configuration file standard to all themes and generated from the database, and used when installing themes. It contains template and style information, a CSS filename, colors for certain objects, and fonts for certain areas.
Please visit Domain Name Hosting services for high quality webhost to host and run your jsp applications.