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.

Edit buttons: new mobile version

View previous topic View next topic Go down

Solved Edit buttons: new mobile version

Post by troyeccles on October 5th 2016, 8:09 am

Hi.

The latest mobile version is a huge improvement over v1. Well done all.

I can see the new editing buttons (EDIT and DELETE) but it's also picking up my QUOTE button. This is a good thing but it's in the same style as my classic-version - see below screen-shot.

How do we edit the appearance of the mobile edit buttons so they're all a similar style (can we design our own and add those??)



Last edited by troyeccles on October 26th 2016, 10:05 pm; edited 2 times in total

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Edit buttons: new mobile version

Post by troyeccles on October 18th 2016, 8:50 am

Bump

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Edit buttons: new mobile version

Post by vietkanpy on October 18th 2016, 9:58 am

Code:

<style>
  /* css fix button quote mobile forumotion ww.hotrofm.net */
a[href*="mode=quote"] img {
    display: none;
}
a[href*="mode=quote"]:after {
    content: "❝";
    font-size: 45px;
    line-height: 45px;
}</style>


copy to paste viewtopic_body in Mobile version

vietkanpy
Forumember

Male Posts : 38
Reputation : 14
Language : vietnam

http://www.hotrofm.net/

Back to top Go down

Solved Re: Edit buttons: new mobile version

Post by troyeccles on October 18th 2016, 10:08 am

I'll let you know how that pans out.

Thank you!

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Edit buttons: new mobile version

Post by troyeccles on October 20th 2016, 6:18 am

[EDIT: It didn't work after all. See next post]

Had to downsize the font a little but that worked a treat.

Thank you!!!!



Last edited by troyeccles on October 20th 2016, 6:44 am; edited 1 time in total

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Edit buttons: new mobile version

Post by troyeccles on October 20th 2016, 6:39 am

Scratch that!

I was having issues with my modified viewtopic_body template so I've set it back to the default version and your additional code doesn't work in that.

?????

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Edit buttons: new mobile version

Post by troyeccles on October 20th 2016, 6:41 am

Complete viewtopic_body code is here (your addition is at the bottom)...


Code:
<script type="text/javascript">
//<![CDATA[
var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
       
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
            {
                if( $(this).is(":visible") )
                {
                    $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
                }
                else
                {
                    $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
                }
            });
        }
    }
    catch(e) { }
   
    return false;
};

//]]>
</script>

<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
{POLL_DISPLAY}

<!-- BEGIN postrow -->
<div id="{postrow.U_POST_ID}" class="topic">
    <!-- BEGIN hidden -->
        <div class="post {postrow.hidden.ROW_CLASS}" style="{postrow.displayed.DISPLAYABLE_STATE}">
            <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
        </div>
    <!-- END hidden -->
    <!-- BEGIN displayed -->
        <div id="p{postrow.displayed.U_POST_ID}" class="post-section {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}">
            <div class="post-head">
                <div class="post-icon"><i class="material-icons">person</i>{postrow.displayed.POSTER_AVATAR}</div>
                            <div class="post-info">
                                <h2>{postrow.displayed.POST_DATE_NEW}</h2>
                    <div class="post-details">{L_TOPIC_BY} {postrow.displayed.POSTER_NAME}</div>
                                </div>
            </div>
            <div class="post-content">
                {postrow.displayed.MESSAGE}
                        <!-- BEGIN switch_attachments -->
                        <div class="attachbox">
                            <p class="title">{postrow.displayed.switch_attachments.L_ATTACHMENTS}</p>
                            <dl class="attachments">
                                <!-- BEGIN switch_post_attachments -->
                                    <dt>
                                        <!-- BEGIN switch_dl_att -->
                                        <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                        <!-- END switch_dl_att -->
                                        <!-- BEGIN switch_no_dl_att -->
                                        {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                        <!-- END switch_no_dl_att -->
                                    </dt>
                                    <dd>
                                        <!-- BEGIN switch_no_comment -->
                                        <p>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</p>
                                        <!-- END switch_no_comment -->
                                        <!-- BEGIN switch_no_dl_att -->
                                        <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
                                        <!-- END switch_no_dl_att -->
                    <p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p>
                </dd>
                        <!-- END switch_post_attachments -->
                            </dl>
                        </div>
                        <!-- END switch_attachments -->
            </div>
            {postrow.displayed.EDITED_MESSAGE}
            <ul class="post-buttons">
                <li>{postrow.displayed.EDIT_IMG}</li>
                <li>{postrow.displayed.DELETE_IMG}</li>
                    </ul>
        </div>
        <!-- BEGIN first_post_br -->
        <hr id="first-post-br" />
        <!-- END first_post_br -->
    <!-- END displayed -->
</div>
<!-- END postrow -->
<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
{INLINE_MESSAGE}
{QUICK_REPLY_FORM}

<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="btn-floating">
    <i class="material-icons"></i>
</a>
<!-- END switch_user_authreply -->

 
 
<style>
  /* css fix button quote mobile forumotion ww.hotrofm.net */
a[href*="mode=quote"] img {
    display: none;
}
a[href*="mode=quote"]:after {
    content: "❝";
    font-size: 45px;
    line-height: 45px;
}</style>

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Edit buttons: new mobile version

Post by vietkanpy on October 20th 2016, 8:29 am

Solved.????????????? you want??

vietkanpy
Forumember

Male Posts : 38
Reputation : 14
Language : vietnam

http://www.hotrofm.net/

Back to top Go down

Solved Re: Edit buttons: new mobile version

Post by troyeccles on October 20th 2016, 8:58 am

Hi again. I thought it was solved. It's not.

I had a modified template and your solution worked in that. But that modified template has other issues so I reverted to the default template and put your code in.

Sadly, your code didn't work in the default template. I tried a few times. No good. The QUOTE icon simply doesn't appear.

Any ideas? (The full code for this template is in my post above if that helps)

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Edit buttons: new mobile version

Post by troyeccles on October 22nd 2016, 2:25 am

Bump

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Edit buttons: new mobile version

Post by vietkanpy on October 22nd 2016, 3:12 am

Smile
Demo online : http://www.hotrofm.net/t353-code-code-thay-doi-button-quote-o-mobile
you can login to click button

Code:
<script type="text/javascript">
//<![CDATA[
var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
       
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
            {
                if( $(this).is(":visible") )
                {
                    $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
                }
                else
                {
                    $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
                }
            });
        }
    }
    catch(e) { }
   
    return false;
};

//]]>
</script>

<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
{POLL_DISPLAY}

<!-- BEGIN postrow -->
<div id="{postrow.U_POST_ID}" class="topic">
    <!-- BEGIN hidden -->
        <div class="post {postrow.hidden.ROW_CLASS}" style="{postrow.displayed.DISPLAYABLE_STATE}">
            <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
        </div>
    <!-- END hidden -->
    <!-- BEGIN displayed -->
        <div id="p{postrow.displayed.U_POST_ID}" class="post-section {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}">
            <div class="post-head">
                <div class="post-icon"><i class="material-icons">person</i>{postrow.displayed.POSTER_AVATAR}</div>
                            <div class="post-info">
                                <h2>{postrow.displayed.POST_DATE_NEW}</h2>
                    <div class="post-details">{L_TOPIC_BY} {postrow.displayed.POSTER_NAME}</div>
                                </div>
            </div>
            <div class="post-content">
                {postrow.displayed.MESSAGE}
                        <!-- BEGIN switch_attachments -->
                        <div class="attachbox">
                            <p class="title">{postrow.displayed.switch_attachments.L_ATTACHMENTS}</p>
                            <dl class="attachments">
                                <!-- BEGIN switch_post_attachments -->
                                    <dt>
                                        <!-- BEGIN switch_dl_att -->
                                        <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                        <!-- END switch_dl_att -->
                                        <!-- BEGIN switch_no_dl_att -->
                                        {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                        <!-- END switch_no_dl_att -->
                                    </dt>
                                    <dd>
                                        <!-- BEGIN switch_no_comment -->
                                        <p>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</p>
                                        <!-- END switch_no_comment -->
                                        <!-- BEGIN switch_no_dl_att -->
                                        <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
                                        <!-- END switch_no_dl_att -->
                    <p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p>
                </dd>
                        <!-- END switch_post_attachments -->
                            </dl>
                        </div>
                        <!-- END switch_attachments -->
            </div>
            {postrow.displayed.EDITED_MESSAGE}
            <ul class="post-buttons">
                <li>{postrow.displayed.QUOTE_IMG}</li>
                <li>{postrow.displayed.EDIT_IMG}</li>
                <li>{postrow.displayed.DELETE_IMG}</li>
                    </ul>
        </div>
        <!-- BEGIN first_post_br -->
        <hr id="first-post-br" />
        <!-- END first_post_br -->
    <!-- END displayed -->
</div>
<!-- END postrow -->
<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
{INLINE_MESSAGE}
{QUICK_REPLY_FORM}

<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="btn-floating">
    <i class="material-icons"></i>
</a>
<!-- END switch_user_authreply -->
<style>
  /* css fix button quote mobile forumotion ww.hotrofm.net */
a[href*="mode=quote"] img {
    display: none;
}
a[href*="mode=quote"]:after {
    content: "❝";
    font-size: 45px;
    line-height: 45px;
}</style>

vietkanpy
Forumember

Male Posts : 38
Reputation : 14
Language : vietnam

http://www.hotrofm.net/

Back to top Go down

Solved Re: Edit buttons: new mobile version

Post by troyeccles on October 22nd 2016, 5:25 am

Right, sorted (with thanks!)

I was missing this line:

Code:
<li>{postrow.displayed.QUOTE_IMG}</li>

Question now: when I click EDIT or DELETE, it opens within the mobile version.
But when I click QUOTE it goes back to the classic (full size) version.

Why?

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Edit buttons: new mobile version

Post by troyeccles on October 26th 2016, 4:29 pm

Bump

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Edit buttons: new mobile version

Post by ChanelW on October 26th 2016, 5:18 pm

Hello @Troyeccles,

Please make a new a new topic for this seperate issue and the other will be able to assist you regards to your new question/issue. As for those who won't know how to answer this and may not check this topic, however, you have announced a new issue and those who can help will not check this topic and you will miss out on support.

Thanks,
ChanelW Smile


Last edited by ChanelW on October 26th 2016, 5:20 pm; edited 1 time in total (Reason for editing : [Typo's due to been on mobile])

ChanelW
Trial Reviewer
Trial Reviewer

Posts : 258
Reputation : 34
Language : English

Back to top Go down

Solved Re: Edit buttons: new mobile version

Post by troyeccles on October 26th 2016, 10:04 pm

Ok, will do. Thanks.

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Edit buttons: new mobile version

Post by SLGray on October 26th 2016, 10:07 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

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