Okay, I'm stumped on this one too since firebug shows me the files and elements, but not the location of the spot that I'm searching for. Here's the problem. I added our own custom logo to the top, above the main menu. I also added an image as a primary page background everywhere, as opposed to a color. This background image appears everywhere outside of the homepage box constraints, to include above the main menu. So when I look to the left of our logo, I see a rectangular area that I would like to fill with color instead. It was the same with the original boonex logo.
It's just that portion to he left of the logo that I can't find. Perhaps it's because the image is just "floating" and being kept where it is. If that's the case then I'd need to know where the alignment command for that image is, so that I can change the left margin to none or zero. That way I'd simply enlarge the logo by adding more of the image background color to the left, and voila the problem would be solved.
Anyone know how to make that logo appear on the left edge of the screen so that I can do this?
|
There is a left margin on your logo.
templates/base/css/general.css
Line 170
div.sys_ml_wrapper {
}
Change margin:0 10px to margin: 0px;
You will get the hang of firebug with practice. I was able to find it quite quickly. One trick is to move through the bottom code section with the mouse. As you do firebug will highlight areas at the top. Expand areas in the bottom that are not expanded by clicking on the +. Move your mouse through them and see what firebug highlights. Takes a bit of practice.
https://www.deanbassett.com |
Thanks, but that's not exactly what I was talking about. 
I meant the entire space to the left of the logo. Maybe it depends on window and screen size but I have my browser set to full screen mode which I started doing when tabbing became an option for browsers. In full screen mode I have an area to the left of the logo, but above the stripe for the man menu, which is apx. 2 inches wide on my screen. It's that space which is currently filled with the background image that I'd like to fill with a color instead. Just that one space.
Based on what you just said and the difference that the 10px margin (or current lack thereof) made, I'm thinking that I should be able to find just this one single element to the left of the logo, so that I can fill it in with another color?
Yeah, you're right, I'm still learning to "navigate" with firebug and not having IE7 or IE8 available doesn't help sometimes.
|
Perhaps you better provide a screen shot pointing to what you mean. If it's what i think it is, then i believe it's part of the background which covers both the left and right side of the logo header area. Doing anything with that will also affect the right side of the page.
But i might get a better idea if you point to what you want to do with pictures. https://www.deanbassett.com |
Same screenshot as in the other post .... 
It's the rectangular area directly to the left of the logo that I'm talking about.
As you can seen, the current background image appears there, below the menu, and also on the right side of the screen.
I'm trying to figure out how to either color just that rectangle to the left of the logo - OR - how to add more background color by altering the left side of our logo (making it wider) while keeping the logo TEXT itself in the same place as it is right now.
|
That will not be easy. That area is the sys_main_logo div. It covers the entire width of the page. So changing the background color will also change the right side.
Unfortunatly sys_ml which is the div contained within it has it's width generated by code so over riding it with CSS is not possible. That is the div that contains the logo itself and the quotes and is set by code to match the width of the page as determined by the page builder.
So let me ask you this.
Are you looking to just change the left side to a solid color but leave the right side with the corner peel the same? https://www.deanbassett.com |
No, that would have been the easy solution. 
I just want that rectangle next to the logo to be a different (blue) color. Everything below the menu on both sides is supposed to remain as is. That's why I was wondering if there was a positioning command for the logo itself which causes it to appear in its current location? For example if "position absolute" (like I don't even know what I'm talking about, hmph) means that the logo appears centered within a hypothetical existing element of 600 px width on such and such page/file ... then I could edit just that page/file manually in order to force the image to appear all the way on the left by changing the existing positioning command.
I would then follow this up by enlarging the image itself to a width of 600 px thereby forcing the entire 600 px width of that particular element to be filled with the logo only. Consequently, if I added nothing but blue color to the left of the logo text, it would then appear as though the area next to the text had been filled in blue ... even though it's actually just a part of the logo that's being viewed ...
|
You can position the logo, but the position will be within it's containing div, so will not help you.
The only thing i can think of is moving the logo. Hide the main system logo by adding display:none to this section in general.css
.mainLogo {
background-color:#19486B;
margin:5px 0 0;
display:none;
} Then putting your logo in the div itself like so.
div.sys_main_logo {
background-image:url("path to your logo");
background-repeat:no;
background-position: left top;
position:relative;
z-index:56;
}
Your very limited with what you can do there.
https://www.deanbassett.com |
Your very limited with what you can do there.
Yeah, you're right.
When I implemented those two changes everything above the main menu vanished ... quotes, logo, everything.
|
Yes, of course, silly of me to forget. A height must be specified in that last one as well that matches the height of the logo.
div.sys_main_logo {
background-image:url("path to your logo");
background-repeat:no;
background-position: left top;
position:relative;
z-index:56;
height:86px;
}
https://www.deanbassett.com |
