How To Add Custom Style Text Box Without Using Any WordPress Plugin

by Mike

wordpress-style-box

Today I am going to Show you How you can add a Custom Style Text Box on your WordPress blog Without Using Any WordPress Plugin.Using to To many WordPress Plugin can Hamper your WordPress website performance always look for an Alternate of any Plugin.

Custom-Style-text-Box

Add Custom Style Text Box Without Using Any WordPress Plugin.

As you notice that I am using a Style Text Box in  My WordPress posts.LIKE THIS

HI BUDDY HOW R U?

Here are  Two Simple step to Achieve this:-

1. Just open your Style.css and just Paste Below Code  in your Style Sheet.

“.textbox{color:#000;background:#e3f0f2 url(images/Style.png) left no-repeat;border:#6cc 1px solid;padding:10px 10px 10px 40px}a,.post .title a{text-decoration:none;color:#26a}”

2.Just Download any Style box image as i am using Sticky Image of size 32*32 Or 64*64 and upload in to  your Themes image folder.

Now Open your WordPress Post and Place the code on Word or Para Which u Wanted to Highlight.

wordpress-style-box-2

Here I am using Example word for Style Text Box.This code is not Working with h1,h2,h3,h4,h5 it work only with HTML STRONG or without Strong.You can  change Color According to your Blog Design.

Example

Now you know How Add Custom Style Text Box or Alert box Without Using Any WordPress Plugin.

Do share your opinion about this post.If u have any other Custom Style Text Box trick pls share with us in comment :)

Related Posts:

Share This Article

{ 22 comments }

vicky kumar

please check and tell what happened your tutorial is not working

Anuj Sharma

Vicky you need to upload textbox image to you image directory

Denisse

I am using a genesis theme – where in the stylesheet is it okay to place this code? The genesis stylesheet is categorized and I am afraid to place in the wrong section. Is at the beginning or end okay?

Thanks!

BTW: Does there have to be an image or can it just be a highlighted box?

Anuj Sharma

Denisse you can use this code anywhere at the beginning or end.yes there is a image for highlighted box,which you can download from any icon website.

Raja Ishaq

Hello Anuj…..
I have a problem…I need to get some traffic to my blog.. I tried every where but no results for keywords on google…
Kindly help me..

Anuj Sharma

just wait and watch try your lable best.

Nathan Rainmen

Thank you for sharing Anuj. I have been looking for a way to do this cleanly.
One question, how do you wrap the text around the background image so they do not overlap?
Thanks

Gautam A D

great! i will implement this right away on my blog! thanx! :)

mandy

Thank you. I am still trying to learn css so this is much appreciated Anuj.

mandy

what is the css code?

Anuj Sharma

hi,(Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language.)here it is css code. .textbox{color:#000;background:#e3f0f2 url(images/Style.png) left no-repeat;border:#6cc 1px solid;padding:10px 10px 10px 40px}a,.post .title a{text-decoration:none;color:#26a}

Tho Huynh@Blogging Tips

:) Great tip, especially for newbie like me. BTW, can you transform this tutorial for Genesis

Anuj Sharma

Hi,Thanks for comment.I dont think their much difference using this tutorial for Genesis,you just need to copy css code inside your style sheet and just upload image file to your image directory.

mandy

Thanks Anuj

mandy

I like the boxes, they are great, but how do you put the image in the box with the text? Your help is greatly appreciated.

Anuj Sharma

Hey mandy i using Snagit image capture for that.i written any thing on notepad and capture with Snagit .

Vernessa Taylor

Hi anujsharma, You are quite right in saying too many plugins can affect your site’s performance. I’d rather have alternatives and making your articles look good with CSS is my favorite way!

Thanks for sharing these nice-looking text boxes. I have written up some of the CSS tips and tricks I use in CSS Series for Serious Writers. I hope you find them useful.

BTW, thanks for dropping by my blog and leaving a comment. :)

anujsharma

Thanks Vernessa for dropping in yes why we use any plugin when a little code do it thing for us.

Sreejesh@techgyo

Thats very handy tip yeah.

anujsharma

Thanks Sreejesh :)

Praveen@Techperk

Good Tut Anuj bhaiya

anujsharma

Thanks Praveen :)

Previous post:

Next post: