Black background at top missing in actual layout

Might you be able to throw-together a screenshot mock-up of what it is you are wanting to accomplish?

Basically I’m hoping to get that black header bar (shown in the first screenshot) to appear in the theme. Unfortunately it doesn’t appear to be part of the actual theme in practice.

Sot hat I can try to best assist you, please provide the url of the site you’re working on.

Thanks Tom. For confidentiality reasons I sent this info as a PM.

Try this . . . .

Within file path —> /skin/frontend/default/jm_siotis/css/styles.css
at line 183, you will see the following:

Code:

    line-height: normal;    
    padding: 40px 0 0;
    position: relative;
    z-index: 999;

Modify as follows . . .

Code:

#ja-header .main .inner {
    background: none repeat scroll 0 0 #000000
    line-height: normal;
    padding: 40px 0 0;
    position: relative;
    width: 100%; 
    z-index: 999;
}

How does that work for you?

It’s almost what I was hoping to achieve, but in the source files it shows that black header spanning the entire width of the window. The CSS fix only has it span the width of the content area. Can advise the best way to modify the template itself to achieve the full width?

While the source file design may show that left side overlap, it appears that the actual layout design of the template itself is not so easily conducive to such. I’ve been playing around with it and am having a difficult time trying to get the black background to extend to the left beyond the logo. Not entirely certain it can be easily accomplished without potentially messing up other display elements within the header.

Nevertheless, I’ll keep at it -- as well as put it out there for my Support Team colleagues to take a look at and see if they have any ideas.

Thanks. Not sure if it helps, but the skyline silhouette at the bottom of the site does span side to side. Maybe that can be used to figure out this problem.

Thanks. Not sure if it helps, but the skyline silhouette at the bottom of the site does span side to side. Maybe that can be used to figure out this problem.

Possibly … though I did inspect that item as well and try a few tricks … didn’t work as hoped.

Not giving up yet though. And like I said, perhaps one of my Support Team cohorts will be able to provide some additional ideas/insight into how to achieve the result you’re hoping for (per your initial image example above).

@ ninjaprecision,

This seems to be a bug. I don’t see the background at our theme demo as well. I have created an issue into our bug tracker here, I hope the development team will figure out a fix soon.

Hi Tom,

Just a quick note -- while this did help in the desktop version it seems to break the mobile version.

@ ninjapreccision,

You can open the file …skin/frontend/default/jm_siotis/css/styles.css file, find the rule:

HTML Code:

 #ja-header {
            background: url("../images/bg_header.jpg") repeat-x scroll left top rgba(0, 0, 0, 0);
            min-height: 160px;
         }

Change it to:

HTML Code:

 #ja-header {
            background: url("../images/bg_header.jpg") repeat-x scroll left top rgba(0, 0, 0, 0) !important;
            min-height: 160px;
         }

Hope this helps.

Unfortunately it didn’t seem to help. Please see attached screenshot.

Please open the skin/frontend/default/jm_siotis/css/layout-mobile.css file, find the rule:

HTML Code:

  #ja-header {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
  height: 60px;
  min-height: 60px;
  position: fixed;
  top: 0;
  z-index: 9999;
}

change it to:

HTML Code:

#ja-header {
  background: none repeat scroll 0 0 [URL=http://www.joomlart.com/forums/usertag.php?do=list&action=hash&hash=FFDB00]#FFDB00[/URL]
  height: 60px;
  min-height: 60px;
  position: fixed;
  top: 0;
  z-index: 9999;
}

Let me know how it goes.