Move the Create Post button from the right side to the left?

[svperstar]

EDIT: my forum slackercentral.freeforums.net/

Not sure if this would be done with a Header/Footer or not.

Basically the Create Post button is on the right and I would like it on the left under the preview button:


Would I do this with Header/Footer or no?

[Tumbleweed]

Oct 18, 2016 8:02:07 GMT -8 svperstar said:

EDIT: my forum slackercentral.freeforums.net/

Not sure if this would be done with a Header/Footer or not.

Basically the Create Post button is on the right and I would like it on the left under the preview button:


Would I do this with Header/Footer or no?

The only way I could get it over there was using positioning as I couldn't over-ride the default float right  with float: left!important;


If your forum width was the same on all your different themes, you could use it in your global headers but I'd recommend you just add this at the bottom of each themes style sheet (Admin>Themes>Advanced Styles & CSS>Style Sheet>) so you can adjust it (the 900px) to sit exactly where you want it to on each theme:


/* move the create post to the left */
.wysiwyg-area .content>form>div input{
position:relative;right:900px;}

[svperstar]

Oct 18, 2016 17:35:53 GMT -8 Tumbleweed said:

Oct 18, 2016 8:02:07 GMT -8 svperstar said:

EDIT: my forum slackercentral.freeforums.net/

Not sure if this would be done with a Header/Footer or not.

Basically the Create Post button is on the right and I would like it on the left under the preview button:


Would I do this with Header/Footer or no?

The only way I could get it over there was using positioning as I couldn't over-ride the default float right  with float: left!important;


If your forum width was the same on all your different themes, you could use it in your global headers but I'd recommend you just add this at the bottom of each themes style sheet (Admin>Themes>Advanced Styles & CSS>Style Sheet>) so you can adjust it (the 900px) to sit exactly where you want it to on each theme:


/* move the create post to the left */
.wysiwyg-area .content>form>div input{
position:relative;right:900px;}

Thank you for the reply but now the button is overlapping "The thread in which you are posting has no effects applied to it" text and I don't see where that text is defined in the CSS:

[Tumbleweed]

svperstar ,

I see you started a new thread. In the future please stick to one thread.  If what Kami suggested doesn't do all you wanted, you can add top to that css I gave you to move it up.


/* move the create post to the left */
.wysiwyg-area .content>form>div input{
position:relative;top:-18px;right:900px;}

[svperstar]

Thanks it looks like her solution and yours work ok but now it introduces the issue of messing up the Reason for Editing box if you edit a post.

Bleh its really complicated to move a button hehe

[Tumbleweed]

Oct 19, 2016 21:22:27 GMT -8 svperstar said:

Thanks it looks like her solution and yours work ok but now it introduces the issue of messing up the Reason for Editing box if you edit a post.

Bleh its really complicated to move a button hehe

Yep, sometimes it takes some finagling. Try removing Kami's code and then add the blue:


/* move the create post to the left */
.wysiwyg-area .content>form>div input{
position:relative;top:-45px;right:900px;
}
.wysiwyg-area .content>form>div{
margin-top:36px;
}

What that is doing is putting some space above the "The thread in which you are posting has no effects applied to it" so the "create post" fits.

You'll have to adjust things so it looks right to you with both the bolded parts.

[svperstar]

I tried your code and I get what its doing but the problem is the Reason for Editing box and post buttons appear to be connected and I cannot move one without moving the other. The Reason for Editing window goes completely off the left side of the screen to matter what I do as long as the submit button is on the left

[Tumbleweed]

Oct 20, 2016 10:22:20 GMT -8 svperstar said:

I tried your code and I get what its doing but the problem is the Reason for Editing box and post buttons appear to be connected and I cannot move one without moving the other. The Reason for Editing window goes completely off the left side of the screen to matter what I do as long as the submit button is on the left

I see what you mean. I'll try to see if I can find a solution before days end. 

[svperstar]

Oct 20, 2016 14:10:18 GMT -8 Tumbleweed said:

Oct 20, 2016 10:22:20 GMT -8 svperstar said:

I tried your code and I get what its doing but the problem is the Reason for Editing box and post buttons appear to be connected and I cannot move one without moving the other. The Reason for Editing window goes completely off the left side of the screen to matter what I do as long as the submit button is on the left

I see what you mean. I'll try to see if I can find a solution before days end. 

Well I mean if it requires rewriting the entire proboards code I guess its not that big of a deal. I just think the post button being on the right looks wrong lol

[Tumbleweed]

Oct 20, 2016 22:09:08 GMT -8 svperstar said:

Oct 20, 2016 14:10:18 GMT -8 Tumbleweed said:

I see what you mean. I'll try to see if I can find a solution before days end. 

Well I mean if it requires rewriting the entire proboards code I guess its not that big of a deal. I just think the post button being on the right looks wrong lol

No, it isn't a big deal. I just couldn't find it in the templates but should have looked harder. Now this is easy. Get rid of all the css except the last one I gave you. So the only css you need is this and I have the margin-top set to 4px. (You definitely won't need the 36 I have in there)

.wysiwyg-area .content>form>div{
margin-top:36px;
}

Now head to your Posting Page Template: (Admin Home> Themes> Layout Templates> and make sure you are on the Posting Page tab. Go to line 62 and remove this line:
<span class="float-right">$[form.post.button]</span>

Now we are going to recreate it with a new id so if you want to tweak it you can.
Scroll back up to right around line 58 and right above the {if $[posting_errors]} paste what I have in blue, like I did below.

<div id="moving_post_button">$[form.post.button]</div>
{if $[posting_errors]}

That should put it right below the preview. If you want to tweak the position a tiny bit you can just add this to your style sheet:

#moving_post_button{margin-left:6px;
}

I think I checked everything and on my site, the edit is fine, the post button works fine. My apologies for making you jump through hoops here. I swear I could not find that post button in the templates before and had it in my head that maybe because it is part of a form it was on ProBoards end, but today I knew it had to be somewhere and looked again. I feel stupid now. lol

[svperstar]

I just tried that and it looks like it works great thanks!

[Tumbleweed]

Glad to hear it. Have fun with your site.