Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • September 25, 2018 at 9:21 am #1014065
    Cherukuri

    Dear Support Team

    I want to have a transparent header only on home page and all the internal pages should have a header with some color. I have managed to make the home page as with transparent header, how ever in other pages all the headers are having background color as white. I tried to set the background color for the header, but when i do this even on homepage the header color is visible.

    How can i have just the homepage with transparent header and remaining all the paged with normal header with background color?

    Thanks
    Sridhar

    September 25, 2018 at 10:39 am #1014099
    Rikard

    Hi Sridhar,

    Could you post a link to the page in question so that we can take a closer look please?

    Best regards,
    Rikard

    September 25, 2018 at 10:57 am #1014118
    Cherukuri

    Hi Rikard, here is the link

    Home Page link https://orange.co.tz/wifi

    if you goto above link the header is transparent which is the way i wanted

    if you goto internal pages like https://orange.co.tz/wifi/construction/

    The header is not transparent which is the way i wanted, but the header background color is white which i want to change to #1F3446

    But when i change the header color, even on the home page also the header color is visible

    I want the background color #1F3446 ion header area only for the internal pages

    Thanks
    Sridhar

    • This reply was modified 7 years, 5 months ago by Cherukuri.
    September 25, 2018 at 11:52 am #1014153
    Cherukuri

    Transparent Header Page https://orange.co.tz/wifi
    Internal Page https://orange.co.tz/wifi/construction/

    September 25, 2018 at 4:07 pm #1014254
    Victoria

    Hi Cherukuri,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    • This reply was modified 7 years, 5 months ago by Victoria.
    September 25, 2018 at 4:39 pm #1014273
    Cherukuri

    Hi Please see the below images

    1.png -> current homepage with transparent header
    2.png -> current internal page without transparent header and header bgcolor is white

    Now i need the 2.png header bgcolor as #1F3446

    But when i add the below in Quick CSS
    div#header_main { background-color: #1F3446; }

    My homepage is changing to 3.png
    But my internal page header bgcolor is perfect which i wanted 4.png

    My Requirement is
    Homepage 1.png
    Internal Page 4.png

    Sorry for my raw explanation but i hope you understood what i want to achieve

    Thanks
    Sridhar




    September 26, 2018 at 7:50 am #1014568
    Cherukuri

    Probably i am missing a little trick somewhere

    September 26, 2018 at 8:13 am #1014574
    Cherukuri

    I have managed, I left the homepage header as transparent and for the rest of the pages i set the header background color based on the page id

    .page-id-3581 #header_main{ background-color: #1F3446 !important; }
    .page-id-3574 #header_main{ background-color: #1F3446 !important; }
    .page-id-3731 #header_main{ background-color: #1F3446 !important; }
    .page-id-3745 #header_main{ background-color: #1F3446 !important; }
    .page-id-1167 #header_main{ background-color: #1F3446 !important; }

    I have achieved what i wanted. Not sure if this correct method or not but it worked.

    Thanks
    Sridhar

    September 26, 2018 at 10:45 am #1014641
    Ismael

    Hi,

    Yes, that is one way to change it but you can combine all of those css declarations into a single style rule.

    .page-id-3581 #header_main, .page-id-3574 #header_main, .page-id-3731 #header_main, .page-id-3745 #header_main, .page-id-1167 #header_main { background-color: #1F3446 !important; }

    You can also try this:

    #top:not(.home) #header_main { background-color: #1F3446 !important; }

    Best regards,
    Ismael

    September 26, 2018 at 11:06 am #1014660
    Cherukuri

    Fantastic, thanks Ismael, I used your code and worked perfectly.

    Please close this thread

    Thanks
    Sridhar

    September 26, 2018 at 1:53 pm #1014725
    Rikard

    Hi,

    Great, glad you got it working. I’ll close this for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Transparent Header only in home page’ is closed to new replies.