Posted: July 29 2019
Here is my biggest hack yet, for Weebly. Customising the text of 'Previous Posts' and 'Next Posts' on Weebly including changing the colour!!
In the same way that I wanted to (and did), customise the Read More Break on Weebly - I changed the colour AND the wording - which by default is Read More - I changed mine to 'Read My Review' and 'Continue Reading' - and made the colour #800000.
You can find your own colours on: https://html-color-codes.info/old/colorpicker.html
On Weebly, on the blog style pages, the first 5 posts (or 10, 15, 20 or 25 posts depending on what you select - see above!) will be shown on the 'first' page. So if you produce 6 posts, the 6th will be shunted on to Page 2. Access to page 2 and back to page 1 will be by clicking the default << Previous Posts and Next Posts >>.
This has been bugging me for ages. In an old Weebly Community post, circa 2016, some one had suggested adding a line of coding which everyone was having no success with. I found a blog with a post from May this year, 2019, I tried it. Also no success.
But I discovered something, or realised would be a better word. In the beginning part of the HTML, under GLOBAL STYLES, you'll find the coding for the H2 title tags, the text tags and so forth, and there is another one, a. I had no idea what the a was for.
Mine by default was set to #b9b9b9. You see, it doesn't really stand out well does it. It's so pale you can barely see it.
The a is for things like Read More Break and Previous Posts and Next Posts and Blog Post Date (which I have hidden).
I changed the a to #ff6600, a lovely shade of orange, so it would stand out whilst testing my theory! and just below the coding for the colour is the coding for a on hover. I changed this to a nice #8c48b7.
Below is the version I am using now: a is set at #1464c5 and hover is #000000
All this stuff with the Previous and Next Posts is called Pagination, and there on the left you can find it:
If you click on more-break.tpl and pagination.tpl, you'll find that the class of the Read More Break is 'blog-read-more' and for the previous and next posts, it's 'blog-page-nav-previous' and 'blog-page-nav-next'.
When I customised the Read More Break Colour I was essentially over riding the global style for the a by adding the colour code, after .blog-post .blog-read-more but I failed to work out what the full code for the blog-page-nav was.
So I could not over ride the global style.
I just changed the Global style, which did not affect my read more break over ride!
Anybody help me on this? I tried .blogTable .blog-read-more and a few more but didn't hit on the right one.
And now for the good part. Customising the wording of the Previous and Next Posts.
Here is the jQuery code, I used when customising the text of the read more break ,which I found on another blog, which also did not work at first. Their suggestion was to to put it in the Header Code under the main SETTINGS >> SEO, but again by trial and error, I added it to the Blog page's Header Code. See below:
The example above was the coding I used on my Hostel Review page. The Read More Break default of Read More has been over ridden by Read my review. And you'll notice the little 'a' after blog-read-more. The a that I modified on the Global styles.
So I thought to use this JQuery to over ride the default text for the Previous and Next Posts. And I did:
I have over ridden the text of the back end design on Weebly. I have I used 'Earlier Posts and 'Newer Posts'
Here is a screen shot of page 2 of my blog. You can see the Read More Break text of Continue Reading and a bit further down, the text Earlier Posts and Newer Posts. The changes do not show up on the editor, only on the live page after publishing.
I have since changed the colour of the text to #950707 and the text reads << Earlier Posts and Newer Posts>> which you can see on: https://www.nomadicbackpacker.com/blog/previous/2