Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 10, 2014 at 4:20 pm #234774
    peterd

    Hello Yigit,
    I saw your answer to Jansthh over his question: A client would like to have a header with a white background on the homepage and with a grey background on the other pages. Would that be possible?

    Now I have the following question: I think my website has 5 pages, and I would like to change at all pages the background color and the logo.
    For example:
    Home page: header background: white and logo: logo_white.png
    first page: header background: yellow and logo: logo_yellow.png
    second page: header background: red and logo: logo_red.png
    and so on….

    Is that also possible? And how can I fix that?
    Thank you so much
    Peter

    • This topic was modified 11 years, 3 months ago by peterd.
    March 10, 2014 at 7:59 pm #234932
    Yigit

    Hi peterdrolenga!

    You can add following code to Quick CSS and change page ID’s to match your pages

    .home #header_main { background: yellow; }
.page-id-1122 #header_main { background: red; }
.page-id-912 #header_main { background: blue; }

    You can right click on Chrome or Firefox to inspect elements to find page ID’s http://i.imgur.com/HyPTCRg.jpg
    It will change the color of header of pages. You can add your logos manually in Appearance > Editor > Header.php file inside a Div with custom class such as .logo_white and add following code to Quick CSS to remove certain logos on certain pages 

    .home .logo_yellow, .home .logo_red { display: none; }
.page-id-1122 .logo_white, .page-id-912 .logo_red { display: none; }

    Best regards,
    Yigit

    March 11, 2014 at 12:12 pm #235417
    peterd

    Hi Yigit,
    Thanks for your quick reply! It works very good!!!

    Is it also possible to change the Font color for links, dropcaps and other elements and Secondary color for link and button hover, etc of the different pages?

    Thank you so much
    Peter

    March 11, 2014 at 3:04 pm #235502
    Yigit

    Hi!

    Yes it is possible. You can use following code as an example

    .page-id-912 .main_color a { color: blue !important; }
.page-id-912 .main_color a:hover { color: yellow !important; }
.page-id-912 .alternate_color a:hover { color: green !important; }
.page-id-912 .alternate_color a { color: red !important; }

    Regards,
    Yigit

    March 13, 2014 at 11:35 am #236815
    peterd

    Hi Yigit,

    It works! thanks a lot!!

    Of course another question:) I am sorry.
    Is there an option to change te color when you selected some text with your mouse?
    I tried this but didn’t work: .page-id-2877 .selected_text { color: #FF3366 !important; }

    And there is also a contact form on that page with a button. Can I change that too on the same way?
    And of course the same problem with text marked as bold .

    Thanks a lot

    March 13, 2014 at 12:29 pm #236849
    Yigit

    Hi!

    Please add following code to Quick CSS and adjust as well

    .page-id-2251 .main_color input[type='submit'] { background-color: #734854; color: #ffffff; border-color: #512632; }
.page-id-2251 .main_color input[type='submit']:hover { background-color: red; color: #ffffff; border-color: red; }
.page-id-2251 .main_color strong { color: orange; }
.page-id-2251 .main_menu ul:first-child > li.current-menu-item > a { color: red; }

    Cheers!
    Yigit

    March 13, 2014 at 7:18 pm #237131
    peterd

    Hi Yigit,
    Thanks!! it works also very well!
    .
    Only this is not what I mean:
    .page-id-2877 .main_menu ul:first-child > li.current-menu-item > a { color: red; }
    I mean this: http://www.peoplesupply.nl/Example1.jpg Is that possible?

    Other problem what I can’t fix: http://www.peoplesupply.nl/Example2.jpg
    Have you any idea to fix? Something with gradiënt or something like that?

    Thanks

    March 14, 2014 at 1:39 pm #237602
    Yigit

    Hi!

    Please use following code
    1-

    .page-id-2877 ::selection { background: red; }

    2-

    .page-id-2877 .main_menu ul:first-child > li > a { color: white; }

    Regards,
    Yigit

    March 25, 2014 at 6:27 pm #242924
    peterd

    Thansk!!! works very well!!

    March 25, 2014 at 6:28 pm #242927
    Yigit

    Hi!

    You are welcome Peter, glad we could help! Let us know if you have any other questions or issues

    Regards,
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Different color / logo of the header on different pages’ is closed to new replies.