Customize header (company logo) within the bootstrap navbar

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
JEngels
Posts: 17
Joined: 2014-03-10 14:16
Location: Germany

Customize header (company logo) within the bootstrap navbar

Post by JEngels » 2014-09-22 17:25

Hi to all,

working on a project I've a next question:
How to insert an image (logo) within a bootstrap theme above or within the navbar?
Using the header.php for own header-stuff places them below the navbar. That's not a good solution at all.

Thanks in advance.

Koepi

JEngels
Posts: 17
Joined: 2014-03-10 14:16
Location: Germany

Re: Customize header (company logo) within the bootstrap nav

Post by JEngels » 2014-09-29 13:08

Meanwhile found a solution for the bootstrap theme:

Change following within bootstrap.css:

1. Place an image bevore Glyphicon-home (Home-icon)

.glyphicon-home:before {
content: url("path/to/imagefile.png") " " "\e021";
}

2. Finetuning high of navbar (depends on size of your image; find the best values with firebug bevore changing css):

.navbar-brand {
float: left;
padding: 10px 50px 10px 15px;
font-size: 18px;
line-height: 20px;

3. Finetuning beginning of body (also use firebug to try):

body {
margin: 15px 0px 0px 0px;
}

The bootstrap.css will not be overwritten by compiling the project again.
So no need to care of it anymore.

Have success!

JEngels
Posts: 17
Joined: 2014-03-10 14:16
Location: Germany

Re: Customize header (company logo) within the bootstrap nav

Post by JEngels » 2014-09-29 13:40

... and the result:
Attachments
logo_bootstrap.png
the result bootstrap theme with company logo
logo_bootstrap.png (55.76 KiB) Viewed 11650 times

User avatar
toconnell
Veteran Member
Posts: 204
Joined: 2013-04-09 19:29
Location: Oklahoma City, OK
Contact:

Re: Customize header (company logo) within the bootstrap nav

Post by toconnell » 2014-10-29 16:36

Worked great! Thanks! Just needed to build my logo 120 px high.. no more.. or it throws it off a bit.

Thanks again, Tina
Tina O'Connell
Web Dev & Appgini FAN

User avatar
lordcenon
Posts: 3
Joined: 2013-06-12 04:53
Location: Papua New Guinea
Contact:

Re: Customize header (company logo) within the bootstrap navbar

Post by lordcenon » 2015-06-22 20:53

I played along with the login.php

See as follows:

https://hitechfusion.com/hrmpg/sys/index.php?signIn=1

Inserted the following to:

<div class="col-sm-6 col-lg-8" id="login_splash">
<p align="center"><img src="https://hitechfusion.com/hrmpg/sys/imag ... BE-new.jpg" width="305"
height="189</p>
<p align="center"> </p>
<p align="center">MOROBE PROVINCIAL GOVERNMENT</p>
<p align="center">Lae MP</p>
<p align="center">PAPUA NEW GUINEA</p>
<p align="center"> </p>
<p align="center">[email protected]</p>
<p align="center"><a href="https://hitechfusion.com">Hitechfusion PNG</a></p>


To ensure to be able to recover to previous file, i renamed each login.php to login?.php
where ? represents an increasing number from 1 as version of each file
with this you can backtrack to the previous working code

thanks for the idea i got from other contributors

peteraj
Posts: 27
Joined: 2016-02-05 12:25

Re: Customize header (company logo) within the bootstrap navbar

Post by peteraj » 2016-03-24 14:13

Hi,
I tried the above suggestion, on how to get a custom header with image, but I can't get it to work! :-( Could anyone please post at copy of their working bootstrap.css?

Thanks in advance! :-)
Best Regards
Peter

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

Re: Customize header (company logo) within the bootstrap navbar

Post by peebee » 2016-03-28 02:35

To center the login panel on the login page and add a logo (and your own custom text as well if you want to) just open login.php and edit the following;

Original (V5.50 - starting line 8)

Code: Select all

<div class="row">
	<div class="col-sm-6 col-lg-8" id="login_splash">
		<!-- customized splash content here -->
	</div>
	<div class="col-sm-6 col-lg-4">
		<div class="panel panel-success">

			<div class="panel-heading">
				<h1 class="panel-title"><strong><?php echo $Translation['sign in here']; ?></strong></h1>
				<?php if(sqlValue("select count(1) from membership_groups where allowSignup=1")){ ?>
					<a class="btn btn-success pull-right" href="membership_signup.php"><?php echo $Translation['sign up']; ?></a>
				<?php } ?>
				<div class="clearfix"></div>
			</div>
Edit as per below to center the login box and add a responsive logo at top

Code: Select all

<div class="row">
        <!-- Center your login box -->
	<div class="col-sm-3 col-lg-4" id="login_splash">		
	</div>
	<div class="col-sm-6 col-lg-4">
                <!-- Add your custom responsive logo -->
		<div class="panel panel-success">
			<div><img src="your_logo.jpg" class="img-responsive" alt="Your alt tag here" title="Your title tag here"/>
            <div class="panel-body">
                                <!-- Add your own custom text below here -->
				<h1>Secure Data Access</h1>
    <div class="form-group"><p>This database is for the use of authorised persons only. IP addresses are monitored and logged. Any attempts at unauthorised access will be investigated and we shall fully cooperate with law enforcement agencies in event of any breach of Privacy Laws. </p>         </div>
    		</div>
    		                <?php if(sqlValue("select count(1) from membership_groups where allowSignup=1")){ ?>
					<a class="btn btn-success pull-right" href="membership_signup.php"><?php echo $Translation['sign up']; ?></a>
				<?php } ?>
				<div class="clearfix"></div>
			</div>
No additional CSS should be required unless you want to add extra styling. For best presentation, I'd suggest you create a long narrow logo at least 600px wide so it will span full width of the container on a large widescreen monitor and behave responsively on smaller monitors/devices. I hope that helps.

peteraj
Posts: 27
Joined: 2016-02-05 12:25

Re: Customize header (company logo) within the bootstrap navbar

Post by peteraj » 2016-04-12 07:19

a little tip:

I know this is an old thread, but i version 5.50 a a great feature to maintain the position of the action button, when scrolling vertiallly, was added!

Unfortenately that doesn't work well, if you fiddle with the height of the navbar, as JEngels so kindly descripes... I found a workaround; edit the file common.js.php, almost in the end, there is a linie saying; "var tm = parseInt(vscroll - form_top) + 60;" Adjust 60 accordingly to the new height of your navbar, i my case I changed it to 90!

/Peter

Post Reply