You are viewing limited content. For full access, please sign in.

Question

Question

WebLink Welcome Page Logo Customizations

WebLink Web Customizations How To
Updated May 23, 2016
asked on May 19, 2016

Hi,

I have a couple questions on how to customize the WebLink Welcome page.  I've looked in the Welcome.aspx file to see where I could make these changes but have not been successful in finding answers or any posts on here regarding these customization.

- How can I center the main logo on the Welcome page?

- Also, is there a way to add a background image/watermark to the Welcome page?  I know we can add images to the Welcome page but everything I add seems to be locked to the left hand side.

Thank you!

0 0

Replies

replied on May 20, 2016

Hi Lana,

To center the main logo on the WebLink welcome page you can add this to the bottom of the file C:\Program Files\Laserfiche\WebLink\Web Files\WebLinkStyles.css:

.TopBar {text-align: center;}
#WelcomeIcon {position: static;}

To horizontally center the welcome banner background relative to the page content is a little more complicated:

#WelcomePageMainContent div[class^="WelcomePageBanner"] {
    left: 50%;
    transform: translate(-50%,0);
}

To center the welcome banner background relative to the page content (both directions):

#WelcomePageMainContent div[class^="WelcomePageBanner"] {
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

And to center it relative to the screen (so it stays centered like a watermark even if the Welcome page foreground content scrolls), add the position: fixed value:

#WelcomePageMainContent div[class^="WelcomePageBanner"] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

This might not work on some older browsers, should work on at least IE 11+ and Firefox/Chrome.

Hope this helps!

2 0
replied on May 20, 2016

Some caveats I thought of after posting:

Note that with the above changes to center the logo, that will also center the logo on "My WebLink", not just the Welcome Page.

If this is desirable, you can add the following to make the left navigation bar look nicer:

.ltr .NavMyWebLink {left: 20px;}

Otherwise replace the first code block in the parent post with the following:

.WelcomePageBackground .TopBar {text-align: center;}
#WelcomeIcon {position:static;}

This will make the centering only apply to the Welcome Page but not to other pages.

0 0
replied on May 23, 2016

Thank you for this James, they worked like a charm!

0 0
replied on May 20, 2016

Hi Lana,

To center the main logo on the WebLink welcome page you can add this to the bottom of the file C:\Program Files\Laserfiche\WebLink\Web Files\WebLinkStyles.css:

.TopBar {text-align: center;}
#WelcomeIcon {position: static;}

To horizontally center the welcome banner background relative to the page content is a little more complicated:

#WelcomePageMainContent div[class^="WelcomePageBanner"] {
    left: 50%;
    transform: translate(-50%,0);
}

To center the welcome banner background relative to the page content (both directions):

#WelcomePageMainContent div[class^="WelcomePageBanner"] {
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

And to center it relative to the screen (so it stays centered like a watermark even if the Welcome page foreground content scrolls), add the position: fixed value:

#WelcomePageMainContent div[class^="WelcomePageBanner"] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

This might not work on some older browsers, should work on at least IE 11+ and Firefox/Chrome.

Hope this helps!

You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...