How do I add a custom logo to the sign in page?

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
User avatar
shasta59
AppGini Super Hero
AppGini Super Hero
Posts: 231
Joined: 2013-01-08 19:40
Location: Calgary, Alberta, Canada

How do I add a custom logo to the sign in page?

Post by shasta59 » 2013-01-19 23:07

If you are wondering how to add a logo to the sign in page here is how to do it.

In the login.php file, opened in your favourite text editor look for the following:

<div id="login-splash">
<!-- customized splash content here -->
</div>


Add the logo in here. Here is how mine looks afterward. You will have to play with the size attributes to get it to look right.

<div id="login-splash">
<!-- customized splash content here -->
<img src="yourlogo.png" width="305" height="189" />
</div>

I use png but do not see why jpg or gif would not work for you. Add this line, then upload and see how it looks. You may need to change the size based upon what you are looking for. This will give you a logo to the left of the sign in box. Remember, to keep the ratio for your image correct so it does not look funny. You do not need to use an image and can put in your own code but I find a image file the easiest to use and get done quickly.

Again, save all files before making changes so you can quickly revert if you need to.

Alan
Calgary, Alberta, Canada - Using Appgini 5.50 -

Nicolas
Veteran Member
Posts: 43
Joined: 2015-12-08 08:08
Location: Barcelona
Contact:

Re: How do I add a custom logo to the sign in page?

Post by Nicolas » 2016-02-09 09:17

Thank you for the hint... it worked for my app!!!

peebee
AppGini Super Hero
AppGini Super Hero
Posts: 352
Joined: 2013-03-21 04:37

Re: How do I add a custom logo to the sign in page?

Post by peebee » 2016-02-09 10:06

As Appgini current version is now loaded with Bootstrap, to make your logo responsive rather than a fixed width and height, add the Bootstrap responsive image class

<img src="your_logo.jpg" class="img-responsive" alt="my Logo" />

Ref: http://www.w3schools.com/bootstrap/boot ... images.asp

Post Reply