Logo Height, Featured Image Height, and Menu Alignment « Support Forum | Kriesi.at

Support Forum » Habitat

Logo Height, Featured Image Height, and Menu Alignment

14 posts from 6 voices

Started 2 years ago by piexec
Latest reply from Dude
This topic is not a support question

Tags:

piexec
Member

Questions:

http://174.121.2.58/~catchtwe/about-us/

1. I've changed the logo to be higher than default. Ive updated the CSS to the following:

#wrapper_head{
position: relative;
z-index: 100;
overflow: visible;
height: 133px;
}

#top .logo, .logo a{
display:block;
height:133px;
width:165px;
position:absolute;
left:40px;
top:0px;
border: none;
padding: 0;
margin:0;
}

I get a gap in the whitespace under the menu. Can you please help me fix.

2. Please help me get the menu to align to the bottom of the header.

3. Please help me get the featured image's height to auto size to the height of the featured image so that I can upload images with different heights as featured items.

Posted 2 years ago #
Dude
Dude
Hey,
1) in style.css replace:
```
#top .nav{
height:50px;
line-height:30px;
padding-left:13px;
right:40px;
position:absolute;
z-index:100;
top:45px;
}
```
with:
```
#top .nav{
height:50px;
line-height:30px;
padding-left:13px;
right:40px;
position:absolute;
z-index:100;
top:95px;
}
```
2) It's currently not possible to adjust the featured image area height automatically. If your image is bigger than the standard size (can be found in functions.php) the image will be resized. If the height is smaller, the image will be displayed as it is. The featured image area has a static size which can't be changed on an individual (per image) basis at the moment.
Posted 2 years ago #
piexec
Member

That adjusts the nav, but how do I fix the gap caused by increasing the logo height and #top .logo, .logo a and #wrapper_head height?

See page at:

http://174.121.2.58/~catchtwe/about-us/

Posted 2 years ago #
James Morrison
Former Team Member

Hey,

This problem is caused by the header background image (http://174.121.2.58/~catchtwe/wp-content/themes/habitat/images/skin1/bg_top.png) only being 100px in height compared with the height of #wrapper_head being 133px.

The only way to fix this is to modify the header image to increase it's height.

You can adjust the size of the featured images by adjusting the size in functions.php, bear in mind that this would only affect images uploaded from that point onwards (so any existing images will already have been resized and will need replacing).

James

Posted 2 years ago #
piexec
Member

Great. That worked. Two more questions:

1. How could I set the featured image on the blog homepage to be one height, and all the other internal page to be another.
2. Is there a shortcode for buttons?

Posted 2 years ago #
Dude
Dude
1) You can change the image size by adjusting the thumbnail code in template_fullwidth.php, archive.php, single.php and page.php. Search for:
```
$preview_image = kriesi_post_thumb($post->ID, array('size'=>
```
in these templates. As you can see the size is controlled by letters, i.e. in page.php it looks like:
```
$preview_image = kriesi_post_thumb($post->ID, array('size'=> array('M'),
```
Change the letter "M" to a different one like "XL" or "L". You can find adjust the dimensions in functions.php.

2) No but there are some plugins out there like: http://wordpress.org/extend/plugins/download-button-shortcode/
Posted 2 years ago #
mjkolb
Member

Sorry if this question is redundant but I have tried to change the size of my logo by following the instructions here to change pixel width/height on line 150. It does not seem to work. I am wondering if it is the background that needs adjustment. I have two logos and would like to put the larger of them on the site. Both have transparent backgrounds. Could I please have some help? (English please...very dicey when it comes to this. Bit out of my league to be honest). Thanks very much. Love the theme by the way.

Posted 2 years ago #

Dude
Dude

Hey,
as far as I can see you use a cropped version of the logo (wp thumbnail). Please use the fullsize logo - so instead of:

http://bestmanhattanliving.com/wp-content/uploads/2011/02/Matt-Logo-Small-150x85.png

use

http://bestmanhattanliving.com/wp-content/uploads/2011/02/Matt-Logo-Small.png

I saw that you changed the logo link width to 600px. Please change it to a width of the image. Open up style.css and search for:

#top .logo, .logo a {
border:medium none;
display:block;
height:80px;
left:0;
margin:0;
padding:0;
position:relative;
top:0;
width:600px;
}

replace it with:

#top .logo, .logo a {
border:medium none;
display:block;
height:85px;
left:0;
margin:0;
padding:0;
position:relative;
top:0;
width:165px;
}

This should adjust the logo link size :)

Posted 2 years ago #

askmepc
Member

I changed my logo height to 122 but now it does not work on all the pages, see here:
http://wnba-sfchapter.org/blog/
also my text flashes one style first and then the one I selected.

Posted 2 years ago #
Dude
Dude

Hey,
as far as I can see the logo dimensions are right on every page. I experienced loading issues though (the image doesn't display fullsize at first but only one half, then the other half gets loaded). I.e. this page: http://wnba-sfchapter.org/wnba-sf-chapter-membership-directory/ shows the problem. It's related to the filesize of over 2mb (which of course cause long loading times and side effects). Maybe try to reduce the image size here.

The text flash is related to Cufon and a drawback of javascript font replacement. There's nothing we can do about it. The only chance you have is to use web save fonts like Arial, Times New Roman, etc. instead of "designer fonts".

Posted 2 years ago #
dearlizzy
Member

I am trying to change my logo height and it's not working... how do I do that?
habitat theme

thank you

Posted 7 months ago #
Dude
Dude
You can change the height with following code - add it to the bottom of style.css:
```
#top #head .logoimg, #top #head .logoimg a, #top #head .logoimg a img {
    height:100px;
}
```
Maybe you need to push down the main content area a bit - you can use following code (add it to style.css):
```
#wrapper_main {
    padding-top: 20px;
}
```
Obviously you need to adjust both values based on your requirements - if the logo height increases you also need to increase the padding top value.
Posted 7 months ago #
dearlizzy
Member

Thank you so much!!! You are a genius.

I have one more question:
Is there a way to keep the top main slideshow in place and change out those pictures periodically... instead of with each new post?

Posted 7 months ago #
Dude
Dude

Hi!

No (at least not "out-of-the-box"). However there's some kind of work around which I posted here: http://www.kriesi.at/support/topic/sliderpost-work-around

Best regards,
Peter

Posted 7 months ago #