Poster next page text as a button?

inStacks
1

Hi,

I can see that category / tags and read more can be made into buttons.

All the other actions on my blog have mobile friendly buttons but the next page text is an exception.

https://www.themagiccrayons.com/blog/

Other pages on that site made with the ever wonderful Poster are the flash cards, merchandise, crafts and children’s books pages. Each entry used to be a separate page prior to installing Poster. Much easier now for me to add new content and keep site wide appearance consistent.

Thank you

Tim

2

Super easy… Here’s a quick and dirty demo.

https://warehouse.caffeineinjection.com/misc/poster-next-button-demo.zip

Style the button as you wish in the css inspector window and change the button text I the Power settings.

2 Likes
3

Hi Steve,
Sorry but I’m not sure what I’m supposed to do with that… I’ve unzipped it but now what do I do? One of the plists seems to have button related details.
Thank you
Tim

4

Out riding at the moment so can’t help much. You need to learn about basic css and the css box in inspector, all simple stuff. Maybe someone not out on a bike can help?

Failing that, I’ll br home later today.

BTW. Plist? That’s a RW project, have you opened it in RW?

5

relevant CSS classes are:

poster-pagination-page-prev (prev button a tag)
poster-pagination-page-text (text span tag)
poster-pagination-page-counter (text counter span tag)
poster-pagination-page-next (next button a tag)

all wrapped in a div with class poster-pagination

2 Likes
6

Hi,
No rush. Day off for the new Emperor here in Japan so not working.
If I open it via RW or directly from the folder there’s nothing I can ‘open’. No RW files that I can see. I can open plists with TextWrangler…

rw
rw.png960×894 140 KB

Probably apparent by now that I’m unfamiliar with CSS.
Thank you

7

Depending on your browser, you should just click the link and it will download a zip file. Unzip this zip file and you should then see a RW8 project.

8

Hi Steve,
I thought I’d give adding buttons another try. I’m having no luck with another browser, possibly the zip is no longer there?

I now have 7 or so Poster stacks on my site. Wish I had this stack ten years ago lol.

Ty

Tim

1 Like
9

If you have a url to a blog and a button example, let me know. I will try to give you a css example then.

Cheers!

10

Hi Jannis,
So helpful, thank you.

My blog

The “Read more” button under each post is how my action buttons look site wide.

Thank you

1 Like
11

If I understand what you are asking the next post and Prev post text to be made into buttons?

If so give this a try

.poster-pagination-post-prev, .poster-pagination-post-next {
    text-shadow: none;
    border: none;
    outline: none;
    word-wrap: normal;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    font-family: Helvetica,sans-serif;
    font-size: 17px!important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    display: inline-block;
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: optimizeLegibility;
    text-align: center;
    background-color: #1770e1;
    padding: 10px 20px;
}
.poster-pagination-post-prev a, .poster-pagination-post-next a {
   color: rgb(236, 236, 236);
}
3 Likes
12

Hi Teefers,

Thank you !

Would I be right in thinking I simply paste all that into

Page
HTML
CSS

If so I can’t see anything happening in Preview or Preview with Safari.

Thank you

13

Should go into the CSS section of the page inspector.

2 Likes
14

Hi Teefers,
Yes, I tried that to no effect. I also tried on different Poster page, plus tried a new page with no other stacks besides the Poster stack.
Thank you for trying though

15

Try it in .poster-pagination a { }

so use something like:
.poster-pagination a {
text-shadow: none;
border: none;
outline: none;
word-wrap: normal;
white-space: nowrap;
overflow: hidden;
position: relative;
font-family: Helvetica,sans-serif;
font-size: 17px!important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
display: inline-block;
-webkit-font-smoothing: subpixel-antialiased;
text-rendering: optimizeLegibility;
text-align: center;
background-color: #1770e1;
padding: 10px 20px;
}

3 Likes
16

Tim,
I don’t know why the code above isn’t working?
I just pasted the exact code above into a Chrome browser and it works.
Heres the output on one of pages (https://www.themagiccrayons.com/blog/?post=japanese-montessori-style-kindergarten-designed-by-architect-takaharu-tezuka):

2019-06-07_12-39-12
2019-06-07_12-39-12.jpeg1019×767 73.7 KB

Where did you place the code?

1 Like
17

Hi Teefers,

All seems well now. Not sure why it wasn’t before.

My theme link color is blue, so I put the Next text into a grey box. It still looks great and is easy to see than just text.

Thank you so much

TIm

3 Likes
18

Interesting responses here. Although I’m looking for something different, it seems that @MrTim has it working on his great MagicCrayons blog

So here is my Blog - all working fine, thanks to the wonders of Poster stack. When I open a post, it opens in a clean page, without headers. What I want to achieve is the posts opening as though a normal web page, with headers intact (headers are about to be changed / refined).

This is my ideal: https://www.elliotbrownwatches.com/blog - see how the post opens?

Is there an easy way to do this? I may be missing something obvious!? Long term I want to set up inStacks online blogging platform, but I need to get the basic right first!

19

Please remove that checkbox, something in your setup doesn’t like #hash navigation.

57

20

OMG!! Really so simple? If you only knew how long I have spent trying to solve that 😭

Thank you Jannis, very sincerely, thank you!!