The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Valign Sig to Post Bottom PhpBB3

View previous topic View next topic Go down

In progress Valign Sig to Post Bottom PhpBB3

Post by Kyouri on June 2nd 2014, 2:33 pm

Been working on this for 3 days and the closest I've come is inserting the sig area into a table that aligns with #top / #bottom, which, of course, makes the sig take up the area under the postbody.

I've tried using the only code I could find online which did 'okay' but left a margin code showing up on the postbody next to the topic title on reply posts.

I'm beginning to remember one of the major flaws in, and why I stopped using, PhpBB3 years ago. But now that we have template editing enabled, is there a coder out there who has, or can figure this out with Forumtion's template codes? (I've already tried it on my test board with Invision, it was simple template editing and it works like a charm.)

Thank you.

http://anime-dohyou.phpbb9.com

Kyouri
Forumember

Female Posts : 165
Reputation : 0
Language : English

http://anime-dohyou.phpbb9.com

Back to top Go down

In progress Re: Valign Sig to Post Bottom PhpBB3

Post by Jophy on June 3rd 2014, 9:43 am

Hello,

Can you provide us a screenshot of the problem? Thanks.

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

In progress Re: Valign Sig to Post Bottom PhpBB3

Post by Kyouri on June 3rd 2014, 12:00 pm

I've since removed the code that was leaving a trace of the code itself showing up on the boards, but here's what we all have on PhpBB3 and where I'd like to move it, as seen on PunBB and Invision (with a simple moving of the sig code in the viewtopic_body template).



Thanks for the attention to this, Jophy. Hopefully someone can figure it out, since I know I'm not the only one that prefers a bottom-aligned sig.

*Edit:

Here's the code I found on the net, without the obvious tweaks to match the exact coding phrases in our Forumotion templates:
Spoiler:

Open styles/prosilver/theme/content.css
Find:
Code:
.signature {

Add after:
Code:
height: 60px;

Open styles/prosilver/template/viewtopic_body.html
Find:
Code:
<div class="postbody">

Replace with:
Code:
<div class="postbody"<!-- IF postrow.SIGNATURE --> style="margin-bottom:80px;"<!-- ENDIF -->>

Find and delete:
Code:
<!-- IF postrow.SIGNATURE --><div id="sig{postrow.POST_ID}" class="signature">{postrow.SIGNATURE}</div><!-- ENDIF -->

Find:
Code:
<div class="back2top"><a href="#wrap" class="top" title="{L_BACK_TO_TOP}">{L_BACK_TO_TOP}</a></div>

Add after:
Code:
<!-- IF postrow.SIGNATURE --><div class="postbody" style="margin-top:-80px;"><div id="sig{postrow.POST_ID}" class="signature">{postrow.SIGNATURE}</div></div><!-- ENDIF -->

Kyouri
Forumember

Female Posts : 165
Reputation : 0
Language : English

http://anime-dohyou.phpbb9.com

Back to top Go down

In progress Re: Valign Sig to Post Bottom PhpBB3

Post by @Mark on June 3rd 2014, 3:16 pm

You want to move the signature section at the bottom part?

Try this one, add this on your CSS:
Code:
.signature_div {
margin: 130px 0px -180px 0 !important;
}

@Mark
Forumember

Male Posts : 187
Reputation : 37
Language : HTML | CSS | Javascript | C | Java
Location : Republic of the Philippines

http://help.forumotion.com/

Back to top Go down

In progress Re: Valign Sig to Post Bottom PhpBB3

Post by Kyouri on June 3rd 2014, 7:03 pm

@@Mark wrote:You want to move the signature section at the bottom part?

Try this one, add this on your CSS:
Code:
.signature_div {
margin: 130px 0px -180px 0 !important;
}

Thanks, @Mark. I tried something like that already, and while it does move the sig down somewhat, it doesn't lock it to the bottom of the postbody. On really short posts/comments, the sig still isn't anchored, it hovers somewhere near the middle, just 130px lower than the message. :/

P.S. I even tried making it a margin-bottom 0 !important, and still nothing.

I really believe this is something that needs some template editing.

Kyouri
Forumember

Female Posts : 165
Reputation : 0
Language : English

http://anime-dohyou.phpbb9.com

Back to top Go down

In progress Re: Valign Sig to Post Bottom PhpBB3

Post by Jophy on June 4th 2014, 5:56 am

Hello,

Let's try this, go to your tempates:
General > viewtopic_body:

Find:

Code:
<div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>

Replace it with:

Code:
<span class="spacing"><div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div></span>

Then add this to your CSS:

Code:
.spacing {
 line-height: 125px;
}

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

In progress Re: Valign Sig to Post Bottom PhpBB3

Post by Kyouri on June 4th 2014, 1:29 pm

Before I adjusted the code/CSS I made sure the .signature_div was set to a background color so we could better see the whole placement issue.

After entering your suggested tweaks, this is what we ended up with:
Spoiler:


And those that have spoilers, or more than one sig in their sig area, the line-height causes their sigs/spoiler to also separate by the posted line-height.

Do you think it could have anything to do with this portion of the template code:
Code:
id="sig{postrow.displayed.U_POST_ID}"

Also, I noticed (as shown in pic) that the 'page up/down' area increased in height.

Thanks, Jophy, for helping with this. And no matter what, I'm not going to give up on it. 'When there's a will, there's a way.'

*EDIT 1:

For reference:

Here's the default (sig area) viewtopic_body from Invision:
Spoiler:

Code:
                  <!-- END switch_post_attachments -->
               </dd>
            </dl>
            <!-- END switch_attachments -->
            <div class="clear"></div>
            {postrow.displayed.EDITED_MESSAGE}
         </div>


         <!-- BEGIN switch_signature -->
         <br />
         <div id="sig{postrow.displayed.U_POST_ID}" class="signature_div">{postrow.displayed.SIGNATURE_NEW}</div>
         <!-- END switch_signature -->

      </div>

   </div>

      <div class="post-footer clearfix"{postrow.displayed.THANK_BGCOLOR}>
         <ul class="misc-icons">

All I needed to do was move the sig id down one /div tag to get the sig to align at the bottom:
Code:
                  <!-- END switch_post_attachments -->
               </dd>
            </dl>
            <!-- END switch_attachments -->
            <div class="clear"></div>
            {postrow.displayed.EDITED_MESSAGE}
         </div>

      </div>
                  <!-- BEGIN switch_signature -->
<div id="sig{postrow.displayed.U_POST_ID}" class="signature_div" align="center" style="padding-bottom: 10px;">{postrow.displayed.SIGNATURE_NEW}</div>
         <!-- END switch_signature -->
   </div>

      <div class="post-footer clearfix"{postrow.displayed.THANK_BGCOLOR}>
         <ul class="misc-icons">
I was hoping it would be just as simple with PhpBB3.

*EDIT 2:

I can already hear the negativity, but I altered the PhpBB3 viewtopic_body template to exactly match that of the Invision viewtopic_body template. After only a few CSS additions, it actually lined out perfectly, with the exception of the blog page (no biggie, turned it into a forum).

The only issue with doing that, while the sig is aligned at the bottom, is that the profilepopmenu doesn't actually open.

Realizing it was a javascript issue, I took the following part out of http://illiweb.com/rs4/54/frm/invision.js:
Spoiler:

Code:
function initProfilePopUps(){if(window.jQuery){divs=$('div.postprofile-head, div.post-header');$.each(divs,function(key,htmlElement){if(htmlElement.style){htmlElement.style.position='relative'}})}else{divs=getElementsByClassName('postprofile-head post-header','div');for(var i=0;i<divs.length;i++){if(divs[i].style){divs[i].style.position='relative'}}}}var openedPopUp=false;initSetFunction(initProfilePopUps);
Placed the code into a js page under modules, and it's not working. Placing anything remotely like that in the overall_header pretty much deletes the entire forum, with the exception of the header and footer. Also tried various locations in the viewtopic_body for the js link I made:
Code:
<script src="http://anime-dohyou.phpbb9.com/12827.js" type="text/javascript">
And while I found the right spot that doesn't delete anything on the topic page, the menu still doesn't open.

Is the above code correct?
Does anyone believe there's a way to get the profilepopmenu to work on PhpBB3 at all?

(added spoilers as this post is getting long)

Kyouri
Forumember

Female Posts : 165
Reputation : 0
Language : English

http://anime-dohyou.phpbb9.com

Back to top Go down

In progress Re: Valign Sig to Post Bottom PhpBB3

Post by Kyouri on June 5th 2014, 1:41 pm

This doesn't exactly cure the issue as mentioned in the op, but this is what I was able to accomplish by utilizing the Invision viewtopic_body template and editing both the sig placement in the template and the CSS:


Would still like to be able to manage reworking the PhpBB3 template in a manner that allows for bottom-aligned (anchored) sig placement.

P.S. Many thanks to Forumotion for finally allowing template modification in PhpBB3 and Invision.

Kyouri
Forumember

Female Posts : 165
Reputation : 0
Language : English

http://anime-dohyou.phpbb9.com

Back to top Go down

In progress Re: Valign Sig to Post Bottom PhpBB3

Post by Kyouri on June 6th 2014, 3:14 pm

bump

Kyouri
Forumember

Female Posts : 165
Reputation : 0
Language : English

http://anime-dohyou.phpbb9.com

Back to top Go down

In progress Re: Valign Sig to Post Bottom PhpBB3

Post by Kyouri on June 12th 2014, 1:10 am

bump

Kyouri
Forumember

Female Posts : 165
Reputation : 0
Language : English

http://anime-dohyou.phpbb9.com

Back to top Go down

In progress Re: Valign Sig to Post Bottom PhpBB3

Post by Jophy on June 12th 2014, 6:13 pm

Try this, go to your templates:

General > viewtopic_body:

Find:

Code:
<div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>

Copy that code and remove it, then paste it below this code:

Code:
<p class="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a></p>

Save and publish  Add

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum