Requirement:
Say you have two paragraphs
Paragraph 1 content. . . Paragraph 1 content. . . Paragraph 1 content. . . Paragraph 1 content. . . Paragraph 1 content. . . Paragraph 1 content. . . Paragraph 1 content. . .
Paragraph 2 content. . . Paragraph 2 content. . . Paragraph 2 content. . . Paragraph 2 content. . .Paragraph 2 content. . .
Requirement is to have different back ground color for both the paragraphs . . it s easy if you have only two paragraphs but in practical purpose a page may contains 10-15 paragraph and then arises the problem.
Codes:
The idea is to add a division class before each paragraph. An odd class before odd paragraphs and even class before even paragraph.
<?php
function replace_different($search,$replace,$content) {
$occs = substr_count($content,$search);
$last = 0;
$cur = 0;
$data = '';
for ($i=0;$i<$occs;$i++) {
$find = strpos($content,$search,$last);
$data .= substr($content,$last,$find-$last).$replace[$cur];
$last = $find+strlen($search);
if (++$cur == count($replace)) {
$cur = 0;
}
}
return $data.substr($string,$last);
}
echo replace_different('<p>',array('<p class="podd">','<p class="peven">'),$content);
?>
Now define peven and podd in your base.css file
p.peven{
display: block;
background:#FFF;
border-bottom: 1px solid #D5DFD2;
border-top: 1px solid #CCC;
padding-bottom: 18px;
padding-top: 18px;
padding-left: 10px;
padding-right: 10px;
margin: 0;
}
p.podd{
display: block;
background:#EDF1F3;
border-bottom: 1px solid #CCC;
border-top: 1px solid #CCC;
padding-bottom: 18px;
padding-top: 18px;
padding-left: 10px;
padding-right: 10px;
margin:0;
}
Post new comment