Put Preview and BBCode buttons above

[Former Member]

Hi, is there a good way to put the preview and BBCode buttons in the posting page above the input text area where you type in the post's content? I tried using css top and bottom to move it up, however when I resize the text area, the Preview and BBcode buttons go down with it. Can someone provide me with a template which I can use to move it up normally?

[Former Member]

Jul 4, 2019 17:05:31 GMT -8 @smithj said:

Hi, is there a good way to put the preview and BBCode buttons in the posting page above the input text area where you type in the post's content? I tried using css top and bottom to move it up, however when I resize the text area, the Preview and BBcode buttons go down with it. Can someone provide me with a template which I can use to move it up normally?

bump Todge Chris

[Chris]

Those tabs cannot be edited/repositioned through the templating system since it is basically all one glob of HTML output by the $[form.message.input] variable

SPOILER: Click to show

<input type="hidden" id="form_ao5dmL6R_message_mode_input" name="message_mode" value="visual" /> <input type="hidden" id="form_ao5dmL6R_message_nosmiles_input" name="message_nosmiles" /> <noscript><input type="hidden" id="form_ao5dmL6R_message_nojavascript_input" name="message_nojavascript" value="1" /></noscript> <textarea id="form_ao5dmL6R_message_input" name="message" tabindex="3" class="wysiwyg-textarea"></textarea> <script> proboards.data('css_wysiwyg_style', '<link rel=\"stylesheet\" type=\"text/css\" href=\"//storage.proboards.com/3090093/css/LYXhWIOYTswNFKOZAnWJ.css\" id=\"wysiwyg_style\" />'); proboards.data('css_wysiwyg_non_editable', '<link rel=\"stylesheet\" type=\"text/css\" href=\"//storage.proboards.com/forum/css/0/wysiwyg_non_editable_913.css\" />'); var wysiwyg_buttons = {"italic-active":"//storage.proboards.com/forum/images/bbcode/italic-active.png","justifyLeft":"//storage.proboards.com/forum/images/bbcode/justify-left.png","underline-active":"//storage.proboards.com/forum/images/bbcode/underline-active.png","italic":"//storage.proboards.com/forum/images/bbcode/italic.png","insertList":"//storage.proboards.com/forum/images/bbcode/list.png","subscript":"//storage.proboards.com/forum/images/bbcode/subscript.png","subscript-active":"//storage.proboards.com/forum/images/bbcode/subscript-active.png","insertCode":"//storage.proboards.com/forum/images/bbcode/code.png","social":"//storage.proboards.com/forum/images/bbcode/embed.png","html":null,"formatBlock":null,"selectAll":null,"justifyRight":"//storage.proboards.com/forum/images/bbcode/justify-right.png","align":null,"insertHorizontalRule":"//storage.proboards.com/forum/images/bbcode/horizontal-rule.png","indent":null,"redo":null,"outdent":null,"spoiler":null,"foreColor":"//storage.proboards.com/forum/images/bbcode/color.png","underline":"//storage.proboards.com/forum/images/bbcode/underline.png","save":null,"fontSize":null,"bbcode":null,"bold":"//storage.proboards.com/forum/images/bbcode/bold.png","justifyRight-active":"//storage.proboards.com/forum/images/bbcode/justify-right-active.png","superscript":"//storage.proboards.com/forum/images/bbcode/superscript.png","justifyCenter-active":"//storage.proboards.com/forum/images/bbcode/justify-center-active.png","insertSmiley":"//storage.proboards.com/forum/images/bbcode/smiley.png","fontFamily":null,"strikethrough-active":"//storage.proboards.com/forum/images/bbcode/strikethrough-active.png","justifyLeft-active":"//storage.proboards.com/forum/images/bbcode/justify-left-active.png","strikethrough":"//storage.proboards.com/forum/images/bbcode/strikethrough.png","justifyFull":"//storage.proboards.com/forum/images/bbcode/justify-full.png","createEmail":"//storage.proboards.com/forum/images/bbcode/email.png","insertEmbed":"//storage.proboards.com/forum/images/bbcode/embed.png","justifyFull-active":"//storage.proboards.com/forum/images/bbcode/justify-full-active.png","justifyCenter":"//storage.proboards.com/forum/images/bbcode/justify-center.png","insertUserLink":"//storage.proboards.com/forum/images/bbcode/membersearch.png","bold-active":"//storage.proboards.com/forum/images/bbcode/bold-active.png","smiles":"//storage.proboards.com/forum/images/bbcode/smiley.png","removeFormat":"//storage.proboards.com/forum/images/bbcode/remove-format.png","color":"//storage.proboards.com/forum/images/bbcode/color.png","superscript-active":"//storage.proboards.com/forum/images/bbcode/superscript-active.png","insertUnorderedList":"//storage.proboards.com/forum/images/bbcode/list.png","insertQuote":"//storage.proboards.com/forum/images/bbcode/quote.png","fullscreen":null,"insertVideo":"//storage.proboards.com/forum/images/bbcode/movie.png","table":"//storage.proboards.com/forum/images/bbcode/table.png","insertTable":"//storage.proboards.com/forum/images/bbcode/table.png","createLink":"//storage.proboards.com/forum/images/bbcode/link.png","undo":null,"quote":"//storage.proboards.com/forum/images/bbcode/quote.png","code":"//storage.proboards.com/forum/images/bbcode/code.png","insertImage":"//storage.proboards.com/forum/images/bbcode/image.png","blockquote":null}; $(document).ready(function() { $('#form_ao5dmL6R_message_input') .wysiwyg({ varName : 'message', formId : 'form_ao5dmL6R', defaultEditor : 'visual', defaultFormat : 'bbcode', smiles : [":)","//storage.proboards.com/forum/images/smiley/smiley.png",":P","//storage.proboards.com/forum/images/smiley/tongue.png",":|","//storage.proboards.com/forum/images/smiley/plain.png",":'(","//storage.proboards.com/forum/images/smiley/cry.png",">:(","//storage.proboards.com/forum/images/smiley/angry.png",":D","//storage.proboards.com/forum/images/smiley/grin.png",":(","//storage.proboards.com/forum/images/smiley/sad.png","::)","//storage.proboards.com/forum/images/smiley/eyesroll.png",";)","//storage.proboards.com/forum/images/smiley/wink.png","8-)","//storage.proboards.com/forum/images/smiley/cool.png",";-|","//storage.proboards.com/forum/images/smiley/squint.png","???","//storage.proboards.com/forum/images/smiley/huh.png",":o","//storage.proboards.com/forum/images/smiley/shocked.png","(rofl)","//storage.proboards.com/forum/images/smiley/rofl.png","x_x","//storage.proboards.com/forum/images/smiley/dead.png","8D","//storage.proboards.com/forum/images/smiley/insane.png","(puke)","//storage.proboards.com/forum/images/smiley/sick.png",":))","//storage.proboards.com/forum/images/smiley/cheesy.png","O_o","//storage.proboards.com/forum/images/smiley/browraise.png",">:D","//storage.proboards.com/forum/images/smiley/superangry.png",":-X","//storage.proboards.com/forum/images/smiley/lipssealed.png",":-*","//storage.proboards.com/forum/images/smiley/kiss.png","8-|","//storage.proboards.com/forum/images/smiley/nerd.png","B-|","//storage.proboards.com/forum/images/smiley/notamused.png",":-/","//storage.proboards.com/forum/images/smiley/undecided.png","(zzz)","//storage.proboards.com/forum/images/smiley/asleep.png",":-[","//storage.proboards.com/forum/images/smiley/embarrassed.png",":-S","//storage.proboards.com/forum/images/smiley/wavey.png","P-)","//storage.proboards.com/forum/images/smiley/pirate.png","(:))","//storage.proboards.com/forum/images/smiley/ninja.png"], visualHtml : proboards.data('visualHtml') }); $('body').on('click', '.user-link', function(e) { if(e.altKey) { e.preventDefault(); $('#form_ao5dmL6R_message_input').wysiwyg('overwriteSelection', $(this).attr('title')); } }); }); </script> <ul class="wysiwyg-tabs"><li class="ui-active" id="menu-item-visual"> <a onclick="javascript: if(!$('#menu-item-visual').hasClass('ui-active')) { $('#form_ao5dmL6R_message_input').wysiwyg('switchEditor', 'visual'); $('.wysiwyg-tabs li').removeClass('ui-active'); $('#menu-item-visual').addClass('ui-active'); } return false;" href="javascript:void(0);">Preview</a> </li><li id="menu-item-bbcode"> <a onclick="javascript: if(!$('#menu-item-bbcode').hasClass('ui-active')) { $('#form_ao5dmL6R_message_input').wysiwyg('switchEditor', 'bbcode'); $('.wysiwyg-tabs li').removeClass('ui-active'); $('#menu-item-bbcode').addClass('ui-active'); } return false;" href="javascript:void(0);">BBCode</a> </li></ul><noscript><style>.wysiwyg-tabs { display: none; }</style></noscript>

I recall accomplishing it through javascript a few years ago but did not like the look so abandoned it. Something like this in global header should get it moved for you but you would need to figure the CSS rules to reorient it for topside operation

<script>
$(document).on('wysiwygcreate', function(){$('.wysiwyg-tabs').prependTo('.ui-wysiwyg');});</script>