By drupalflavia on

Hi, back to webdesign after a few years and dealing with D7 and Zen for the first time, please be patient ;)

I am working on a website on D7.41 with a zen sub-theme.

I'd like to put a slideshow created through DDBlock in the header, shifting the logo to the right. The slideshow works fine and is perfectly placed in the header block when the logo is disabled, but by enabling the logo again it goes below the area.

I have modified/commented/deleted every line in misc.css with clear: both referred to the logo or header and cleared all caches but it is not working yet. I have also tried many other solutions such as including a new region in the header, through specific modules or modifying the page.tpl.php, but no good results. Any suggestion? Thanks

⋅ Categories: Drupal 7.x

Comments

nevets’s picture

nevets commented

I would try adding display: inline-block to the wrapper div for the logo.

drupalflavia’s picture

drupalflavia commented

Thanks nevets, I've tried to add it to header__logo, header__logo-image and header__region but it didn't work :(

nevets’s picture

nevets commented

Can you provide a link to the site?

drupalflavia’s picture

drupalflavia commented

So, by enabling anonymous users to see the DDBlock I found out that the DDBlock slideshow does actually display in the header, but I could not manage to put it in front of the logo rather than after it. The website is: http://digilab4.let.uniroma1.it/enbach/ and it should look like this: http://enbach.uniroma1.it/EN.aspx?DefaultLanguage=EN

I don't want to use the float: right for the logo as the images in the slideshow are not all exactly the same width and I'd like to logo to move if needed (as it was in the old website). Also, things might become even more complicated if I need to add other elements in the header.

As an admin, I see it like this:

https://www.dropbox.com/s/7atkz927cwomh8s/Screenshot%202015-11-30%2016.38.53.png?dl=0

I guess it must be a consequence of the responsive layout with administration upper bar that I need to fix.

Thanks for helping me!

nevets’s picture

nevets commented

I am going to assume you are working on a custom sub-theme. To place the slideshow after the slideshow you will need to modify page.tpl.php in you sub-theme. You will find a section like

<header class="header" id="header" role="banner">
    <a href="/enbach/" title="Home" rel="home" class="header__logo" id="logo"><img src="http://digilab4.let.uniroma1.it/enbach/sites/default/files/enbach_logo.jpg" alt="Home" class="header__logo-image"></a>
    
   <div class="header__region region region-header">
      ....
  </div>
</header>

You want to place the logo elements after the header region like this

<header class="header" id="header" role="banner">
   <div class="header__region region region-header">
      ....
  </div>
    <a href="/enbach/" title="Home" rel="home" class="header__logo" id="logo"><img src="http://digilab4.let.uniroma1.it/enbach/sites/default/files/enbach_logo.jpg" alt="Home" class="header__logo-image"></a>
</header>
drupalflavia’s picture

drupalflavia commented

Yes it's a custom zen sub-theme but the page.tpl.php has not been changed.

You mean I should create a new region?

Thanks

nevets’s picture

nevets commented

I would not create a new region, I would simply move the header region so it is before the logo elements as shown above.

drupalflavia’s picture

drupalflavia commented

Oh I see! There was just a simple line that I was not able to identify as the relevant part to move:

print render($page['header']);

Thanks to your suggestion I have now moved it before the logo and it works! Thank you so much for your help!!

nevets’s picture

nevets commented

You also want the wrapper div(s) that go with it.

drupalflavia’s picture

drupalflavia commented

Trying to play with it right now, as you have seen I am not familiar with such stuff. There is nothing else in the page.tpl.php as it is. Should I add something to it, or just adjust the attributes in the misc.css?

nevets’s picture

nevets commented

I expect there are these lines

   <div class="header__region region region-header">
      ....
  </div>

surrounding the render call.