How can I style "the_content" in my blog? Just the text, not the whole post

Hey,

You could just set it to work on all of you paragraph text like

.backgroundtext p {
font-family:Tahoma, Arial;
font-size:11px;
background-color: #e5e3d9;
padding-top: 4px;
padding-right: 5px;
padding-bottom: 4px;
padding-left: 5px;
line-height: 25px;
margin-bottom:1px;
color:#4413c;
}

I tried using that css with this:

<p class="backgroundtext"><?php the_content('CONTINUE READING &raquo;'); ?></p>

But the text of the entry still remains unchanged unfortunately. It is still in the default plain black Time New Roman font.

Any other ideas? :-\

I’m guessing I can’t just wrap the_content php in coding to do this. Is there any other code I can use in order to edit the body of my blog posts with css?

Try using <div class="backgroundtext"><?php the_content('CONTINUE READING &raquo;'); ?></div>

I’ve tried that, but it gives the whole DIV the background color. I’m attempting just to have a background behind the text itself, kind of like a highlight of the text.

I’ve been reading around and I don’t think there is any solution to this. Unless there is another way to pull the content from the blog, because I don’t think you can format just the text-background i using “the_content.”

I’ve tried that, but it gives the whole DIV the background color. I’m attempting just to have a background behind the text itself, kind of like a highlight of the text.

You have to target elements inside the div, not the div itself.

I’ve been reading around and I don’t think there is any solution to this. Unless there is another way to pull the content from the blog, because I don’t think you can format just the text-background i using “the_content.”

Yes, there is.

Assuming your markup looks like:

<div class="backgroundtext">
<?php the_content(); ?>
</div>

Your CSS declaration would look like this:

.backgroundcolor * {
     background-color: green;
}

That will set the background-color to “green” for every element inside of the div, but not to the div itself.

If that still doesn’t work, then you need to add specificity to your CSS declaration.

That’s close, but not exactly what I’m looking for. I want to be able to see the background between the lines since I have a pretty big line-height. I dont want the whole text area to have a background, just behind the words. In other words, I won’t want the background to have a fixed width. I want the background color to stop when the words stop.

Here’s a picture showing what that CSS declaration does, in comparison to what I am trying to achieve: https://i51.tinypic.com/2j4uez7.jpg.

Right; you should probably invest some time studying CSS, such as at w3schools.com and other places that provide great tutorials.

If you want just the paragraph text to have a background, perhaps try:

.backgroundcolor p * {
     background-color: green;
}

It’s also helpful to examine the markup and style declarations of the site you’re trying to emulate.

In this case, the site puts the paragraph text inside a <span> tag, and targets that span, or, something like:

.backgroundcolor p span {
     background-color: green;
}

So you could try that, too. But you’d have to put all of your paragraph text inside of <span> tags.

Neither

.backgroundcolor p * {
     background-color: green;
}

nor

.backgroundcolor p span {
     background-color: green;
}

did anything to format the text. There wasn’t a green background behind anything. I’ve tried everything with each code.

<p class="backgroundcolor">
<?php the_content('<p>CONTINUE READING &raquo;'); ?>
</p>

<div class="backgroundcolor">
<?php the_content('CONTINUE READING &raquo;'); ?>
</div>

<span class="backgroundcolor">
<?php the_content('<p>CONTINUE READING &raquo;'); ?>
</span>

I have no idea what to do.

This one is the correct markup:

<div class="backgroundcolor">
<?php the_content('CONTINUE READING &raquo;'); ?>
</div>

To do what your reference site is doing, your content – i.e. what you put into to Post Editor – needs to be marked up like this:

<p><span>lorem ipsum this text will have a green background.</span></p>

And your CSS declaration:

.backgroundcolor p span {
     background-color: green;
}

If that doesn’t work, you will need to increase your specificity.