Steemblr development update 05 - Theme Editor

in utopian-io •  4 months ago

Steemblr is open source microblogging platform powered by steem blockchain . It allows user to post and explore content which is smaller than a traditional blog.

You can check developer version here:


New Features

Theme Editor

New section where user can customize his blog. Styles changed in editor are applied to blog modal, profile hover and main blog view.
Editor can be accessed in settings in customize section.

When user is logging in for the first time application creates default blog style for him with data imported from steem api.
Changes made in editor won't affect how user account look like on steemit and other front-ends.
It was implemented by using redux, and firebase firestore. Editor is loading blog layout from database or redux store when it was already loaded.
To view changes in real time, editor is modyfing layout loaded in redux and then blog view is loading new props from store.

Blog title and description

This feature will change your blog title and description.
At the first login title and description are imported from json_metadata. Changing title and description in editor won't change your metadata on steem account, only in steemblr database.

Input changes are dispatched to redux store so components can get new props, and can be seen live.

Header image

Changing header image, again it is imported in metadata and changing it in editor won't change your cover image on steemit.

Header is uploaded to firebase storage and link is stored in redux store.

Avatar shape

This features lets user change shape of his avatar, user can choose between circle and square shape.

Avatar border radius is changed accordingly to shape name.

Title font

Gives user control over which font are used to display blog title. User can choose between one hundred different web pgoogle fonts.

It was implemented by using font-picker-react dependency. With font-picker-react font can be choosen dynamically then props are send to redux and styled-components gets font family, category and url to load choosen font.

Background, title, description color change

This feature lets user change appearance background and title/description elements.

This feature uses react-color for color picker, when color is choosen then app dispatches data to redux store and components are updated.

Hiding blog elements

User can hide elements like header, avatar, title and description. Hiding works in main blog view and blog modal, for now apart from hiding avatar it doesn't work in profile hover.

It was implemented by using checkbox and sending boolean values about which components should be shown in blog views.

Updated blog views

Components responsible for showing profile hover, blog modal and main blog view are now loading custom styles made in theme editor.

It was achived by using prop feature in styled-components. Components are getting styles from database/redux store and loading them into styled-components.

Github Account

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Great contribution once again! We have decided to staff pick it, which means you will receive the maximum vote for the development category!


Thanks! That means a lot, especially coming from you.

Hey @snwolak
Thanks for contributing on Utopian.
Congratulations! Your contribution was Staff Picked to receive a maximum vote for the development category on Utopian for being of significant value to the project and the open source community.

We’re already looking forward to your next contribution!

Want to chat? Join us on Discord

Vote for Utopian Witness!

Congratulations @snwolak!
Your post was mentioned in the Steemit Hit Parade in the following category:

  • Pending payout - Ranked 10 with $ 170,87

I really love this idea!
Can't wait to test it 😀


Glad you like it, week by week app is getting closer to release. :)


I am thinking of bringing my tumblr blog over to yours :)


It would be great if you did! Btw your tumblr blog is really interesting. :)


Thank you! The only issue I have regarding that, is that the posts in tumblr have already been posted (under my own account) in the past on steemit.
So I am thinking of creating an exclusive steemit account (for heraklion - which is my city) and use your app for my blog (as the posts would also be posted here, right?)
I will be looking forward to your updates on it!


Yeah, posts made on steemblr will be posted here too, just like dtube, dsound etc.