Support » Theme: Agama Blue » How to change different header image for each page

  • Resolved minhluyen

    (@minhluyen)


    Hi,

    I would like to know are there a posibility for change header image for each page?

    Thank a lots!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hello,@minhluyen!

    Unfortunately, that option exists in the Agama-Pro theme only.

    Regards

    Thankyou! It is amazing theme anyway.

    Hi,@minhluyen!

    Here is the working solution for you:

    First, you need to find the specific page ID number on the page which you want to apply the custom logo image.

    to discover the page id, please follow the steps below :

    1. Navigate in your browser to the page you want to work with.
    2. Right-click on that page (anywhere) and select “Inspect Element“.
    3. Search inside the site’s markup for the body tag. It should be one of the first element in the source.
    You’ll see it has many classes. Look for the class that starts with “page-id-…”. That’s the class you should use.

    You can check THIS video guide

    then, Open the Customizing->General->Additional CSS
    and Copy/Paste the code below for every page you want to change the logo image and replace the page ID and URL to the image for each page.

    .page-id-2 #agama-header-image  {
     content: url('https://png2.kisspng.com/20180326/afe/kisspng-light-blue-aqua-azure-turquoise-header-5ab8e7333e7a15.2113121115220672512559.png'); 
    }

    Regards

    I found page id and add link like your guide, but it does not working
    .page-id-415 #agama-header-image { content: url (‘ https://res.cloudinary.com/fleurop/cmsimages2/content/newsletter/alles-ueber-blumen/valentinstag-rosenblaetter-header.jpg‘);}
    Error message: Expected RBRACE at line 2, col 49.
    Thank a lots for your solution.

    Hello,@minhluyen!

    In order to enable the Header images, first, make sure you have inserted the header image. (It can be any random image)

    https://prnt.sc/lsb4eb

    then copy/paste the next code into Customizing->General->Additional CSS:

    .page-id-415 #agama-header-image  {
     content: url('https://res.cloudinary.com/fleurop/cmsimages2/content/newsletter/alles-ueber-blumen/valentinstag-rosenblaetter-header.jpg'); 
    }

    Regards

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to change different header image for each page’ is closed to new replies.