Profound Logic Forums

Posted: **Fri Feb 16, 2018 1:11 pm**

Hi,
Context: Rich display files in a Genie Session
I'm looking for a convenient way to display elements (titles or whatever) In Genie's header for example something like this:

: Genie_header1.png (10.71 KiB) Viewed 417 times

I know it is possible to set top: to a negative value, this does the trick but the elements are not visible anymore in Visual Designer.

Any suggestion for a more user-friendly way to achieve this ?

Thanks.

Posted: **Fri Feb 16, 2018 7:11 pm**

Hello vijo,

Thank you for writing in! There are a variety of ways to handle this! In the below image you can see that in the Visual Designer, you can use the Elements tab to select off-screen elements and change values or change it's position so that it's back in view for you to work with.

: OffScreenElements.png (11.14 KiB) Viewed 409 times

Another alternative would be to use custom CSS class, which you can add to the CSS file of your Genie skin, that sets the top property to the negative value so that when displayed in Genie, using that particular skin, the element will be positioned at the new top defined in that class. Example code:

Code: Select all

.genie-moved-it {
    top: -50px !important;
}

I added this to Hybrid.css using Genie Admin. The !important keyword is necessary in order to override the in-line positioning of the element. I would then add genie-moved-it to the css class property of the element I want to be moved when using the Hybrid Genie skin. This solution requires that this code be added to the CSS file of all skins you want this to happen in. The Visual Designer does not automatically pull in a Genie skin's CSS file, which is why this class won't apply while in the Visual Designer.

Additionally, JavaScript can be used to move the element by adding code to the onload event of the screen. Below is my example code:

Code: Select all

var movit = getObj("btn");
movit.style.top = "-50px";
console.log("I moved it.");

This, of course would have to be done for each object you would like to be moved.

I hope this helps! If you have any questions or concerns, please let us know!

Posted: **Sat Feb 17, 2018 6:42 pm**

Very helpful

Thank you

Profound Logic Forums

Put elements in Genie's page header.

Put elements in Genie's page header.

Re: Put elements in Genie's page header.

Re: Put elements in Genie's page header.