The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Tumblr blog pagination
J3llyDesu420
post Jun 26 2015, 05:12 PM
Post #1





Group: Members
Posts: 4
Joined: 22-February 15
Member No.: 22,232
So these past few hours I've been trying to edit the theme of my blog by adding pagination instead of infinite scrolling.
The problem is, the pagination appears at the top of the page instead of at the bottom of the page.
I've tried everything I could to make the pagination buttons appear at the bottom, but NOTHING would work. This is my only option, please help.
here's the html of my theme:

CODE

<!--
theme by nice-meme.tumblr.com
please don't remove the credit!!
have fun with this shitty theme B^)
-->

<!DOCTYPE html>

<head>
{block:ifinfinitescrolling}
<script type="text/javascript" src="http://codysherman.tumblr.com/tools/infinite-scrolling/code"></script>  {/block:ifinfinitescrolling}

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}

<meta name="color:Background" content="#ddf2e8">
<meta name="color:Post BG" content="#ffffff">
<meta name="color:Text" content="#222222">
<meta name="color:Link" content="#224b37">
<meta name="color:Link Hover" content="#bbe4d0">
<meta name="color:footer" content="#eff5f2">
<meta name="color:Border" content="#5acdb3">
<meta name="color:footer border" content="#9ad7b9">
<meta name="color:shadow" content="#bbe4d0">
<meta name="color:box color" content="#eaf8f1">

<meta name="image:favicon" content="http://media.tumblr.com/983e00b7a843ac5296ccef85ad4569a0/tumblr_inline_mz64draZSa1r9ajsd.gif"/>
<meta name="image:Sidebar" content="https://31.media.tumblr.com/62945633a7463e36848c3ad87ffe7270/tumblr_inline_na22fb0Pk31rgz5s8.png" />
<meta name="image:background" content="">
<meta name="image:corner image" content="https://31.media.tumblr.com/dc0df346f3875c2a0d4075be729f7642/tumblr_inline_na258ok6bn1rgz5s8.png">

<meta name="text:corner image bottom" content="-1">
<meta name="text:corner image position" content="30">
<meta name="text:sidebar top" content="22">
<meta name="text:sidebar position" content="470">
<meta name="text:post position" content="434">
<meta name="text:link box name" content="links. . .">
<meta name="text:link1 name" content="link1">
<meta name="text:link1 url" content="">
<meta name="text:link2 name" content="link2">
<meta name="text:link2 url" content="">
<meta name="text:link3 name" content="link3">
<meta name="text:link3 url" content="">
<meta name="text:link4 name" content="link4">
<meta name="text:link4 url" content="http://beeps-and-bloops.tumblr.com">
<meta name="text:pagination position" content="300">

<meta name="if:link1" content="1">
<meta name="if:link2" content="1">
<meta name="if:link3" content="1">
<meta name="if:link4" content="1">
<meta name="if:shadow" content="1">
<meta name="if:round" content="0">
<meta name="if:bgcover" content="0">
<meta name="if:infinitescrolling" content="1">


  
<title>{Title}</title>
      
<link rel="shortcut icon" href="{image:favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="stylesheet" href="http://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">

<script src="http://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>
      
<style type="text/css">

::-webkit-scrollbar {
    width:9px;
    height:5px;
    background:{color:Background};}
::-webkit-scrollbar-thumb {background:{color:Text};}

body {
    margin:0px;
    background:{color:Background} url({image:background}) {block:ifbgcover}  no-repeat center fixed;
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;  {/block:ifbgcover}

  {block:ifnotbgcover} top left fixed repeat {/block:ifnotbgcover};

    font-family: tahoma;
    font-size:12px;
    line-height:140%;
    color: {color:Text};

}

a{
    color:{color:link};
    -webkit-transition: 0.6s ease;transition: 0.6s ease;
    -o-transition: 0.6s ease;-moz-transition: 0.6s ease;
}

a:hover{
    color:{color:link hover};
    -webkit-transition: 0.6s ease;transition: 0.6s ease;
    -o-transition: 0.6s ease;-moz-transition: 0.6s ease;
}

.post a{
    color:{color:Link};
    text-decoration:none;
    font-weight:normal;
}
  
.post a:hover{
    color:{color:Link Hover};
    text-decoration:none;
}

#wrapper{
    width:{text:post position}px;
    margin:0 auto;
    padding:10px;
}

#sidebar{
    margin-top: {text:sidebar top}px;
    margin-left: {text:sidebar position}px;
    text-align:center;
    background:{color:post bg};
    width: 136px;
    padding:5px;
    position:fixed;
    border:1px solid {color:border};
  
   {block:ifround}
    -moz-border-radius:4px; -webkit-border-radius:4px; {/block:ifround}
  
    {block:ifshadow}
        -moz-box-shadow: 3px 3px {color:shadow};
-webkit-box-shadow: 3px {color:shadow};
box-shadow: 5px 5px {color:shadow}; {/block:ifshadow}
}


#sidebarimg{
    margin-bottom:0px;

}

#sidebarimg:hover{
}

#sidebarimg img{
    max-width:100%;
    width: 130px
    height: 130px;
}


#description{
    margin:1px 0;
    width: 135px;
    text-align:center;
}

#description a{
    color:{color:Link};
    text-decoration:none;
}

#description a:hover{
    color:{color:Link Hover};
}



.nav{
    margin:0;
    font-size:12px;
    font-style:italic;
    width:150px;
    text-align:center;
}

.nav a{
    text-decoration:none;
    padding:0 3px;
}

#content{
    width:450px;
    padding:10px;
    margin-top:-30px;
    margin-left:-30px;
    overflow:hidden;
}

.post{
    width:400px;
    padding:15px;
    margin:45px 0 35px 0;
    overflow:hidden;
    text-align:justify;
    border:1px solid {color:border};
    background:{color:post bg};
  
  
    {block:ifround}
    -moz-border-radius:4px; -webkit-border-radius:4px; {/block:ifround}
  
    {block:ifshadow}
  
        -moz-box-shadow: 3px 3px {color:shadow};
-webkit-box-shadow: 3px 3px {color:shadow};
box-shadow: 5px 5px {color:shadow};
{/block:ifshadow}
}

.post img{
    max-width:100%;
}

.posttitle{
    font-weight:normal;
    font-size:15px;
    line-height:22px;
    text-decoration:none;
    margin:3px 0 -3px 0;
}

.posttitle a{
    text-decoration:none;
}

.quote{
    font-weight:normal;
    font-size:15px;
    font-style:italic;
    line-height:22px;
    text-decoration:none;
}

.quotesource{
    text-align:right;
}


.question{
    padding-bottom:10px;
    margin:0;
    border-bottom:1px solid {color:Border};
}

.caption{
    margin:0;
}

blockquote{
    margin:0 0 0 15px;
    padding:0 0 0 10px;
    margin-left:5px;
    border-left:solid 2px {color:text};
}





ol.notes li.note img {
    width:10px;
    height:10px;
}
  
ol.notes{
    list-style-type:none;
    padding:2px 10px 2px 10px;
    font-size:11px;
}





#picture
{
position:fixed;
left:20px;
bottom:3px;
z-index:100
}




.footer{
    margin:1px;
    font-size:11px;
    font-style:none;
    line-height:13px;
    border:1px solid {color:footer border};
    background: {color:footer};
    padding: 3px 3px;
    margin-top: 5px;
}


{block:ifnotinfinitescrolling}

.jump_page {
padding: 4px 8px;
border: 1px solid {color:border};
background-color: {color:post BG};
color:{color:text};
font-family:helvetica;
font-size:10px;
text-decoration:none;
}

.current_page, .jump_page:hover {
padding: 4px 8px;
border: 2px solid {color:border};
background-color: {color:border};
color: {color:text};
font-family:helvetica;
font-size:11px;
text-decoration:none;
}
{/block:ifnotinfinitescrolling}




{CustomCSS}
</style>


</head>


<div style="position:fixed; bottom:{text:corner image bottom}px;  left:{text:corner image position}px; z-index:-999">
<img src="{image:corner image}"/></div>


<body class="{block:IndexPage}index{/block:IndexPage} {block:PermalinkPage}permalink{/block:PermalinkPage}">


</div>
</div>





<div id="wrapper">



<div id="sidebar">


<div id="sidebarimg"><a href="http://beeps-and-bloops.tumblr.com"><img src="{image:sidebar}"></a></div>


{block:Description}
<div id="description">{Description}
{/block:Description}
<br>
<select style="width: 130px; border: 0px solid; padding: 3px; color: {color:text}; background-color: {color:box color};  font-family: calibri; text-transform: uppercase; font-size: 11px; letter-spacing: 2px;" onChange="location.href=this.options[this.selectedIndex].value;">
{block:iflink1}<option value="/">{text:link box name}</option>{block:iflink1}
<option value="{text:link1 url}">{text:link1 name}</option>
{block:iflink2}<option value="{text:link2 url}">{text:link2 name}</option>{block:iflink2}
{block:iflink3}<option value="{text:link3 url}">{text:link3 name}</option>{/block:iflink3}
{block:iflink4}<option value="">{text:link4 name}</option>{/block:iflink4}
<option value="http://nice-meme.tumblr.com/">theme</option>
</select></div>
</div>
     {block:ifnotinfinitescrolling}
    
    
     <div style="position:fixed; margin-bottom: {text:pagination position}px;
    margin-left: {text:sidebar position}px;">
    
{block:Pagination}
{block:PreviousPage}<a href="{PreviousPage}" class="jump_page">«</a>{/block:PreviousPage}
{block:JumpPagination length="3"}
{block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
{block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
{block:NextPage}<a href="{NextPage}" class="jump_page">»</a>{/block:NextPage}
{/block:Pagination}</div>
      
        {/block:ifnotinfinitescrolling}

<div id="content">


{block:Posts}

<!-- {block:NoRebloggedFrom}
{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
{/block:NoRebloggedFrom} -->

{block:ContentSource}<!-- {SourceURL}
{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}




<div class="post">

{block:Text}
{block:Title}
<div class="posttitle">{Title}</div>
{/block:Title}
{Body}
{/block:Text}

{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photo}

{block:Photoset}
{Photoset-400}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photoset}

{block:Quote}
<div class="quote">"{Quote}"</div>
{block:Source}
<div class="quotesource">{Source}</div>
{/block:Source}
{/block:Quote}

{block:Link}
<div class="posttitle"><a href="{URL}">{Name}</a></div>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}
<div class="posttitle">{Title}</div>
{/block:Title}

{block:Lines}
<div class="{Alt} user_{UserNumber}">
{block:Label}
<b>{Label}</b>{/block:Label}
 {Line}
</div>
{/block:Lines}
{/block:Chat}

{block:Video}
{Video-400}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Video}

{block:Audio}


{AudioPlayerWhite}

<i>{block:TrackName}{TrackName}{/block:TrackName} - {block:Artist}{Artist}{/block:Artist} ({block:Album}{Album}{/block:Album})</i>

{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Audio}
              
{block:Answer}
<table style="border-bottom:0px solid #a0a0a0;padding-bottom:5px;margin-bottom:5px;">
<tr>
<td style="vertical-align:top;padding-right:10px;"><img src="{AskerPortraitURL-48}"></td>
<td style="vertical-align:top;"><strong>{Asker} said:</strong> {Question}</td>
</tr>
</table>
{Answer}
{/block:Answer}

<div class="footer">
<a href="{Permalink}">{block:Date}{TimeAgo}{/block:Date}{block:NoteCount}</a><font color="{color:link}"> - </font><a href="{Permalink}">{NoteCountWithLabel}{/block:NoteCount}</a>

<div style="float:right">{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}" >via</a><font color="{color:link}"> / </font><a href="{ReblogRootURL}" title="{ReblogRootName}">©</a> {/block:RebloggedFrom}</div>

<div align="left">{block:HasTags}
{block:Tags}<font color="{color:link}">#</font><a href="{TagURL}" title="{Tag}">{Tag}</a> {/block:Tags}{/block:HasTags}</div></div>


{block:PermalinkPage}
{block:NoteCount}
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:NoteCount}
{/block:PermalinkPage}

</div>
{/block:Posts}
</div>
</div>




</div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="http://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>
      
        <!-- add Javascript file here -->
        <!--<script src=""></script>-->
      

    </body>

  
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
J3llyDesu420
post Jun 26 2015, 06:01 PM
Post #2





Group: Members
Posts: 4
Joined: 22-February 15
Member No.: 22,232
UPDATE: I somehow managed to figure out how to change the position of the pagination buttons. Since I can't delete this post, I'm just letting you all know that you dont have to reply to me.
Have a lovely day everyone!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 27 2015, 04:56 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Posts aren't deleted here.

You might post what you did to solve this, so that others with the same problem can benefit from it when they find this thread.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 10:57 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC