Complete Custom Style Editor for Your Website (No CSS or Theme Builders)

Custom style without touching your css code? Yes, you just heard that right. If you are thinking about having a style editor for your WordPress website, you are at the right place!

We know custom style has been a hassle for marketers who focus more on marketing than the backend. But no worries, you have our back.

WordPress’s website already has plenty of features that have made it easy for you to manage your social media marketing through your website. Still, in most cases, you need some editor panel with how you can style your website.

And here is the catch! In this blog, you will get to know how you can do that with our easy guide that will not require you to do any code or use any other theme builder.

Let’s start then;

Custom style on WordPress

Long ago, there was a time when people had to do long lines of code to manage their websites. With the changes in the tech world, those days are gone, and it blessed us with thousands of website solutions.

What is concerning here is that after having all those capabilities on our websites, there’s still a lack of custom style option in our editor panel though having a multi-purpose handling plugin on the dashboard. To custom style, either you have to work on the backend to fix the CSS, or you may need to take help from any page builder.

Even if you take help from those resources, you might get troubles like elementor custom CSS is not working, or overlapping CSS issue on WordPress site, which is frustrating and also unhealthy for your website.

WP Social Ninja, the all-in-one social media plugin, introduced you with customizing social media feeds and social review widgets. But now, with the Custom style editor board, you can edit your styles of each element more precisely and effectively without any external help.

How it works

If you want to get the custom style editors panel of WP Social Ninja, it’s not complicated to find out where and how to start with. 

You will find it super easy to handle when you just normally step into the editor’s panel through the WP Social Ninja dashboard. We have an individual style editor for both social feeds and social reviews.

Let’s start with Social feeds;

Social feeds

First, select your social media platform to custom style your social feeds. Give your login credentials, and you are just ready to style the social feed template for your WordPress website.

For instance, if you want to custom style your Instagram feeds, go to the WP Social Ninja dashboard and connect your account with your login credentials.

Click on Add New Template to access the template editor section.

You will get two separate parts to edit your feed template, particularly; General and Style. To style your template, you must first enable your Style option. After enabling the button, you can see the options of the style editor.

Header

The Header is the first option you will get from this editor. This option enables you to style the header part of your template. You can edit the text color of your name from here.

And not only color, you have every accessibility to change the style of your Header. You have Typography option, where you can custom style the name you have on your Header. You can change size, weight, and keep it uppercase or lowercase. Also, you can decorate it exactly like you could do in your custom style CSS. 

You can choose your favorite style from the Decoration section with its dropdown options, including Underline, Overline, Line-Through, and more.  

Then again, you have User Name and number of posts in your Header part. As you have edited the username style, you can decide the bottom line spacing between the two line of the header.

And now, as you have made a few changes to the styles. According to the style, you may also want to edit your typographies mentioned as a number of posts. Check the Statistical Label.

Under the username, you have the post’s number. Keeping a match with your labels and theme color, you can style the numbers also. You will get options for a custom style that includes text color and typography options. 

Lastly, if you want a more customized feed in the header section, you are free to do that. You will get enough custom options for custom syle the Follow button and the header background.

Content

After the Header section, you have the Content part, where your description and hashtags are included in every post. 

Let’s see a demo from the Twitter feed;

Statistics

On the page you are putting your Twitter feed, you can choose any part of it to custom style editor. As you’ve edited the header part elements, you have one more part where you can add some modifications.

Your profile has posts, followers, and following numbers. In the Statistics option, you can customize them as well.

Popup Box

With WP Social Ninja, you have Popup Box option to present your Instagram feed nicely. It won’t make people go to another page to see the post in detail. 

However, you’ll also get custom style editor options for this function. You can change anything displayed on the popup screen, including the User Name, Post Description, Post Time, and Call to action button. 

Here is an example;

Pagination

If you want to display your Instagram posts according to a specific number and want your visitors to click on a button to see all posts, you can do that with the Pagination option.

The style editor panel will allow you to customize this pagination option. 

Let’s custom the background color and text color for the Pagination button;

Review Box

This option gives you a variety of features by which you can set the background color for the review box.

It works when you put your cursor on the image posts and see the post details without clicking on it. 

Social reviews

Next, you have Social reviews. Now, we will see how the style editor works for social media reviews. Enabling the Style option from the editor panel will give you plenty of custom style editor options that you can customize according to your wish.

Here you go!  

Header

First, you have Header. This will give you more than one or two options to adjust the Header of your reviews template. 

In this part of your template, you have Title, Rating, Rating number, and “Write a Review” button. Custom style editor allows you to choose each of them to edit each item specifically.

Reviewer Name

After the header section, your template contains reviews of your customers. If you want to customize the reviewer name, such as changing the color, increasing the font size & weight, and anything that looks nice with your template, you can do that.

Review Date

In the review boxes, date is also mentioned when the review has been written. It’s not that important to make changes to the review date; yet you have options here to do that. 

Besides editing the color, you have the typography option here to adjust the date size, weight, and line spacing text.

Title

This option is for custom reviews. If you have custom reviews for any platform and want to customize the style, you must first choose the Platform from the General editor part.

Now, to custom its style editor, enable the style option; you can find options for decorating your custom reviews and the Title here.

Content

This part contains the reviews that you got from your reviewers. Our custom style editor enables the options for customizing the color, typography, and spacing. 

Read More/Less

Do you want to change the Read More/Less anchor text? Your review text may contain a long-length texts, which are not always necessary to show fully. 

Our editor panel allows you to decide how long you want to keep the length of your reviews. And with Style section, you are able to custom the css for this anchor text as you want to.

Platform Name

Again, you have an option for changing your platform name and custom style for this. Under the Platform Name, you’ll get the option to modify the text’s color and styles according to your template design.

Badge

As you have seen, we have different template layout options in our editor panel; you would see you can set your template in Badge layout. 

This one gives your website a unique outlook for your review feeds. Not only that, you can have a style option to custom the style of this badge, including text color, rating number, ratings & the background.

For example, AliExpress badge template:

Notification

Notification Popup is another feature from WP Social Ninja that improves your marketing strategies by making your website more appealing; It also comes with different custom options in the custom style editor.

You can customize the style of each of the elements that are shown in the notification popup.

Pagination

Previously, with WP Social Ninja, you could paginate your reviews on multiple pages using the Pagination option (General setting).

The style editor panel will allow you to edit your pagination for the Read more/less button.

Review Box

And lastly, your social reviews style editor panel has Review Box. This is the part where you can use custom style your review box for all reviews.

Conclusion

Customizing feeds is an important element when you need to modify the feeds or reviews template for your website. But that’s not a big deal when you have the all-in-one social media solution that solves all your problems regarding styling the template.

In this blog, we’ve shown a few examples of platforms for custom style editor. But we have other platforms, too, provided by WP Social Ninja. We hope you will definitely love this new custom tool within the one social media plugin.

For more information and queries, join our Facebook Community. Also, stay in touch with us on Twitter, Facebook & YouTube.