Change Post and Page backround Color in Sydney

I wish to make the background color of pages, posts, projects, etc #c6cx6c6.
I can change rows, and widgets, but can not see how to change the entire page or post.

Hello there,

You can use the below CSS code:


.page {
  background-color: #fff000;
}

.single-post {
  background-color: #fff000;
}

.single-projects {
  background-color: #fff000;
}

.single-employees {
  background-color: #fff000;
}

.single-clients {
  background-color: #fff000;
}

.single-services {
  background-color: #fff000;
}

.single-testimonials {
  background-color: #fff000;
}

To apply it to your site, add it into Appearance > Customize > Additional CSS in your site dashboard.

Regards,
Kharis

Getting close to what I want but still leaves a white boarder around all pages and posts.

White boarder left around the top and sides and bottom of posts, simular to pages

Hello there,

You’ll need to add the below CSS code:


#secondary,
.comment-body,
.page-wrap .content-wrapper { 
  background-color: transparent;  
}  

Regards,
Kharis

Perfect!

Thanks for all of the assistance.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Dear Mas Kharis, please advise css or how to widen (resize) the size of the post (single post) box without reduce of sidebar. Please help and advise

Thanks dear

Dear Kharis Hello,
Thank you very much for all the above instructions.
They’ve been really very useful to me.
Still I have one question: Is it possible to add a line
and give a different backround color to each page with the page ID?
Thanks in advance, hoping for an answer.
Best regards,
Constantin from Paris, France

Hello there,

To target CSS code to specific page, you can use .page-id-1167 class name selector, where 1167 is the page ID number.

To implement with the above code, it’ll look like this:

    .page-id-1167 #secondary,
    .page-id-1167 .comment-body,
    .page-id-1167 .page-wrap .content-wrapper { 
      background-color: transparent;  
    } 

I am sorry, I don’t get it. Which part/section you’d like to add a line on?

Regards,
Kharis

1 Like

Hi Kharis,
Thank you again!!! I believe I’ve learned a lot from all your answers in the different posts about the Sydney theme. I honestly believe that your CSS solutions are the best.
I would like to ask you two last questions.

  1. Is it possible to take out the button of the front page? (I only use one slide)
  2. Is it possible to give another link to the logo (because it brings you back to the main home page by default)
    in the case of another page, that I don’t want if somebody clicks on the logo to get back home but instead to lead in another page.
    I hope you understand what I’m trying to explain.

Anyway thanks again for all your fully helpful tips.
Best regards, Constantin

Hello there,

1

To do that, you can leave empty the button URL and text options in Appearance > Customize > Header area > Header Slider > CALL TO ACTION BUTTON.

2

Try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

      if( $('.site-logo').length ) {
        var link = 'https://yourlink.com';
        $('.site-logo').parent('a').attr('href', link);
      }

    })(jQuery);
  1. Update

Regards,
Kharis

1 Like

Hi Kharis,
Thanks for answering to me so quickly.
Your JavaScript worked fine!
And the button disappear!!!
I did not wanted a button on the front page slide,
I just want the whole image of the slide to have a link that leads to #primary,
so if the visitor clicks anyware on the first page image (except the menu)
then it scrolls down to the #primary
So how can I add a link to the slide?
You can have a look to my main home page, if you have the time,
https://constantin-dourountzis.com/

I hope you understand what I need to achieve.
Thank you any way for your kindness
Best regards,
Constantin