I am using a custom theme and ran into some problems with the css. I'd like to eliminate the white spaces on both sides and extend the color of the header to the entire width of the page. I have been using firebug for most of the work thus far but I can't figure out how to fix this issue. Any ideas? The website is http:// kgreenchemistryonline.com. Thanks in advance.
Can you post the source code for that section?
Thanks
Mary
Hi Mary! Thanks for looking at this. Below is the ALL the code for the header. I don't see where the width can be customized to span the entire width of the page.
* ======= Header ======= */
#page-header .top-bar {
background: #2f506c;
min-height: 50px;
}
#page-header .top-bar .logininfo-container {
padding-top: 8px;
padding-bottom: 8px;
}
#page-header .top-bar .logininfo-container .userpicture {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#page-header .top-bar .logininfo {
display: inline-block;
color: #a9a9a9;
margin-right: 5px;
}
#page-header .top-bar .logininfo a {
color: #6091ba;
}
#page-header .top-bar .logininfo a:hover {
color: #729dc2;
}
#page-header .social-icons {
margin-left: 0;
}
#page-header .social-icons li.row-end {
margin-right: 0;
}
#page-header .social-icons a {
background: #27435a;
}
#page-header .social-icons a:hover {
background: #6091ba;
}
#page-header .social-icons a:hover .fa {
color: #fff;
}
#page-header .social-icons a .fa {
color: rgba(255, 255, 255, 0.4);
}
#page-header .social-icons a .fa:before {
font-size: 18px;
text-align: center;
padding: 0;
}
#page-header .header-main {
padding: 20px 0;
background: #DFEAEF url(".../theme/gourmet/style/molecule3.png" )no-repeat;
}
#page-header .header-main select.langmenu {
float: right;
}
#page-header h1.logo {
margin-top: 0;
margin-bottom: 0;
}
#page-header h1.logo img {
max-width: inherit;
}
#page-header .header-widget {
overflow: hidden;
}
#page-header .header-widget p {
margin-bottom: 0;
float: right;
line-height: 1;
color: #2F506C;
font-weight: bold;
}
#page-header .contact {
font-size: 20px;
font-family: 'open sans', arial, sans-serif;
font-weight: 300;
margin-top: 10px;
}
#page-header .contact p {
float: left;
margin-bottom: 0;
color:#2F506C;
}
#page-header .contact p.phone {
margin-right: 30px;
color:#2F506C;
font-weight: bold;
}
#page-header .contact p a {
color: #2F506C;
font-weight: bold;
}
#page-header .contact .fa {
color: #2F506C;
margin-right: 8px;
font-size: 18px;
position: relative;
top: 1px;
}
#page-header .contact .fa.fa-phone {
font-size: 22px;
top: 2px;
color:#2F506C;
}
#page-header .search-form {
border: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#page-header .search-form .form-control {
width: 260px;
background: #f5f5f5;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
}
#page-header .search-form .form-control:focus {
background: #fff;
border-color: #6091ba;
hi
thanks but it is not the CSS I asked for it was the sourse code that I asked for.
something like
<div Id="page" class="container-fluid">
<header> .... .... ... </header>
<div id="page-header"> ... ... ... </div>
If this is similar to what you have then the space you need to fix is to overcome the padding of the container-fluid which adds 20px of padding to the sides of the page.
so you need to add this CSS to combat that padding, by adding a negative margin like so...
#page-header { margin: auto -20px; }
I am assuming your theme is based on Bootstrapbase or a derivative More or Clean?
Mary
Yeah...based on Bootstrap. But actually, your suggestion worked....partially! It took out the white space on the left side only.
The only other code I can decipher is this:
<div class="header-main container">
<h1 class="logo col-md-4 col-sm-4 col-xs-12">
<a href=".../CHEMISTRY"><img id="logo" src="//.../CHEMISTRY/pluginfile.php/1/theme_gourmet/logo/1438013890/logo.png" alt="Home"></a>
</h1><!--//logo-->
<div class="info col-md-18 col-sm-8 col-xs-12">
Sorry,
We do not offerer fixes for Bootstrap 3 as Moodle uses only Moodle 2.3.2
Mary
Ok....I figured it out playing around with Firebug. Thanks anyway.