Add Scroll Areas to WordPress Posts

I wanted to post some codes to several posts and set out to find ways to include longer code snippets on WordPress posts. Here are the steps I took to enable scrolling area for code snippets:

1. Go to your WordPress theme editor and either enable external style.css if not already enabled. I use tiga theme and had to enable the external style sheet.

2. Add the following code snippet to the style.css of your current theme

div.scroll {
  height: 200px;
  width: 300px;
  overflow: auto;
  border: 1px solid #666;
  background-color: #ccc;
  padding: 8px;
}

3. Then create a new post and paste the following in HTML mode

<div>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>
<span style="color: red;">This is red color</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>This is a normal paragraph.
<span style="font-weight: bold; font-size: 22px;">This is big bold text</span>
</p>
<p>This scrolling are can contain normal html like <a href="index.php">link</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>

This is a scrolling are created with the CSS property overflow.

This is red color
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.

This is a normal paragraph.
This is big bold text

This scrolling are can contain normal html like link

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.

Reference:

http://www.domedia.org/oveklykken/css-div-scroll.php

7 thoughts on “Add Scroll Areas to WordPress Posts”

  1. Very effectively written information. It is going to be worthwhile to anyone who usess it, including myself. Sustain the nice work – for certain i’ll take a look at extra posts.

  2. 攻めようにも勝手に進んでればやりようがないの。一応第三者機関の検査が基礎工事で1回入ってるはずなので それだけが頼りのような???

Leave a Reply to Pandora BRACELETS Cancel reply