Knowledge Base

phpBB3 Styles' files list
Article ID: 515
Written By: TheIlluminative
Written On: Tue Nov 04, 2008 1:16 am
Description: A list of all files used within the styles of phpBB3 (Olympus).
link to this article on phpbb.com: Select All
[kb=phpbb3-styles-files-list]phpBB3 Styles' files list[/kb]
link to this article on your own board: Select All
[url=http://www.phpbb.com/kb/article/phpbb3-styles-files-list/]Knowledge Base - phpBB3 Styles' files list[/url]

phpBB3 Styles' files list

Just like phpBB2, phpBB3 contains a header, body and a footer where overall_header.html & simple_header.html controls the header, and overall_footer.html & simple_footer.html controls the footer, and the rest is defined by the other template files ( which we explain below of this article ) , where common pages use overall_header.html & overall_footer.html (ex. index, viewforum, viewtopic etc.) , and popups, topic review use simple_header.html & simple_footer.html, the most attractive thing now is that headers and footers are now assigned in the template files themselves, not in the PHP files, where you can use either of the files to be your header or even design an entirely new one.

phpBB3 is released including two styles, prosilver and subsilver2, and every single one has a different designing and coding:

  • subsilver2
    Consists of TABLEs, just like the old-school subsilver in phpBB2, and CSS is used to define colours, backgrounds etc.
  • prosilver
    Entirely depends on CSS as it's been designed in DIVs & Lists.
The files extension has been changed between phpBB2 and phpBB3 from TPL to HTML. This was done simply to make the life's of some people easier write syntax highlighting, etc.

Styles folder in Olympus contains a file called style.cfg and other 3 folders as the file style.cfg contains the style's information (style name, author, version..etc.), and the folders are:
  • imageset - contains the images used in the style and a file called imageset.cfg defines the images in the style.
  • template - contains the main HTML files that are responsible for the designing of the style, pages, where to show what etc. and a file called template.cfg contains the template information.
  • theme - contains the CSS files that defines how things are displayed, colors, backgrounds, links etc. and a file called theme.cfg which contains the theme information.
And here is a list with all files that you can find on the styles directory ( "prosilver" or "subsilver2" ) and what the function is of every one (Ordered Alphapetical):
phpBB3 has two different styles, differently styled, I'll first list the similar files in both styles, that have similar functions, then I'll list the files different for every style on the other.

Theme folder
  • stylesheet.css - The file responsible for CSS coding's and all classes used for styling.
Different files for prosilver than subsilver2:
  • bidi.css - Responsible for RTL forums adjustments, like Arabic and Hebrew.
  • buttons.css - Responsible for displaying forum buttons (New Topic, Add Reply etc.).
  • colours.css - The file responsible for forum colors, texts, backgrounds etc.
  • common.css - Common styling like header, index, footer etc.
  • content.css - Content and inner pages styling, like viewforum_body.html, viewtopic_body.html etc.
  • cp.css - User CP styling, Tabs, PMs page etc.
  • forms.css - Forms styling, example; login box, posting page, textareas etc.
  • large.css - Displays large text size, when using the 'A' button.
  • links.css - Links styling, colors, backgrounds, hovers etc. (Colors are used from colours.css, this is used to format them, text sizes, styling etc.).
  • medium.css - Displays a medium text size, when using the 'A' button.
  • normal.css - Displays the normal text size, when the 'A' button is back to the beginning..
  • print.css - Responsible for formatting the topic to be printed, when using the 'Print' button.
  • tweaks.css - Browsers specific adjustments, like IE.
All these files are then assembled together into stylesheet.css with the 'import' property:
Code: Select all
@import url("filename.css");

The theme folder contains a folder called images which includes the images of the style, backgrounds, icons..etc.

Template folder
  • attachment.html - The file that displays attachments in posts and PMs.
  • bbcode.html - BBCode buttons specific file, contains the buttons and their jobs.
  • confirm_body.html - Confirmation page. Appears when confirming on something (ex. deleting a topic).
  • custom_profile_fields.html - Custom profile fields page, appears while editing the profile, and when is specified on the register page.
  • editor.js - Writing editor JS file, used while writing a topic, reply, PM and applies the BBCode buttons and other writing objects.
  • faq_body.html - Frequently asked questions page and the help BBCode page.
  • forumlist_body.html - The file that displays categories and forums on the index, and on viewforum the subforums.
  • index_body.html - The file that shows the index page content.
  • jumpbox.html - Displays the quick jump box.
  • login_body.html - Login page, used when logging in to the forum, or confirming your password to enter the Admin Control Panel.
  • login_forum.html - Login page for password protected forums.
  • mcp_approve.html - Topics and posts approval page, when there are topics or posts in the queue, this is the file responsible for displaying them.
  • mcp_ban.html - Ban page, displayed when the Moderator has the permission to ban users.
  • mcp_footer.html Moderator control panel footer, contains pagination, topics, posts etc.
  • mcp_forum.html Forum moderation in Moderator control panel.
  • mcp_front.html Moderator control panel front page, contains last actions like last 5 reports, last 5 logs etc.
  • mcp_header.html Moderator control panel header, contains the tabs & blocks, title of the object being moderated now etc.
  • mcp_logs.html Moderators logs page, where a moderator can view other moderators actions and his own ones.
  • mcp_message.html The message that appears for Moderator after doing an action, changing a topic type as an example.
  • mcp_move.html Moderator move a topic page, where you can choose where to move your topic and confirm the moving.
  • mcp_notes_front.html Members notes front page, you choose from here the user, and the notes on him will appear.
  • mcp_notes_user.html The Page where members notes appear, here you can read users notes and write your own notes on them.
  • mcp_post.html - The posts moderation page in MCP, that shows options for the moderator to lock post for editing, change author etc.
  • mcp_queue.html - The page that shows topics and posts on moderation queue.
  • mcp_reports.html - The page that shows reports in the MCP.
  • mcp_topic.html - The topics moderation page in MCP, here you can edit, lock, change to sticky etc.
  • mcp_viewlogs.html - Page that shows a specific topic logs.
  • mcp_warn_front.html - Warnings front page, where you can see the most warned users, last 5 warnings and select a user to warn.
  • mcp_warn_list.html - A page the shows a list of all warned members.
  • mcp_warn_post.html - The warn a user for a specefic post page, shows up when you click on warn in a post.
  • mcp_warn_user.html - The warn a user page, shows up when you search for a user from the warnings front page or click on warn in his profile.
  • mcp_whois.html - The page that shows an IP information when you click Whois.
  • memberlist_body.html - The members list page, click on 'members' in the header to see this page.
  • memberlist_email.html - The send an email page, click on 'E-mail username' in the user's profile or email topic to see this page (The 'Users send e-mail via board' setting in 'E-mail settings' in ACP must be enabled).
  • memberlist_im.html - The send an instant message pop-up page, click on an instant messaging client in the user's profile to see this page.
  • memberlist_leaders.html - The Administrators and Moderators list page, click on 'The team' in the footer to see this page.
  • memberlist_search.html - The search for a member page, click on 'Find a member' in members list page to see this page.
  • memberlist_view.html - The page that shows a user's profile, click on a username to see this page.
  • message_body.html - A general message, shows up when you make an action, ie. when you add a topic, a message saying 'This message has been posted successfully' shows up etc. this is the page responsible for it.
  • overall_footer.html - Board's footer, used in main pages like index, viewforum, search..etc. and contains the copyrights, translation info..etc.
  • overall_header.html - Board's header, used in main pages and contains the logo, links..etc.
  • posting_attach_body.html - The attach a file block body, shows up in the posting page.
  • posting_body.html - The posting page, used to write topics, posts, PMs..etc.
  • posting_buttons.html - The page responsible for showing the BBCode buttons while posting a topic, PM..etc.
  • posting_poll_body.html - This is the page that shows the 'Add a poll' block when writing a topic.
  • posting_preview.html - The preview a topic, post or message page, when writing a topic, post or message click on 'Preview' this page will appear.
  • posting_review.html - The page the appears when you're writing a reply, and there has been a reply to the topic during your writing, this page will show up to tell you that there has been a reply, and for you to see if you're going to change your reply upon that reply.
  • posting_smilies.html - The smilies page, appears while writing a topic, reply or message.
  • posting_topic_review.html - The topic review page, appears when replying to a topic to review the topic.
  • search_body.html - The search front page, click on 'Search' on the header to see this page.
  • search_results.html - The search results page, search for any term, this page will show up.
  • simple_footer.html - The footer for pop ups, topic review page etc.
  • simple_header.html - The header for pop ups, topic review page etc.
  • template.cfg - The file that contains template information, used to define the template in the forum.
  • ucp_agreement.html - The agreement page, click on register in the header to see this page.
  • ucp_attachments.html - A page that shows all user's attachments in the board, in the UCP click on 'Manage attachments' to see this page.
  • ucp_footer.html - The footer for the UCP.
  • ucp_groups_manage.html - The manage a group page, if you're a manager of a group, this page is responsible for managing it.
  • ucp_groups_membership.html - The page of groups membership, click on 'Usergroups' to see this page.
  • ucp_header.html - The header of the UCP, contains blocks, links etc.
  • ucp_main_bookmarks.html - The bookmarks page, shows the bookmarks and allows you to manage them, click on 'Manage bookmarks' to see this page.
  • ucp_main_drafts.html - The manage drafts page, drafts can be found in UCP click on 'Manage drafts'.
  • ucp_main_front.html - The UCP front page, click in 'User Control Panel' in the header to see this page.
  • ucp_main_subscribed.html - The page that shows your subscriptions, here you view and manage your subscriptions, click on 'Manage subscriptions' in the UCP to see this page.
  • ucp_pm_history.html - Message history, shows your message history to and from the user when replying to a message.
  • ucp_pm_message_footer.html - Private message footer, shows up when viewing a message.
  • ucp_pm_message_header.html - Private message header, shows up when viewing a message.
  • ucp_pm_options.html - Private messages settings, click on 'Rules, folders & settings' in the 'Private messages' page to see this page.
  • ucp_pm_popup.html - The new message/s popup windows, appears when you have new message/s and you have enabled 'Pop up window on new private message' in your 'Board preferences'.
  • ucp_pm_viewfolder.html - The view folder page, to show messages in the folder, eg. Inbox, Outbox, Sent messages..etc. click on a forum to see this page.
  • ucp_pm_viewmessage.html - The view a message page, click on a message to read it and see this page.
  • ucp_pm_viewmessage_print.html - The page used when printing a message, click on the printer icon while reading a message to see this page.
  • ucp_prefs_personal.html - Global settings page, in the UCP click on 'Board preferences' then click on 'Edit global settings' to see this page.
  • ucp_prefs_post.html - The posting defaults settings page, in the UCP click on 'Board preferences' then click on 'Edit posting defaults' to see this page.
  • ucp_prefs_view.html - Display settings page, in the UCP click on 'Board preferences' then click on 'Edit display options' to see this page.
  • ucp_profile_avatar.html - The avatar settings page, in the UCP click on 'Profile' then click on 'Edit avatar' to see this page.
  • ucp_profile_profile_info.html - The personal information page, in the UCP click on 'Profile' then click on 'Edit profile' to see this page.
  • ucp_profile_reg_details.html - The account settings page, e-mail, password etc. in the UCP click on 'Profile' then click on 'Edit account settings' to see this page.
  • ucp_profile_signature.html - The signature settings page, in the UCP click on 'Profile' then click on 'Edit signature' to see this page.
  • ucp_register.html - The register a new user page, click on 'Register' in the header to see this page.
  • ucp_remind.html - The password remind page, click on 'I forgot my password' in the login page to see this page.
  • ucp_resend.html - The page to resend the activation code, if you didn't receive an activation mail, click on 'Send activation e-mail' to see this page.
  • ucp_zebra_foes.html - The foes management page, shows your foes and allows you to add, manage them, in the UCP click on 'Friends & Foes' then click on 'Manage foes' to see this page.
  • ucp_zebra_friends.html - The friends management page, shows your friends and allows you to add, manage them, in the UCP click on 'Friends & Foes' then click on 'Manage friends' to see this page.
  • viewforum_body.html - The page that shows forums, click on a forum title in the index to see this page.
  • viewonline_body.html - The page that shows who is online now, click on 'WHO IS ONLINE' in the index to see this page.
  • viewonline_whois.html - The page that shows IP information when clicking on 'Whois' in the viewonline.php page .
  • viewtopic_body.html - The page that shows topics and posts, click on a topic title to see this page.
  • viewtopic_print.html - The print a topic preview page, click on the printer icon in the header while viewing a topic to see this page.
Different files for each style than the other one:
prosilver
  • drafts.html - The load a draft page, when posting click on 'Load' to see this page.
  • forum_fn.js - The forum functions JavaScript file, controls pop ups, jumpbox etc.
  • posting_editor.html - The main posting page for prosilver.
  • posting_layout.html - The posting page, contains the editor, smilies, add poll, attachments etc.
  • posting_pm_layout.html - The writing a message main page, same as posting_layout.html, but for private messages.
    This declares that 'posting_body.html' has nothing itself, but is divided into the files shown up, then these files are included into it to from the file.
  • styleswitcher.js - The JavaScript file that contains user cookies, the 'Change font' function, active stylesheet settings..etc.
  • ucp_avatar_options.html - The user's avatar settings. This file is the same as the posting ones, 'ucp_profile_avatar.html' also includes this file to show the avatar settings.
subsilver2
  • breadcrumbs.html - The page that shows the navigation path, and the time settings.
  • mcp_jumpbox.html - The jumbox for moderator control panel (This file is no longer in use).
  • memberlist_group.html - The page that shows a group's information, click on a group's name to see this page.
  • pagination.html - The file that shows paginations for forums, topics etc that has more than one page.
  • posting_progress_bar.html - The loading page, when uploading an attachment a pop up appears to show the loading progress, this is the file that shows it.
  • searchbox.html - The searchbox in forums, topics etc.
For files being included, it has been done easily by using the function 'INCLUDE' like this:
Code: Select all
<!-- INCLUDE filename.ext -->

I think that's all :roll: