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
Customize header (company logo) within the bootstrap navbar
Re: Customize header (company logo) within the bootstrap nav
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!
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!
Re: Customize header (company logo) within the bootstrap nav
... and the result:
- Attachments
-
- the result bootstrap theme with company logo
- logo_bootstrap.png (55.76 KiB) Viewed 11687 times
Re: Customize header (company logo) within the bootstrap nav
Worked great! Thanks! Just needed to build my logo 120 px high.. no more.. or it throws it off a bit.
Thanks again, Tina
Thanks again, Tina
Tina O'Connell
Web Dev & Appgini FAN
Web Dev & Appgini FAN
Re: Customize header (company logo) within the bootstrap navbar
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
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
Re: Customize header (company logo) within the bootstrap navbar
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
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
Re: Customize header (company logo) within the bootstrap navbar
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)
Edit as per below to center the login box and add a responsive logo at top
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.
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>
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>
Re: Customize header (company logo) within the bootstrap navbar
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
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