Rounded V2 purple edition – can’t handle long posts

Seems fine to me! Care to be specific?

For me, that page looks like this:
https://blog.juliannayau.com/images/theme.jpg

Heres the prob:

#content .storycontent {
	background: url(img/csbbody-l.gif) no-repeat bottom left;
	margin: 0 0 0 0;
	padding: 5px 30px 31px 20px;
}

It seems the ‘background’ isn’t repeating vertically, change no-repeat to repeat-y so your new code will be:

#content .storycontent {
	background: url(img/csbbody-l.gif) repeat-y bottom left;
	margin: 0 0 0 0;
	padding: 5px 30px 31px 20px;
}

Thanks. I also had to make the following change:

#content .post{
	background: url(img/csbbody-r.gif) no-repeat bottom right;
	font-size: 100%;
	width: 100%;
	color: #4F402A;
	margin: 0 0 0 0;

}

to:

#content .post{
	background: url(img/csbbody-r.gif) repeat-y bottom right;
	font-size: 100%;
	width: 100%;
	color: #4F402A;
	margin: 0 0 0 0;

}

The problem is the background image includes part of the rounded corners, so I think I need to do some more tweaking to the theme.

After some more work, I managed to find the final fix.

Step 1:
Backup csbbody-l.gif and csbbody-r.gif (in the “img” folder).

Step 2:
Remove the bottom (rounded corner portion) of csbbody-l.gif and csbbody-r.gif

Step 3:
Using the backups from Step 1, create new csbbottom-l.gif and csbbottom-r.gif with the bottom (rounded corner portion).

Step 4:
In style.css, change:

#content .storycontent {
	background: url(img/csbbody-l.gif) no-repeat bottom left;
	margin: 0 0 0 0;
	padding: 5px 30px 31px 20px;
}

to

#content .storycontent {
	background: url(img/csbbody-l.gif) repeat-y bottom left;
	margin: 0 0 0 0;
	padding: 5px 30px 31px 20px;
}

Step 5:
In style.css, change:

#content .post{
	background: url(img/csbbody-r.gif) no-repeat bottom right;
	font-size: 100%;
	width: 100%;
	color: #4F402A;
	margin: 0 0 0 0;

}

to

#content .post{
	background: url(img/csbbody-r.gif) repeat-y bottom right;
	font-size: 100%;
	width: 100%;
	color: #4F402A;
	margin: 0 0 0 0;

}

Step 5:
In style.css, add:

#content .bottomright{
	background: url(img/csbbottom-r.gif) no-repeat bottom right;
	font-size: 100%;
	width: 100%;
	color: #4F402A;
	margin: 0 0 0 0;

}

#content .bottomleft{
			background: url(img/csbbottom-l.gif) repeat-y bottom left;
			margin: 0 0 0 0;
			padding: 5px 30px 31px 20px;
}

(this can be added anywhere; I put it at the end of the section with all the other content styling)

Step 6:
In index.php, add the following after <!– end STORYCONTENT –>

<div class="bottomright">
<div class="bottomleft">&nbsp;</div>
</div>