You would need to use span tags to target that word and then add CSS –
HTML:
<span class-"firstword">Change</span> this first word.
CSS:
.firstword {
background-color: red;
}
I can’t seem to get this to work? :/
Can you post a link to your site where you have tried it? I’m assuming you have a Child Theme or custom CSS set up?
Looks like you have it twice in the HTML?
<span style="color: #555555;">
<span class=”firstword”>Change</span>
Or if you are using the visual editor, it might be doing that. You’ll need to stick with one editor or the other – and it you are going to use your own HTML, I think you have to do that in the TEXT editor.
Had it twice in the HTML, removed one though. But it’s still not working. Am i putting the code in the wrong place in style.css?
Look like there’s still a bunch of funny/extra code in there:
<span style="color: #555555;">
<code><span style="color: #555555;"> <span class=”firstword”>Change</span></code>
SKELLEFTEÅ
<strong>Morön vann med 3–2 hemma mot Robertsfors i senaste omgången.</strong>
Idag var det Strömsbergs IF på bortaplan som gällde i den tredje omgången. Morön hamnade i underläge redan efter fem minuter. Dan Cayford kvitterade efter 30 minuter men hemmalaget kunde ta tillbaka ledningen just innan paus.
</span>
<span style="color: #555555;">
Where are you making these changes to the content?
Also, where are you putting the CSS code? You don’t have a child theme, so are you using a Custom CSS plugin?
I don’t seem to understand this.. all that funny/extra code is because i put the <span class-“firstword”>Change</span> in the post itself, and i put the .firstword {
background-color: red;
} in style.css
Where exactly does <span class etc</span> go? Is it in the post or the style.css or where?
And where exactly does the .firstword-code go?
I have only been using WordPress for 2 days so i’m a total newbie, sorry.
No problem, that’s why we are here – I’m not sure why it’s doing that – unless you are switching between the visual and text editors or putting this code in the visual editor, possibly.
You need to use the TEXT editor for adding HTML code. There you would add the HTML part (<span class-"firstword">Change</span>) – obviously you’d change that to fit your text. Don’t switch between the editors before saving – it messes up the code – known issue 🙁 . (Yes, it’s annoying :). ) Update the page before switching to the other one.
This part
{
background-color: red;
}
goes in the CSS file BUT you really absolutely should not modify theme files – you are creating a big mess for yourself in doing so – all your changes will be lost when WP is updated and it’s also crucial to have a clean copy of the default theme for troubleshooting purposes.
So you need to first create a child theme or install a custom CSS plugin such as My Custom CSS.
Ok, i open up style.css as a textdocument and add the HTML part. Where exactly do i put <span class-“firstword”>Change</span> ?
No, the HTML goes in the content of your page in the dashboard – where you type in your text or add images or whatever. There are two editors – TEXT and VISUAL. Use TEXT.
lol so stupid of me, i didn’t notice you could switch between visual and text, ok now i’ve added it in the text. Now where exactly in the style.css do i put
{
background-color: red;
}
does it matter where i put it?
Btw about the child theme, I tried adding a child theme in a new directory called twentytwelvechild with style.css just like it says, but after a while WordPress said that it was broken when i made some changes in the original themes php-files, i don’t know what happened. It says i need a template, but when i add an index.php to the child theme, i still get an error.
You CANNOT modify the style.css file – at the very least add the plugin I mentioned above.
Or if you want help with a child theme, we can help you do that.
Thank you so much for all the help with the background color for the text, i finally got it to work! It was the thing that i could switch between visual and text that i had missed 🙂
About the child theme, how do i do that? Like i said, i have created a new directory called twentytwelvechild with style.css just like it says with @import url on the top and that works. But then when i make changes in the original theme’s .php, it stops working. And if i try to copy the information from the original theme .php to a new index.php for example and put in the child theme directory, i get an error then too :/
