Control or specify Cover height for individual pages

How do we control the cover height for separate pages? e.g. on First/Main Page I want its height = 80vh, one person page 1vh and on profile page 40 vh and on another page some different value. Can we specify it on individual pages or pagewise?

Currently I think either we can have it or not with fixed height for every pages. 

  • View
    615
  • More
Replies (7)

    • what I did was insert an image in the "key" for the current page "cover text". This way the size of the cover is dictated by the size of the image, nothing else. Also you can make the image resize with the size of the page with a bit off css. So if you have different images you want to place in the cover for individual pages the "key" text function works well, not sure if this is recommended by the devs, its just how I did it.

      • A

        Thank you George. I think on the first page, they have default image, which already is very Big size image (almost page ful). When you change the size from the settings using styles for the theme e.g. 30 vh or 300 vh it changes can you can see the image there. What I intended was to change cover size independent of image. I may not want to use image as background at all. Just some text heading or remove it from some particular page. So your method may work in changing its size, but what if I want to remove it completely and have just text as heading or not at all? The setting we have is either cover is on or off and of fixed size for every page.  

        • I see,

          I used transparent .png to get rid of the image or anything in there. Just have to specify the background color for the "cover".

          The png has to have the dims you want and youre done.

          • I am thinking about this also, I would like an example of using a key to do this, or modification of the scripts in the UNA files.

            • Hello Dannie Jackson !

              It seems George Sp meant to replace the "key" word directly with HTML image tag like <img src="image URL" />

              • Ok, I did try to change the cover height in the Customizer from 30hv to 10 hv and nothing happened.  I resized the cover after I made the change to see if that would work with the new setting and nothing happened there either.  I went looking in the files which is a massive job just to find the right template or script so far nothing but I will keep looking as I remember to do so from time to time.

                • The cover is placed to the divs with the class names like .bx-cover-gap and .bx-cover-wrapper. So you may add the Javascript code via Studio->Designer->Injections->Head field which will calculate the current "end of URL and insert it after .bx-cover-gap (like persons-home) and then edit the settings of .persons-home .bx-cover-wrapper as you need.

                  Login or Join to comment.