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.

Go to page number style on post

View previous topic View next topic Go down

Solved Go to page number style on post

Post by AlexisMcDevin on February 1st 2015, 11:50 am

Dear Forumotion/ @Ange Tuteur,

Since the page number at my forum is very difficult to see. So, I want to make some changes on this. PLease look at below image:

The No.1: That is the original style.

No.2 and No.3 are the style needed. And make sure that it will be included dropdown menu so that we can "go to page number"



Can you take your time to review and let me know if it is possible?

Thank you!
Alex.


Last edited by AlexisMcDevin on February 4th 2015, 3:45 pm; edited 1 time in total

AlexisMcDevin
Forumember

Male Posts : 133
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

Solved Re: Go to page number style on post

Post by _Twisted_Mods_ on February 1st 2015, 12:31 pm

here is css for style ... give me lil bit and ill see about writing u the script for dropdown menu


Code:

.pagination span a:link{
border:none ;
background-color: #943431!important;
color:white!important;
padding:3px 7px;
border-radius:3px
}
.pagination span strong{
border:1px solid #bbb ;
box-shadow:0px -3px 9px #ccc inset;
color: #333;
background-color: #fff;
padding:3px 7px;border-radius:3px;
text-align: center;
text-shadow: 1px 1px 0px #FFF;
}
.pagination span a.pag-img {
    background-color: transparent!important;;
    border: medium none!important;
}

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Go to page number style on post

Post by AlexisMcDevin on February 1st 2015, 3:47 pm

Hi @_Twisted_Mods_,

This code worked but did not very well. Please look at below image.



Here is the link to test:
http://ccxiqi.forumvi.com/t226-topic

Testing account: demoweb
Password: 123456A

AlexisMcDevin
Forumember

Male Posts : 133
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

Solved Re: Go to page number style on post

Post by _Twisted_Mods_ on February 1st 2015, 3:52 pm

clear you cache ....... it doesnt look like that on my side they all work

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Go to page number style on post

Post by AlexisMcDevin on February 1st 2015, 5:46 pm

Hi @_Twisted_Mods_,

cleared cache, then it worked. Thank you.



Please take your time to help on dropdown menu with "go to page number". If it is difficult, can you do somethings to get "go to page number" without dropdown menu. It will be fine to me.

Best,
Alex.


Last edited by AlexisMcDevin on February 3rd 2015, 4:15 pm; edited 1 time in total

AlexisMcDevin
Forumember

Male Posts : 133
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

Solved Re: Go to page number style on post

Post by _Twisted_Mods_ on February 1st 2015, 7:11 pm

yea how many post are allowed per page on your forum

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Go to page number style on post

Post by AlexisMcDevin on February 1st 2015, 7:30 pm

@_Twisted_Mods_ wrote:yea how many post are allowed per page on your forum

Posts per page: 10.


AlexisMcDevin
Forumember

Male Posts : 133
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

Solved Re: Go to page number style on post

Post by AlexisMcDevin on February 3rd 2015, 11:22 am

Hi @_Twisted_Mods_,

Please noted that we are still pending on this.

Thanks!
Alex.

AlexisMcDevin
Forumember

Male Posts : 133
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

Solved Re: Go to page number style on post

Post by _Twisted_Mods_ on February 3rd 2015, 11:28 am

oh yea sorry i have so many things going on i tend to forget somethings .. ill make note and try to get to this sometime in next 12 hours

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Go to page number style on post

Post by _Twisted_Mods_ on February 3rd 2015, 9:15 pm

ok well i dont have multi page topic on my forum yet so im unable to test this but should work

placement in topics

Code:
$(function(){
a = $('.pagination a[href="javascript:Pagination();"]').eq(0).text();
a = a.replace(/Page (.*) of (.*)/,'Page <b>$1</b> of <b>$2</b>');
$('.pagination a[href="javascript:Pagination();"]').wrap('<span></span>').parent().html('<a id="tm_pages" onclick="tmpageshow()">'+a+'</a>');
$('#tm_pages').after('<form class="tmgo_page">Chuyển đến trang: <input class="tmpageinput" name="start" size="5" onkeypress="if (event.keyCode==13) { tmgotopage();return false; }" type="text"> <input class="tmpagebutton" value="Go" onclick="tmgotopage();return false;" type="button"></form>');
$('.tmgo_page').mouseleave(function(){
$('.tmgo_page').css('opacity','0');
});});
function tmpageshow(){
$('.tmgo_page').css('opacity','1');   
};
function tmgotopage(){
   var pages = $('.post').length;
var curpage = location.pathname;
var cur1 = curpage.replace(/-(.*)/,'').replace(/p(.*)/,'');
var whpage = $('.tmpageinput').val()-1;
pages = pages*whpage;
location.href=cur1+'p'+pages+'-';
$('.tmgo_page').css('opacity','0');
};


css

Code:
.tmgo_page{
opacity: 0;
   position: absolute;
   margin-top: 2px;
   z-index:999;
border:none ;
background-color: #943431!important;
color:white!important;
padding:3px 7px;
border-radius:3px;
   transition: 1s;

}
.tmpagebutton{
border:1px solid #bbb ;
box-shadow:0px -3px 9px #ccc inset;
color: #333;
background-color: #fff;
border-radius:3px;
text-align: center;
text-shadow: 1px 1px 0px #FFF;
}



and this will fix the other buttons not showing

Code:
.pagination span a:visited {
    background-color: #AC6261 !important;
    border: medium none;
    border-radius: 3px;
    color: #FFF !important;
    padding: 3px 7px;
}

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Go to page number style on post

Post by AlexisMcDevin on February 4th 2015, 5:48 am

Hi @_Twisted_Mods_,

Thanks for these codes! It worked.

Can we have a little bit change on the color? Please see below image for my request. I tried but it does not work.



Thank you!
Alex.

AlexisMcDevin
Forumember

Male Posts : 133
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

Solved Re: Go to page number style on post

Post by _Twisted_Mods_ on February 4th 2015, 6:12 am

replace
Code:
.pagination span strong{
border:1px solid #bbb ;
box-shadow:0px -3px 9px #ccc inset;
color: #333;
background-color: #fff;
padding:3px 7px;border-radius:3px;
text-align: center;
text-shadow: 1px 1px 0px #FFF;
}

with

Code:
.pagination span strong{
border:1px solid #bbb ;
box-shadow:0px -3px 9px #FD5f88 inset;
color: #333;
background-color: #FD3188;
padding:3px 7px;border-radius:3px;
text-align: center;
border-radius:5px;
}


and for the input box add adjust colors as needed

Code:
.tmpageinput{
background-color:black;
color:white;
}

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Go to page number style on post

Post by AlexisMcDevin on February 4th 2015, 8:10 am

Hi @_Twisted_Mods_,

I do not know how this code work but please see below image and let me know what your thought.



Here is the topic link to test.

http://ccxiqi.forumvi.com/t226p150-topic



Last edited by AlexisMcDevin on February 4th 2015, 2:09 pm; edited 2 times in total

AlexisMcDevin
Forumember

Male Posts : 133
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

Solved Re: Go to page number style on post

Post by _Twisted_Mods_ on February 4th 2015, 9:43 am

add


Code:
#tm_pages {color: red;}



and remove


Code:
.tmpageinput{
background-color:black;
color:white;
}

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Go to page number style on post

Post by AlexisMcDevin on February 4th 2015, 3:43 pm

Everything done!

Topic solved!

Thank you very much Twisted_Mods!

AlexisMcDevin
Forumember

Male Posts : 133
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

Solved Re: Go to page number style on post

Post by _Twisted_Mods_ on February 4th 2015, 3:48 pm

your welcome .. if you could edit your first post and change post icon to Solved

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Go to page number style on post

Post by Ange Tuteur on February 4th 2015, 10:48 pm

Topic archived

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.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