Change background posts

  • Resolved crystalm36

    (@crystalm36)


    8 years, 4 months ago

    Is it possible to change the background color and font colors on the posts and keep the pages the same color?
    Thanks for any help given

Viewing 15 replies - 1 through 15 (of 17 total)

  • Yes. I take it you are referring to single post pages (i.e., a page which shows the content of one post) as opposed to a blog/index page which shows multiple posts. The <body> element will be assigned different class names depending upon what type of page it is. For single post pages, the class name you want to use is single-post. So if you wanted to write some CSS to change the background color, you would include .single-post as the first part of the selector and the rule would then only affect single post pages.

    Do you have a specific color in mind for the background, or do you know what text you want to change the color of? If you post a link to your site, I can give you more specific suggestions.

    Thread Starter crystalm36

    (@crystalm36)

    O thank you for helping, here is my website:
    https://www.getalifemedia.com/mobile/

    I know it looks odd viewing as a webpage, but I’m trying to design it and use it as an app.

    The single posts that I will need to be changing will be audio and video pages.

    I was thinking of playing around with the colors and going dark background, on those pages maybe this color #231F20 and probably white text.

    For the audio & video posts, the body element will have a class assigned to it called single-format-audio or single-format-video. So to change the backgrounds of those two types of posts, you can add a rule like this:

    .single-format-audio #content,
.single-format-audio #content .hentry,
.single-format-audio #content .hentry header,
.single-format-audio #content a,
.single-format-video #content,
.single-format-video #content .hentry,
.single-format-video #content .hentry header,
.single-format-video #content a {
   background-color: #231F20;
   color: #fff;
}

    You’ll want to use a Custom CSS plugin like Jetpack or Custom CSS Manager. Don’t make changes to any of the theme’s files directly or your changes will be lost the next time you update the theme.

    Thread Starter crystalm36

    (@crystalm36)

    O great thanks! I will try this and get back with you if this worked.

    Question about the template. I have already edited the original template. I did this before I knew not to. Could I make a copy of the Twenty Fourteen folder and rename it to Twenty Fourteen Child and Upload it to my server then edit the child template? And when WordPress does an update and if they changed anything in the fourteen template then nothing will be lost because I am using the child template?

    I would not copy over all of the files from the parent Twenty Fourteen folder. Otherwise, your site will not experience any changes from any updates. I would create a child theme folder and copy over only the files which you have changed.

    Yes, when WordPress updates the Twenty Fourteen theme, your child theme files will be safe.

    Thread Starter crystalm36

    (@crystalm36)

    I’m confused, then how does WordPress use the child theme? Do I select it? I’m very confused by the concept of child theme.

    Do I take the two files that I had changed, the css and category files and copy it and put it over into a Twenty Fourteen child folder then what should I do?

    Thanks for your help

    Did you look at the instructions here? When you copy over your style.css file, you want to add a header at the very top like in the example. If you named your child folder twenty-fourteen-child, then the Text Domain will be twenty-fourteen-child.

    Once you do that, you should see your child theme as one of the available themes when you go to Appearance → Themes from the admin dashboard. Activate your child theme, and then WordPress will begin to use your child theme. Any file that is not found in your child theme will be read from the parent theme folder.

    Thread Starter crystalm36

    (@crystalm36)

    Ok a few more questions:
    1. The name I used was twentyfourteen-child so the text domain would be twentyfourteen-child is this correct?

    2. And do I need to change the Author URI: https://www.ads-software.com/ to my site? I’m confused by that one because that is what is showing on my original css file.

    3. After I have my css file, do I make a folder in /wp-content/themes called twentyfourteen-child and then add the new css file that I created along with the function.php Am suppose to make any changes to the function.php file?

    4. If after I have done all the steps above then I go into appearance and themes and active my child theme. Are there any additional steps that I am missing?

    I sort of got lost on reading that link. So this is what I gathered I should do and wanted to make sure this is what needs to be done before I do it.

    Thanks for your patience on this.

    1. Yes.
    2. You don’t need to change the Author URI. It’s more for theme authors so that their users will know where to go for support.
    3. Yes, make a folder called twentyfourteen-child and add your style.css and functions.php files to it. The style.css file ideally should only contain the CSS rules which you have modified or added. There are some people who copy in the whole parent style.css file, but that might interfere with any updates from the theme author (although usually that’s not that critical).

      For functions.php, don’t copy over the parent functions.php but create your own, because WordPress will call in the parent functions.php in addition to your child theme’s functions.php. You want to enqueue the parent stylesheet as shown in the example. In fact, you can just copy the example as shown. You may also need to enqueue the child theme’s stylesheet as well (the second example). To find out, activate the child theme, then do a view source on your site and see if the child theme’s style.css file is being linked in.

    4. That’s about it.
    Thread Starter crystalm36

    (@crystalm36)

    Ok if I have to do the second is it an either or to add? Like can I do the first function php example then add the second example? Or do I only use one of them?
    Thanks

    Thread Starter crystalm36

    (@crystalm36)

    I keep getting this error:
    Warning: Cannot modify header information – headers already sent by (output started at /home/getalife1/public_html/mobile/wp-content/themes/twentyfourteen-child/functions.php:3) in /home/getalife1/public_html/mobile/wp-includes/pluggable.php on line 1167

    Thread Starter crystalm36

    (@crystalm36)

    That’s ok I think I got it… I went and reloaded some things I had made changes to and it’s working now
    Thank you!

    Thread Starter crystalm36

    (@crystalm36)

    Nope I am still experiencing errors
    I keep getting this one, does this make sense to you?

    Warning: Cannot modify header information – headers already sent by (output started at /home/getalife1/public_html/mobile/wp-content/themes/twentyfourteen-child/functions.php:3) in /home/getalife1/public_html/mobile/wp-includes/pluggable.php on line 1167

    Thread Starter crystalm36

    (@crystalm36)

    I had a couple of spaces above my <php so that fixed it.
    Thanks for your help

    Thread Starter crystalm36

    (@crystalm36)

    Ok CrouchingBruin,
    I was able to change everything you said with the css above. But I wanted to make the title white on this page:
    https://www.getalifemedia.com/mobile/science-statistics-say-so/

    I wanted the 6 – Science & Statistics Say So to be white font

    I can’t get it to change. I know that the colors haven’t changed none on this but it has changed on my app. I used this to change it:

    .single-format-audio #content,
.single-format-audio #content .hentry,
.single-format-audio #content .hentry header,
.single-format-audio #content .entry-content,
.single-format-audio #content .entry-title,
.single-format-audio #content .featured-content .entry-title,
.single-format-audio #content a,
.single-format-video #content,
.single-format-video #content .hentry,
.single-format-video #content .hentry header,
.single-format-video #content .entry-content,
.single-format-video #content .entry-title,
.single-format-video #content .featured-content .entry-title,
.single-format-video #content a {
   background-color: #3D3A38;
   color: #fff;
}

    Have any ideas what to do?
    Thanks!

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Change background posts’ is closed to new replies.