Seven - header logo modification

6 posts / 0 new
Last post
OceanStudio
OceanStudio's picture
Seven - header logo modification

Hello,

I've installed Seven as my theme and would like to override the size/position of the logo that is placed in the header.

• On the homepage, I will be using a logo that is only slightly larger in pixel count than the existing "seven" logo and will need to be adjusted downward in the CSS via absolute positioning.

• On all sub-pages of the site, I will have a logo that is smaller in pixel count than the existing Seven logo and I will also need to adjust the absolute positioning via CSS.

Since 'Seven' is a responsive theme... are there multiple CSS files for each size of desktop and mobile size for browser display relating to the header of the theme?
Where would the various files be that I need to alter the code for the logo sizes and positions for all variants of browser size.

Thanks for any info !

support
support's picture
Hi there OceanStudio:

Hi there OceanStudio:

Here in the docs you can find where are the specific CSS files http://demos.doublemthemes.com/seven/documentation/#!/advanced

For what you need to do, I suggest you to add a second image tag and hide/show depending on the Viewport. Something you can handle on the CSS files.

Best!!!

OceanStudio
OceanStudio's picture
Thanks for the response

Thanks for the response Support...

I have tried to follow the "advanced" documentation for altering the logo size and position but have not had success...I'm not great with CSS code writing, but I can navigate my server and do slight CSS edits where needed however.

I have found the CSS layout files mentioned in the advanced documentation:
• responsive-mobile-portrait-layout.css
• responsive-mobile-landscape-layout.css
• responsive-tablet-layout.css
• responsive-screen-layout.css

however, I can not find the section of each file that deals with the sizing control of the logo.
There is only one line I discovered in the 'responsive-mobile-portrait-layout.css' file... on line 65 it lists:
max-height: 51px;
This is the only reference I can find in any CSS file that seems to control logo height, and it's only on the one 'mobile-portrait.css' file but none of the others...?

Not sure if there is something in another CSS file...is the 'Zen' theme base CSS styling completely ignored for the header area and the logo?

Also, as a notation, I've tried replaceing the logo.png and the logo-mobile.png in the theme root without success, as well as uploading my own logo images and larger sizes to the Appearance>Settings section... no success in changing logo size either way. It is always limited to the 51px height, even if I comment out the max height line mentioned above and clear cache.

Any help would be great.
Thanks!

support
support's picture
Hi thereOceanStudio:

Hi thereOceanStudio:

It is only defined on the mobile-portrait one, so you can just replicate the CSS selector and property to the levels you wish to resize or exchange.

Best!!!

zach
zach's picture
Similar issue (Logo re-sizing) - need help

So I'm trying to add my soon to be logo to the website and when I do this whether it's uploading through the site or copying over the default logo.png it gets re-sized super small.

http://zpleiner.dyndns.org/seven/sites/default/files/logo_home_test.jpg

After looking around this site and multiple searches I've seen people saying that you just need to change "max-height: 51px;" to whatever size you want in "sites/all/themes/seven_doublemthemes/css/responsive-mobile-portrait-layout.css". However when I do that it moves stuff on the home page down including the images in the slider.

http://zpleiner.dyndns.org/seven/sites/default/files/logo_resize_home_te...

There's got to be a way I can do this. Please help. Thanks.

-Zach

support
support's picture
Hi there Zach:

Hi there Zach:

The best way to deal with that is to play with an acceptable heigh (maybe an 80 of what you have now on the second image) and playing with a negative top margin.

margin-top: -15px;

Give it a try.

Best!!!

Log in to post comments