Changing Default Text Strings in Weebly

As they are made to be, CSS tends only to change the style of your site. But with its continuing development, some CSS can even perform tasks intended for JavaScripts. Today, we are going to change default text in Weebly using the pseudo elements :before. Text like "Add a comment" in the blog page including the "Comments" and “Leave a Reply" on the reply form can now be edited using only content-related pseudo "elements".

INTRODUCTION

The most challenging part of this trick is not the solution itself but finding out what is the right CSS selector to be altered. After analyzing the code, I came out with the following results.

Selector for the text "Add a comment", "comments" and "Leave a reply" respectively:

.blog-body .blog-comments-bottom .blog-link
h2#commentAreaTitle
h2#commentReplyTitle

And for the solution, we simply use the pseudo element :before to insert whatever content we want before the original text. After inserting, we then use display:none property to hide the original text. 

With proper combination of the right selector and the pseudo element :before, we can attain what we want. This solution came from http://stackoverflow.com/questions/7896402/how-can-i-replace-text-through-css.

TUTORIAL

To apply it on your site, follow these steps.

1. Go to Weebly > Design > on the bottom left click the "Edit CSS/HTML".

2. Click on the main-style.css located on the upper left.

3. Scroll down the codes on the right. Go to the very bottom and paste the following:

.blog-body .blog-comments-bottom .blog-link{
visibility: hidden;
}

.blog-body .blog-comments-bottom .blog-link:before {
content: "YOUR NEW TEXT HERE";
visibility: visible;
}

h2#commentReplyTitle {
visibility: hidden;
}

h2#commentReplyTitle:before {
content: "YOUR NEW TEXT HERE";
visibility: visible;
}

h2#commentAreaTitle {
visibility: hidden;
}

h2#commentAreaTitle:before {
content: "YOUR NEW TEXT HERE";
visibility: visible;
}

Change the red text with your desired text string to replace the default value on your blog site. Save your template and publish your site. You're done.

CONCLUSION

This tip can be useful for sites with language other than English. Comment below if this tutorial helps you. You can also help me spread this site by subscribing via email, simply register on the subscribe widget on my sidebar. Thank You!

Get email updates and more access! (Free)

Email *

email marketing by activecampaign

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!