Post by Brian on Jan 14, 2013 16:39:59 GMT -8
Hey guys. 
There have been several requests over the course of the previous two months to provide options to allow customization of colors and elements in the post editors (pages following the Create Thread or Reply buttons when in a thread/board/PM). These have finally been added, but may not appear or work on older themes from before the update, so I'm going to post this quick guide to allow you to add them to your existing theme without having to reset the entire theme's CSS.
1. In your admin area, go to Themes > Colors & Styles. Check to see if the Editors section is in your list. If you do not have an Editors section, proceed to step 2. If you do have an Editors section but it doesn't change the colors on the Reply or Create Thread pages, skip to step 3.
2. To add the Editors section into your Colors & Styles page, navigate to the Style Sheet tab (directly under the Current Theme dropdown). Select the clicking here link in the sentence "If you would like to reset the structure of your Visual Editor, you can do so by clicking here."
3. Navigate to the Style Sheet tab (directly under the Current Theme dropdown). Scroll down through your style sheet until you find a commented line that says Browser Hacks. If the following code isn't directly above it, add it in.
Now save your Style Sheet and navigate back to the Visual Editor tab. Click on the Editors section to expand it. In your Preview Pane on the right, navigate through your board until you reach the Create Thread page.
Start changing colors and styles in the Editors section. If they change in the Preview Pane, you have successfully implemented the Editors section into your Colors & Styles page.
If you skipped step 2 and your Editors section still isn't working, try doing step 2 as the variables may not be in use by the editor.
For those who try to make the changes in the guide above by Brian but still get the error when saving changes, do the following and this should take care of it:
In the admin panel, visit the Themes > Colors & Styles page. Once there, click the "Style Sheet" tab. Add the lines from his guide to your CSS like before. Once those are added, rather than clicking the "Save" button, use CTRL + A to highlight all of the CSS from your skin and then use CTRL + C on your keyboard to copy the CSS.
Once the CSS is copied, click the "Create New / Import Theme" button found next to the "Save Theme" button at the top of the page and create a new theme with the default settings. Once the new theme is created, visit the Colors & Styles page for the new theme, then remove all of the CSS listed on the page, then use CTRL + V to paste in the CSS from your previous theme to your new theme. Once this is done, you should be able to save the changes, and the new theme should look the same as the old
There have been several requests over the course of the previous two months to provide options to allow customization of colors and elements in the post editors (pages following the Create Thread or Reply buttons when in a thread/board/PM). These have finally been added, but may not appear or work on older themes from before the update, so I'm going to post this quick guide to allow you to add them to your existing theme without having to reset the entire theme's CSS.
1. In your admin area, go to Themes > Colors & Styles. Check to see if the Editors section is in your list. If you do not have an Editors section, proceed to step 2. If you do have an Editors section but it doesn't change the colors on the Reply or Create Thread pages, skip to step 3.
 The Editors section is in the red. If this doesn't show in your Visual Editor, follow the next step. |
2. To add the Editors section into your Colors & Styles page, navigate to the Style Sheet tab (directly under the Current Theme dropdown). Select the clicking here link in the sentence "If you would like to reset the structure of your Visual Editor, you can do so by clicking here."
 Don't have an Editors section? Click the link in red! |
3. Navigate to the Style Sheet tab (directly under the Current Theme dropdown). Scroll down through your style sheet until you find a commented line that says Browser Hacks. If the following code isn't directly above it, add it in.
 Does the code in red exist in your Style Sheet? If not, add it in. | /* Editing Area */ .ui-wysiwyg .editors { border-width: 1px; border-style: solid; border-color: @container_inner_border_color; } .wysiwyg-tabs li { float: left; position: relative; bottom: 1px; margin: 1px 2px 0 0; list-style: none; background: @tabs_unselected_background; border: 1px solid @container_inner_border_color; border-top-width: 0px; .rounded-corners(0, 0, 5px, 5px); } .wysiwyg-tabs li:hover { background: @tabs_hover_background; border: @tabs_hover_border; } .wysiwyg-tabs li a { color: @tabs_unselected_text_color; font: @tabs_unselected_text_font; text-decoration: @tabs_unselected_text_decoration; float: left; padding: 5px 15px; text-decoration: none; } .wysiwyg-tabs li.ui-active { background-color: @posts_odd_background_color; background-image: @posts_odd_background_image; background-attachment: @posts_odd_background_attachment; background-repeat: @posts_odd_background_repeat; background-position: @posts_odd_background_position; border: @tabs_selected_border; margin-top: 0px; padding-top: 1px; } .wysiwyg-tabs li.ui-active a { color: @tabs_selected_text_color; font: @tabs_selected_text_font; text-decoration: @tabs_selected_text_decoration; } .wysiwyg-smiley-menu .state-disabled { display: none; } /* BBCode Editor */ @bbcode_editor_background_color: @posts_odd_background_color; @bbcode_editor_text_color: @posts_odd_text_color; @bbcode_editor_text_font_family: @empty; .ui-wysiwyg .editors .bbcode-editor textarea { color: @bbcode_editor_text_color; font-family: @bbcode_editor_text_font_family; background-color: @bbcode_editor_background_color; } /* Visual Editor */ @ve_posts_odd_text_color: @posts_odd_text_color; @ve_posts_odd_background_color: @posts_odd_background_color; @ve_posts_odd_background_image: @posts_odd_background_image; @ve_posts_odd_background_attachment: @posts_odd_background_attachment; @ve_posts_odd_background_repeat: @posts_odd_background_repeat; @ve_posts_odd_background_position: @posts_odd_background_position; @ve_default_forum_text_font_style: @default_forum_text_font_style; @ve_default_forum_text_font_weight: @default_forum_text_font_weight; @ve_default_forum_text_font_size: @default_forum_text_font_size; @ve_default_forum_text_font_family: @default_forum_text_font_family; @ve_quotes_background: @quotes_background; @ve_quotes_border: @quotes_border; @ve_quotes_border_radius: @quotes_border_radius; @ve_quotes_sub_background: @quotes_sub_background; @ve_quotes_sub_border: @quotes_sub_border; @ve_quotes_sub_border_radius: @quotes_sub_border_radius; @ve_posts_code_background: @posts_code_background; @ve_posts_code_border: @posts_code_border; @ve_posts_code_text_color: @posts_code_text_color; @ve_posts_code_text_font: @posts_code_text_font; |
Now save your Style Sheet and navigate back to the Visual Editor tab. Click on the Editors section to expand it. In your Preview Pane on the right, navigate through your board until you reach the Create Thread page.
Start changing colors and styles in the Editors section. If they change in the Preview Pane, you have successfully implemented the Editors section into your Colors & Styles page.
If you skipped step 2 and your Editors section still isn't working, try doing step 2 as the variables may not be in use by the editor.
In the admin panel, visit the Themes > Colors & Styles page. Once there, click the "Style Sheet" tab. Add the lines from his guide to your CSS like before. Once those are added, rather than clicking the "Save" button, use CTRL + A to highlight all of the CSS from your skin and then use CTRL + C on your keyboard to copy the CSS.
Once the CSS is copied, click the "Create New / Import Theme" button found next to the "Save Theme" button at the top of the page and create a new theme with the default settings. Once the new theme is created, visit the Colors & Styles page for the new theme, then remove all of the CSS listed on the page, then use CTRL + V to paste in the CSS from your previous theme to your new theme. Once this is done, you should be able to save the changes, and the new theme should look the same as the old
