Chage logo and primary colour in some pages

Hi, I want to change the logo and the primary colour only in 4 page, (diferent logo and colour that used by default), it’s posible?
Thanks

Dear Victor,

Thank you for reaching out to us here.

It can be achieved by applying the following custom CSS code. Replace .page-id-2 with .page-id-<strong>PageID</strong>. You can find the PageID while you are editing a page. In the address bar of the web browser you will see something like: yoursite.com/wp-admin/post.php?post=2&action=edit. Where 2 is the page ID of the current page.


/* Change default logo */
.page-id-2 .site-header .col-md-4 a{
  display: inline-block;
  width: 189px;
  height: 100px;
  background-image: url('http://yoursite.com/path/to/your-logo.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.page-id-2 .site-header .col-md-4 a img{
  display: none;  
}  

/* Change default navigation link color */
.page-id-2 #mainnav ul li a{
  color: #fff000;
}

You can apply the custom CSS code as seen above through the Simple Custom CSS plugin or child theme’s style.css. So it won’t be lost once you update the theme.

I hope this reply helps.

Regards,
Kharis

Hi Kharis,
First of all, thanks for your fast reply. On second had sorry form my spanglish :slight_smile:
The solution you gave me works perfectly. I still have 3 questions for yourself.
1.- if I want to modify 4 pages do you need to type all 4 times one for each page ID? Can you do something like this?

/* Change default logo */
.page-id-610,540,534 .site-header .col-md-4 a{
display: inline-block;
width: 189px;
height: 100px;
background-image: url(‘http://osaljarafe.es/wp-content/uploads/2016/10/Logo-OSJA-V3.png’);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}

2.- I have a button on the page that has not changed color Will I have to change the color in some other attribute?
3.- I modified the css using the plugin, works great, but could you send me a link to a manual that is displayed as creating a child theme?

Thanks again!

Dear Victor,

Thank you for the followup.

> 1

If you want to apply the same style on other pages, you should do something like this:


/* Change default logo */
.page-id-610 .site-header .col-md-4 a,
.page-id-540 .site-header .col-md-4 a,
.page-id-534 .site-header .col-md-4 a{
  display: inline-block;
  width: 189px;
  height: 100px;
  background-image: url('http://yoursite.com/path/to/your-logo.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

> 2

What button did you mean? Could you please share the link where I can see it directly?

> 3

You can study the tutorial on these links:

We have a pre-made child theme for Sydney Pro already. You can get it here.

Regards,
Kharis

Hi, thanks again:

http://gofile.me/2MjIJ/cytzd7qzt
http://gofile.me/2MjIJ/CjUeq90HD

Here you have 2 examples.
Regards!

Hello there,

Thank you for updating me.

Please follow the solution posted on this thread.

To change the back to top button color, add the following custom CSS code:


/* Normal state */
.go-top{
  background-color: #fff000;
  color: #ff0000;
}

/* On hover state */
.go-top:hover{
  background-color: #000;  
}  

Regards,
Kharis

Hi Kharis, thanks one more time.

We can assume solved the issue of the button.
But when I change the default attribute navigation link color, the effect is not expected (Example3). The color I want to change is the one that is surrounded not the color of the letters, but if I want to change the color of the letters when you pass the mouse over (Example 5).

One more question I wanted to ask you. I need to change the header image (example 4) in the same pages that have changed the logo, you can tell me the code that I have to use?

You can see all images here https://www.dropbox.com/sh/eod6um9595xtys1/AABUN4jhfB0oiQqkWSashMzpa?dl=0

Im looking forwards. Best regards!

Hello there,

Please try this code:


.page-id-610 #mainnav ul li a:hover{
  color: #fff000;
}

.page-id-610 #mainnav .sub-menu li:hover > a {
  background-color: #fff000;
}

To change the header image on certain page, you can enable the “Featured header image - Wide” template in the “Page Attritbutes” metabox. Then set a featured image.

Regards,
Kharis

Hi, sub-menu works fine. But the first one modify all text when mouse are over. I need modify only menu text, no submenu, because if submenu text also is pink is not possible to see when the mouse are over.

On second hand I have enabled featured header but I don´t know how set a featured image.

Thanks, regards.

Solved featured image sorry, it was on cache

When I select Featured image apears page tittle page and a white bars (Example 6 and example 7). I have used this to hide the title, but I don’t know how disable the white bars.

.page-id-610 .hentry .entry-header {
display: none;
}

Thanks a lot.

Hello there,

Thank you for the followup.

To globally remove those spaces on the “Featured header image – Wide” template, try adding the following CSS code:


.page-template-page_single-header-wide .page-wrap,
.page-template-page_single-header-wide .page-wrap .content-wrapper{
   padding-top: 0;
   padding-bottom: 0;
}

.page-template-page_single-header-wide .content-area .hentry{
   padding-bottom: 0;
}

.page-template-page_single-header-wide .entry-header,
.page-template-page_single-header-wide .entry-footer{
   display: none;
}

Regards,
Kharis

Hi Kharis, problem solved, thankyou very much.

We can only fix this:

“Hi, sub-menu works fine. But the first one modify all text when mouse are over. I need modify only menu text, no submenu, because if submenu text also is pink is not possible to see when the mouse are over.”

Im looking forwards. Best regards!

Try this code, please.


.page-id-610 #mainnav ul.menu > li > a:hover{
  color: #fff000;
}

.page-id-610 #mainnav .sub-menu li:hover > a {
  background-color: #fff000;
}

Regards,
Kharis

Thank you very much for your help, everything is perfect.

Hi one more time. This code are correct??

/* Normal state submit contacto-OSJA */
.page-id-534 .submit{
background-color: #e50093;
border-color: #e50093;
color: ffffff;
}

/* On hover state submit contacto-OSJA */
.page-id-534 .submit:hover{
background-color: #f9b72a;
border-color: #e50093;
color: #e50093;
}

Solved :slight_smile:

/* Normal state submit contacto-OSJA */
.page-id-534 .wpcf7-submit{
background-color: #e50093;
border-color: #e50093;
color: ffffff;
}

/* On hover state submit contacto-OSJA */
.page-id-534 .wpcf7-submit:hover{
background-color: #f9b72a;
border-color: #e50093;
color: #e50093;
}

Great! I am glad to know that you have been able to manage it. 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