I was doing updates from 2.5 to 2.6 and discovered the removal of advanced header settings i.e. height, etc.. but I did find one issue highlighting that this had to be removed for responsive reasons.

It seems also that the header area no longer overlaps under the default menu area.

I kind of like this, as this allows me to remove the default logo, slogan, search, etc... and if all removed, the area is hidden and the menu moves up.

It also allows for a custom block to be added up there.

So I was wondering if easy

1. Theme settings: Could the top now be made transparent i.e. in the CSS color selection, Header Left/Header Right must be a valid #color - it would be nice to have the top transparent and option to keep logo, title, slogan with transparent background

2. If adding a block up there, could the block background be transparent? I assume this would rely on point 1.

I am just thinking that option #1, if available would open up many new site styles and Mayo would be even more of a GOTO theme. It is my GOTO theme of choice and the work is appreciated!

CommentFileSizeAuthor
#7 mayo26c.JPG43.99 KBnorgo
#5 mayo26b.JPG46.1 KBnorgo
#4 mayo26.JPG70.1 KBnorgo
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

norgo created an issue. See original summary.

norgo’s picture

Title: Advanced Header Settings » Advanced Header Settings - Transparency
Issue summary: View changes
mermentau’s picture

Just wondering if you could get your effect by using "Upload header background image" in Advanced Header Settings and using a transparent image. The present setup uses the color module for Header Left/Header Right. Uploading a background image overrides the color settings.

I tried it briefly, but it didn't allow the Title and Slogan text to show through in the original form. They were faded. The logo was fine. I have forgotten what I had learned about transparent images. Maybe you could try it.

norgo’s picture

FileSize
70.1 KB

thanks for the quick reply.

I tried a transparent image, and that works but it seems to inherit the Page Color Background.

I guess this picture shows my goal, but I am unsure if the area behind the page header can be made transparent so that the picture (attachment as an example) would be displayed.

I am using "Dynamic background" for the page background.

norgo’s picture

FileSize
46.1 KB

ok I managed to add some simple code to the "page.tpl.php"

line 137

echo $page_wrapper_style; background:transparent;">
echo $page_style; background:transparent;">

I was wondering how I would go about making the space between the menu and the content inherit the page background color
I tried for example as a test style="background-color: #ffffff;" but that does not seem to stick.
I also tried changing the css for spacer, and that did not work either.

~ line 215

mermentau’s picture

I think the problem is with the spacer div in that it has no height. It's margin-top: 10px seems to give the space and not the box itself. Tried changing the spacer in page.tpl.php line 216 to <div class="top-spacer clearfix cfie">

and then added

.top-spacer {
  display: block;
  margin-top: 10px;
  background-color: pink;
  height: 10px;

}

in style.css for a test.

norgo’s picture

FileSize
43.99 KB

sorry for the delay and many thanks for the quick response again.

your fix works well, however, the margin-top adds a transparent space b/w the menu and the Pink 10px area.

Removing the margin-top:10px; does the trick and works in all browsers.

Image of results attached for those who want to see.

Thanks!

mermentau’s picture

Good deal! Think we can call this "Fixed"?

norgo’s picture

Yes I think so. Thanks

mermentau’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.