• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer
  • Skip to footer navigation
  • Services
  • Our Themes
  • Start a WordPress Blog
  • WordPress Hosting
WPArena

WPArena

WPArena covers all things related to WordPress: Themes, Plugins, Tutorials, Guides, Deals and Beginner tips.

  • News
    • Opinion
  • Tutorials
  • Reviews
    • Themes
    • Plugins
  • Comparisons
  • Collections
    • Education Themes
    • Genesis Child Themes
    • Best Responsive Themes
    • Medical WordPress Themes
    • Finance & Business Themes
    • Crowdfunding Themes
  • Resources
    • Inspiration
  • Deals
WPARENA » Tutorials

How to Create Special Text Areas with CSS in WordPress Post

TwitterFacebookWhatsAppGoogle+BufferLinkedInPin It

If you want to get attention of you blog reader in any particular post for certain text, you can create a frame or box for that special text. It is very simple and easy to create a boxes using some CSS.
Create a CSS class in your style sheet, so you can use it over and over again on the site. Lets make a class “right_box” beacuse I am making it float right of all other text. I could then make a class called “leftbox” for when I want the frame to float to the left.

In my CSS rule for rightbox I do the following:
float: right;
width: 200px;
margin-left: 15px;
border: 1px solid #FGFGFG;
padding: 10px;
background-color: #efefef;

After creating a rule in style.css, create a text box in your post. Switch to the HTML mode of Text Editor and define your class.

<div class=”txtbox”>and put your content and close the div tag </div>
and put your content and close the div tag

. Save your post and see the result as follow:

If you want to get attention of you blog reader in any particular post for certain text, you can create a frame or box for that special text. It is very simple and easy to create a boxes using some CSS.

You will not see div tags in Visual mode while editing the post, and you will not see the box effect because Visual mode does not display posts using the theme’s style sheet. However, you can verify the text is being controlled by the CSS rule by checking the status bar at the bottom left of the Text Editor while your cursor is anywhere in that text. It should say “path: div.right_box.”

 

Reference: WordPress® 24-Hour Trainer By George Plumley

You Might Also Like These Posts:

  • How to Create a Child Theme in WordPress
  • Why Your WordPress Comments Are Not Showing up
  • Getting To Know The WordPress Dashboard
  • How to display Content from a Single Category in WordPress
  • How To Make Your WordPress Blog More Readable
Noor Mustafa Raza

Noor Mustafa Raza

I am a WordPress Developer and Designer, author @WPArena. I am providing Free WordPress consultation and can help you to install WordPress in a secure way to small businesses and bloggers.

Previous Post How to Extend the WordPress Visual Editor with plugins
Next Post How to Add a Contact Form into WordPress 2019 Edition

Reader Interactions

2 Comments

  1. Noor Mustafa RazaKris says

    September 13, 2012 at 8:11 pm

    Hi,
    I’m having problem with adding thisto my post. Could you write step by step what should i Do ??
    Regards,
    Kris

    Reply
    • Noor Mustafa RazaWordpress Arena says

      September 15, 2012 at 8:36 am

      can you elaborate what issues you are having? so I can help you. As well I can fix this for you

      Reply

Leave a Reply Cancel reply

Thank you for choosing to leave a comment on WPArena. Please bear in mind that all comments are moderated according to our comment policy. Your email address will never be published but is required. Do NOT use keywords in the name field. First name is fine with us. Lets have a meaningful conversation and respect others opinions.

Primary Sidebar

Over 40,000+ Readers

Get fresh content from WPArena

Recent Posts

  • Careers That You’ll Actually Want To Be Stuck With For Life
  • What Marketing Do Customers Take Notice Of?
  • Ad-Maven Review: One of the best monetization tools out there
  • Four Best WordPress Plugins for Content Marketers
  • CometNine Review – A lesser known web host with great features

Our Services

WordPress
Installation
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store

Footer

About

WPArena is a premium online resource site of WordPress and is focused on providing excellent WordPress Tutorials, Guides, Tips, and Collections. The site design is updated at regular intervals with more features. Look here.
You can read more about WordPress Arena here.


WPArena Marketing Material

Resources

  • Best WordPress Plugins
  • WordPress Permalinks Structure
  • Email Management System
  • Envato Free Files

Reviews

  • Beaver Builder Review
  • Beaver Themer Review
  • WP User Frontend Pro
  • Ninja Forms Review
  • MemberPress Review

More Reviews »

Deals

  • Clickright Theme 30% OFF
  • Hostgator Coupon
  • ionMag Theme 30% OFF
  • OIO Publisher 20% OFF

More Deals »

© 2019 · WordPress Arena · All Rights Reserved.
We are not affiliated with Automattic or WordPress.

  • About
  • Advertise
  • Write for us
  • Disclosure
  • Terms
  • Privacy
  • Contact