MyBB.de Forum
Tutorial zur Themeerstellung bei 1.4.X & 1.6.X - Druckversion

+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Anpassungen (https://www.mybb.de/forum/forum-47.html)
+--- Forum: Theme-Diskussionen (https://www.mybb.de/forum/forum-84.html)
+--- Thema: Tutorial zur Themeerstellung bei 1.4.X & 1.6.X (/thread-10541.html)



Tutorial zur Themeerstellung bei 1.4.X & 1.6.X - krafdi - 21.08.2008

Ich werde hier erklären wie man bei der Version 1.4.X eine neues Themes erstellt bzw. anpasst.
Da das ganze bei der 1.4er Version sehr Umfangreich ist wird dieses Tutorial langsam 'wachsen', gerne könnt ihr auch mit arbeiten und mir die Ergänzungen per PN zu senden ich werde diese dann Überprüfen und hier anhängen.

1. Grundsätzliches und Hilfreiches
2. Theme-Eigenschaften bearbeiten
2a. global.css
2b. usercp.css
2c. modcp.css
2d. star_ratings.css
2e. showthread.css
3. Template-Sets
4. Screencast Zum Thema Wie installiere ich ein Themes
5. Fragen / Anregungen

Die Änderungen (Werte) werde ich so wählen das man auf den Screenshots gut erkennt wo sich die Änderungen im Frontend auswirken.


RE: Tutorial zur Themeerstellung bei 1.4.X - krafdi - 21.08.2008

1. Grundsätzliches und Hilfreiches

Alls erstes möchte ich anmerken das es sinnvoll ist wenn ihr euch bereits mit HTML, CSS und vielleicht auch noch ein wenig mit PHP auskennt.
Hier sind mal ein paar links die weiter Helfen!

CSS4you Infos zu CSS
SelfHTML Infos zu HTML
PHP Infos zu PHP
HTML Validator
CSS Validator
Farben Mit Hexadezimalformat


Themes können im ACP --> Templates & Style --> Themes --> *Dein Theme* bearbeitet werden.

Da bei allen Einstellungen im Backend das gleiche Eingabefenster zur Verfügung steht habe ich dieses einmalig als Screenshot hinterlegt und durch Nummeriert.


RE: Tutorial zur Themeerstellung bei 1.4.X - krafdi - 21.08.2008

2.Theme-Eigenschaften bearbeiten

Name *
Bestimme einen Namen für das Theme.

Lege einen Aussagekräftigen Namen für dein Thema fest!

Übergeordnetes Theme *
Wähle das Theme, welchem dieses untergeordnet sein soll.

Ich Empfehlel hier das MyBB Master Style Themes zu wählen

Template-Set *
Wähle das Template-Set, das du für dieses Theme nutzen willst.

Falls ihr auch Änderungen am den Templates vornehmen möchtet solltet ihr ein eigenes Template Set für dieses Themes anlegen

Editor-Stil *
Ich Denke das ist selbsterklärend!

Pfad zu den Bildern
Wo befinden sich die Bilder für dieses Theme?

Legt für einen Ordner mit dem Namen eures Themes an und kopiert dort die Standard Grafiken bzw. eure eigene Grafiken hinein und legt diesen im Ordner images ab.

Logo
Wähle die URL zum Logo des Forums für dieses Theme.

Selbsterklärend!

Tabellenzwischenraum
Wähle den Innenabstandes der Tabellenzellen in Pixeln. Dies entspricht dem cellpadding-Attribut des table-Tags.

   

Breite des Randes der Inhaltstabelle
Wähle die Breite des Randes der Tabellen in Pixeln. Dies entspricht dem cellspacing-Attribut des table-Tags.

   


RE: Tutorial zur Themeerstellung bei 1.4.X - krafdi - 21.08.2008

2a. global.css

Anhand der folgenden Screenshots seht ihr eine komplette Übersicht wo im Forum welche Classen und ID´s eingesetzt werden. Diese Bezeichnungen findet ihr im Dropdown Menu wieder.

   


body
a:link
a:visited
a:hover, a:active
#container
#content
.menu ul
.menu ul a:link
.menu ul a:visited
.menu ul a:hover, .menu ul a:active
#panel
table
.tborder
.thead
.thead a:link
.thead a:visited
.thead a:hover, .thead a:active
.tcat
.tcat a:link
.tcat a:visited
.tcat a:hover, .tcat a:active
.trow1
.trow2
.trow_shaded
.trow_selected td
.trow_sep
.tfoot
.tfoot a:link
.tfoot a:visited
.tfoot a:hover, .tfoot a:active
.bottommenu
.navigation
.navigation a:link
.navigation a:visited
.navigation a:hover, .navigation a:active
.navigation .active
.smalltext
.largetext
input.textbox
textarea
select
.editor
.editor_control_bar
.autocomplete
.autocomplete_selected
.popup_menu
.popup_menu .popup_item
.popup_menu .popup_item:hover
.trow_reputation_positive
.trow_reputation_negative
.reputation_positive
.reputation_neutral
.reputation_negative
.invalid_field
.valid_field
.validation_error
.validation_success
.validation_loading
img
.clear
.hidden
.float_left
.float_right
.menu ul
.menu li
.menu img
#panel .links
.expcolimage
img.attachment
hr
#copyright
#debug
blockquote
blockquote cite
blockquote cite span
.codeblock
.codeblock .title
.codeblock code
.subforumicon
.separator
form
.popup_menu .popup_item_container
.popup_menu .popup_item
.popup_menu a.popup_item:hover
.autocomplete
.subject_new
.highlight
.pm_alert
.red_alert
.high_warning
.moderate_warning
.low_warning
div.error
div.error p
div.error p em
div.error.ul
.online
.offline
.pagination
.tfoot .pagination, .tcat .pagination
.pagination .pages
.pagination .pagination_current, .pagination a
.pagination a
.pagination .pagination_current
.pagination a:hover
.thread_legend, .thread_legend dd
.thread_legend dd
.thread_legend img
.forum_legend, .forum_legend dt, .forum_legend dd
.forum_legend dd
.forum_legend dt
.success_message
.error_message
.post_body
.post_content
.quick_jump


RE: Tutorial zur Themeerstellung bei 1.4.X - krafdi - 29.10.2008

3.Template-Sets
Hier findet ihr eine komplette Auflistung der Templates. Wenn ihr nach einem bestimmten sucht, empfehle ich im Quelltext des Forums zu schauen, dort bekommt ihr angezeigt um welches es sich handelt, anschließend könnt ihr in dieser Liste suchen ( STRG + F ) wo das Template ist.

Templates können im ACP --> Templates & Style --> Templates --> *Dein Template bearbeitet werden.

Beitrag bearbeiten Templates
editpost
editpost_disablesmilies

Beitrag Templates
post_attachments
post_attachments_attachment
post_attachments_attachment_mod_approve
post_attachments_attachment_mod_unapprove
post_attachments_attachment_postinsert
post_attachments_attachment_unapproved
post_attachments_new
post_captcha
post_captcha_hidden
post_savedraftbutton
post_subscription_method

Benutzer Control-Panel Templates
usercp
usercp_addsubscription_thread
usercp_attachments
usercp_attachments_attachment
usercp_attachments_none
usercp_avatar
usercp_avatar_current
usercp_avatar_gallery
usercp_avatar_gallery_avatar
usercp_changeavatar
usercp_changename
usercp_currentavatar
usercp_drafts
usercp_drafts_draft
usercp_drafts_none
usercp_editlists
usercp_editlists_user
usercp_editsig
usercp_editsig_current
usercp_editsig_preview
usercp_email
usercp_forumsubscriptions
usercp_forumsubscriptions_forum
usercp_forumsubscriptions_none
usercp_nav
usercp_nav_changename
usercp_nav_messenger
usercp_nav_misc
usercp_nav_profile
usercp_notepad
usercp_options
usercp_options_pppselect
usercp_options_stylebit
usercp_options_tppselect
usercp_password
usercp_profile
usercp_profile_away
usercp_profile_customfield
usercp_profile_customtitle
usercp_profile_profilefields
usercp_reputation
usercp_subscriptions
usercp_subscriptions_none
usercp_subscriptions_thread
usercp_usergroups
usercp_usergroups_joinable
usercp_usergroups_joinable_usergroup
usercp_usergroups_joingroup
usercp_usergroups_leader
usercp_usergroups_leader_usergroup
usercp_usergroups_memberof
usercp_usergroups_memberof_usergroup
usercp_warnings
usercp_warnings_warning

Benutzerliste Templates
memberlist
memberlist_search
memberlist_user
memberlist_user_avatar
memberlist_user_groupimage

Bewertung Templates
reputation
reputation_add
reputation_add_error
reputation_added
reputation_addlink
reputation_deleted
reputation_no_votes
reputation_vote

Fehler-Nachricht Templates
error
error_attacherror
error_inline
error_maxpostimages
error_maxsigimages
error_nopermission
error_nopermission_loggedin

Forenanzeige Templates
forumdisplay
forumdisplay_announcement_rating
forumdisplay_announcements
forumdisplay_announcements_announcement
forumdisplay_announcements_announcement_modbit
forumdisplay_inlinemoderation
forumdisplay_inlinemoderation_col
forumdisplay_inlinemoderation_custom
forumdisplay_inlinemoderation_custom_tool
forumdisplay_moderatedby
forumdisplay_moderatedby_moderator
forumdisplay_newthread
forumdisplay_nothreads
forumdisplay_orderarrow
forumdisplay_password
forumdisplay_password_wrongpass
forumdisplay_rssdiscovery
forumdisplay_rules
forumdisplay_rules_link
forumdisplay_searchforum
forumdisplay_sticky_sep
forumdisplay_subforums
forumdisplay_thread
forumdisplay_thread_attachment_count
forumdisplay_thread_gotounread
forumdisplay_thread_modbit
forumdisplay_thread_multipage
forumdisplay_thread_multipage_more
forumdisplay_thread_multipage_page
forumdisplay_thread_rating
forumdisplay_threadlist
forumdisplay_threadlist_clearpass
forumdisplay_threadlist_inlineedit_js
forumdisplay_threadlist_rating
forumdisplay_threadlist_sortrating
forumdisplay_threads_sep
forumdisplay_usersbrowsing
forumdisplay_usersbrowsing_user

Forum Bit Templates
forumbit_depth1_cat
forumbit_depth1_cat_subforum
forumbit_depth1_forum_lastpost
forumbit_depth2_cat
forumbit_depth2_forum
forumbit_depth2_forum_lastpost
forumbit_depth3
forumbit_depth3_statusicon
forumbit_moderators
forumbit_subforums

Global Templates
global_bannedwarning
global_boardclosed_warning
global_pm_alert
global_unreadreports

Gruppen verwalten Templates
managegroup
managegroup_adduser
managegroup_joinrequests
managegroup_joinrequests_request
managegroup_removeusers
managegroup_requestnote
managegroup_user
managegroup_user_checkbox

Kalender Templates
calendar
calendar_addevent
calendar_addeventlink
calendar_addprivateevent
calendar_addpublicevent
calendar_dayview
calendar_dayview_birthdays
calendar_dayview_birthdays_bday
calendar_dayview_event
calendar_dayview_noevents
calendar_editevent
calendar_event
calendar_event_editbutton
calendar_event_modoptions
calendar_eventbit
calendar_eventbit_private
calendar_mini
calendar_mini_weekdayheader
calendar_mini_weekrow
calendar_mini_weekrow_day
calendar_move
calendar_weekdayheader
calendar_weekrow
calendar_weekrow_day
calendar_weekrow_day_external
calendar_weekrow_day_today
calendar_weekview
calendar_weekview_day
calendar_weekview_day_event
calendar_weekview_month

Melden Templates
report
report_error
report_noreason
report_thanks

Mitglieder Templates
member_activate
member_coppa_form
member_emailuser
member_emailuser_guest
member_loggedin_notice
member_login
member_lostpw
member_profile
member_profile_away
member_profile_customfields
member_profile_customfields_field
member_profile_email
member_profile_groupimage
member_profile_modoptions
member_profile_offline
member_profile_online
member_profile_reputation
member_profile_signature
member_profile_warn
member_profile_warninglevel
member_register
member_register_agreement
member_register_agreement_coppa
member_register_coppa
member_register_customfield
member_register_password
member_register_referrer
member_register_regimage
member_register_requiredfields
member_register_stylebit
member_resendactivation
member_resetpassword

Moderation Templates
moderation_allreports_multipage
moderation_deletepoll
moderation_deleteposts
moderation_deleteposts_post
moderation_deletethread
moderation_getip
moderation_getip_modoptions
moderation_inline_deleteposts
moderation_inline_deletethreads
moderation_inline_mergeposts
moderation_inline_movethreads
moderation_inline_splitposts
moderation_merge
moderation_mergeposts
moderation_mergeposts_post
moderation_move
moderation_split
moderation_split_post
moderation_threadnotes
moderation_threadnotes_modaction

Moderatoren Control Panel Templates
modcp
modcp_allreports
modcp_announcements
modcp_announcements_announcement
modcp_announcements_announcement_global
modcp_announcements_delete
modcp_announcements_edit
modcp_announcements_forum
modcp_announcements_forum_nomod
modcp_announcements_global
modcp_announcements_new
modcp_banning
modcp_banning_ban
modcp_banning_nobanned
modcp_banuser
modcp_banuser_addusername
modcp_banuser_editusername
modcp_editprofile
modcp_finduser
modcp_finduser_noresults
modcp_finduser_user
modcp_ipsearch
modcp_ipsearch_noresults
modcp_ipsearch_result
modcp_ipsearch_results
modcp_lastattachment
modcp_lastpost
modcp_lastthread
modcp_modlogs
modcp_modlogs_multipage
modcp_modlogs_noresults
modcp_modlogs_result
modcp_modqueue_attachments
modcp_modqueue_attachments_attachment
modcp_modqueue_attachments_empty
modcp_modqueue_empty
modcp_modqueue_masscontrols
modcp_modqueue_noresults
modcp_modqueue_posts
modcp_modqueue_posts_empty
modcp_modqueue_posts_post
modcp_modqueue_threads
modcp_modqueue_threads_empty
modcp_modqueue_threads_thread
modcp_nav
modcp_no_announcements_forum
modcp_no_announcements_global
modcp_reports
modcp_reports_allnoreports
modcp_reports_allreport
modcp_reports_allreports
modcp_reports_multipage
modcp_reports_noreports
modcp_reports_report
modcp_warninglogs
modcp_warninglogs_nologs
modcp_warninglogs_warning
modcp_warninglogs_warning_revoked

Navigation Templates
nav
nav_bit
nav_bit_active
nav_sep
nav_sep_active

Neue Antworten Templates
newreply
newreply_disablesmilies
newreply_modoptions
newreply_multiquote_external
newreply_threadreview
newreply_threadreview_more
newreply_threadreview_post

Neues Thema Templates
newthread
newthread_disablesmilies
newthread_multiquote_external
newthread_postpoll
PHP Templates
php_warnings

Portal Templates
portal
portal_announcement
portal_announcement_numcomments
portal_announcement_numcomments_no
portal_latestthreads
portal_latestthreads_thread
portal_pms
portal_search
portal_stats
portal_welcome
portal_welcome_guesttext
portal_welcome_membertext
portal_whosonline
portal_whosonline_memberbit

Post Bit Templates
postbit
postbit_attachments
postbit_attachments_attachment
postbit_attachments_attachment_unapproved
postbit_attachments_images
postbit_attachments_images_image
postbit_attachments_thumbnails
postbit_attachments_thumbnails_thumbnail
postbit_author_guest
postbit_author_user
postbit_avatar
postbit_away
postbit_classic
postbit_delete_pm
postbit_edit
postbit_editedby
postbit_email
postbit_find
postbit_forward_pm
postbit_gotopost
postbit_groupimage
postbit_ignored
postbit_inlinecheck
postbit_iplogged_hiden
postbit_iplogged_show
postbit_multiquote
postbit_offline
postbit_online
postbit_pm
postbit_posturl
postbit_quickdelete
postbit_quote
postbit_reply_pm
postbit_replyall_pm
postbit_report
postbit_reputation
postbit_seperator
postbit_signature
postbit_warn
postbit_warninglevel
postbit_www

Private Nachrichten Templates
private
private_archive
private_archive_csv
private_archive_csv_message
private_archive_html
private_archive_html_folderhead
private_archive_html_message
private_archive_txt
private_archive_txt_folderhead
private_archive_txt_message
private_empty
private_empty_folder
private_folders
private_folders_folder
private_folders_folder_unremovable
private_limitwarning
private_messagebit
private_messagebit_denyreceipt
private_messagebit_sep
private_multiple_recipients
private_multiple_recipients_bcc
private_multiple_recipients_user
private_nomessages
private_pmspace
private_read
private_read_action
private_read_bcc
private_read_to
private_send
private_send_autocomplete
private_send_buddyselect
private_tracking
private_tracking_nomessage
private_tracking_readmessage
private_tracking_unreadmessage

Seitenfuß Templates
footer
footer_languageselect

Seitenkopf Templates
header
header_welcomeblock_guest
header_welcomeblock_member
header_welcomeblock_member_admin
header_welcomeblock_member_moderator

Seitenzählung Templates
multipage
multipage_end
multipage_nextpage
multipage_page
multipage_page_current
multipage_prevpage
multipage_start

Smilie Inserter Templates
smilieinsert
smilieinsert_getmore

Springe zu Forum Templates
forumjump_advanced
forumjump_bit
forumjump_special

Startseite Templates
index
index_birthdays
index_birthdays_birthday
index_boardstats
index_loginform
index_logoutlink
index_stats
index_whosonline
index_whosonline_memberbit

Statistiken Templates
stats
stats_thread

Suche Templates
search
search_orderarrow
search_results_inlinemodcol
search_results_posts
search_results_posts_inlinecheck
search_results_posts_inlinemoderation
search_results_posts_inlinemoderation_custom
search_results_posts_inlinemoderation_custom_tool
search_results_posts_nocheck
search_results_posts_post
search_results_threads
search_results_threads_inlinecheck
search_results_threads_inlinemoderation
search_results_threads_inlinemoderation_custom
search_results_threads_inlinemoderation_custom_tool
search_results_threads_nocheck
search_results_threads_thread

Thema drucken Templates
printthread
printthread_post

Umfrage Templates
polls_editpoll
polls_editpoll_option
polls_newpoll
polls_newpoll_option
polls_showresults
polls_showresults_resultbit

Verschiedenes Templates
misc_buddypopup
misc_buddypopup_user_offline
misc_buddypopup_user_online
misc_buddypopup_user_sendpm
misc_help
misc_help_helpdoc
misc_help_section
misc_help_section_bit
misc_imcenter_aim
misc_imcenter_icq
misc_imcenter_msn
misc_imcenter_yahoo
misc_rules_forum
misc_smilies
misc_smilies_popup
misc_smilies_popup_smilie
misc_smilies_smilie
misc_syndication
misc_syndication_feedurl
misc_whoposted
misc_whoposted_poster

Warnsystem Templates
warnings
warnings_active_header
warnings_expired_header
warnings_no_warnings
warnings_view
warnings_view_post
warnings_view_revoke
warnings_view_revoked
warnings_view_user
warnings_warn
warnings_warn_custom



warnings_warn_existing
warnings_warn_pm
warnings_warn_post
warnings_warn_type
warnings_warning

Weiterleitung Templates
redirect

Wer ist online? Templates
online
online_row
online_row_ip
online_today
online_today_row

XMLHTTP Templates
xmlhttp_buddyselect
xmlhttp_buddyselect_offline
xmlhttp_buddyselect_online
xmlhttp_inline_post_editor

Zeige Forum-Team Templates
showteam
showteam_moderators
showteam_moderators_forum
showteam_moderators_mod
showteam_usergroup
showteam_usergroup_user

Zeige Thema Templates
showthread
showthread_classic_header
showthread_inlinemoderation
showthread_inlinemoderation_custom
showthread_inlinemoderation_custom_tool
showthread_moderationoptions
showthread_moderationoptions_custom
showthread_moderationoptions_custom_tool
showthread_multipage
showthread_newreply
showthread_newreply_closed
showthread_newthread
showthread_poll
showthread_poll_option
showthread_poll_option_multiple
showthread_poll_resultbit
showthread_poll_results
showthread_quickreply
showthread_ratethread
showthread_search
showthread_similarthreads
showthread_similarthreads_bit
showthread_threaded_bit
showthread_threaded_bitactive
showthread_threadedbox

Templates ohne Gruppe
announcement
changeuserbox
codebuttons
gobutton
headerinclude
htmldoctype
loginbox
posticons
previewpost
sendthread