Forum Support

Shape 5
December 02, 2021, 10:52:13 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: change logo height and width  (Read 1022 times)
mhagins
Jr. Member
**
Offline Offline

Posts: 74



« on: June 20, 2014, 01:05:45 PM »

my site is www.beautifulfoundationfund.info     I am trying to change height and width of logo....I've gone to the template css but don't see height and width of logo...this is only css I can find:

#s5_logo {
cursor: pointer;
float:left;
max-height:100% !important;
margin-right:32px;
padding-top:12px;
padding-bottom:12px;
}

Any help would be greatly appreciated!!
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: June 21, 2014, 09:58:51 PM »

Hello,

You can manually add your own in there. Just use the following:

width: 100px !important;
height: 100px !important;

Note that the max-height: 100% wont allow the height value to be greater than the height of the menu bar without being removed.

-Mike
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
mhagins
Jr. Member
**
Offline Offline

Posts: 74



« Reply #2 on: June 23, 2014, 07:31:12 AM »

Mike, do I put that inside the template css or custom css...thanks for your help
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: June 23, 2014, 03:41:40 PM »

Hello,

Just add it directly to the #s5_logo { css coding you posted initially. That would be in the Template.css

-Mike
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
mhagins
Jr. Member
**
Offline Offline

Posts: 74



« Reply #4 on: June 30, 2014, 07:32:55 AM »

Mike, I'm not sure what I'm doing wrong but I can't get it to change to accept height.

would it be possible for you to post the code the way it should look on my css.   sorry to keep bothering you, I'm very grateful for the help.

Thanks,
Mike
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: June 30, 2014, 10:00:20 PM »

Hello,

The issue right now is that the header has a set height of 114px and an overflow:hidden; css call which hides anything that would render outside that container. So if you were to remove the below CSS you would then see the entire logo with no clipping.

Code:
Template.CSS - Line 500

#s5_header_area1 {
    background: url("../images/s5_menu_bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    height: 114px;
overflow: hidden;           ** Remove This Line**
    width: 100%;
    z-index: 3;
}

You would then see your entire logo rendered. If you want to adjust the height of the logo manually you can add this to the custom.css (after removing the overflow:hidden) to resize your logo:

Code:
#s5_logo_module img {
  height: 400px !important;}

My general recommendation would be to just rescale your logo server side to fit within the header height value or increase the height of the header at the line above.

-Mike
« Last Edit: June 30, 2014, 10:02:30 PM by mikenicoll » Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
labadmends
Jr. Member
**
Offline Offline

Posts: 71



« Reply #6 on: February 21, 2017, 06:37:51 PM »

I'm having a similar problem here. A client has given me a logo that is not the standard size. I've adjusted the template.css info to the specifications you detailed, but am not having success here. Oddly enough, the updated logo replacement (s5_logo.png) is not showing, but the Oasis logo still is!

Any input would be helpful.

https://tinyurl.com/hgv6b6w
Logged
labadmends
Jr. Member
**
Offline Offline

Posts: 71



« Reply #7 on: February 21, 2017, 06:53:13 PM »

I should have waited for the cache.. the current logo appears, but I am still struggling with its size. I set the width to cover in the custom.css but it seems not to have helped.

I'm having a similar problem here. A client has given me a logo that is not the standard size. I've adjusted the template.css info to the specifications you detailed, but am not having success here. Oddly enough, the updated logo replacement (s5_logo.png) is not showing, but the Oasis logo still is!

Any input would be helpful.

https://tinyurl.com/hgv6b6w
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #8 on: February 22, 2017, 09:14:59 AM »

Hello,

You don't need a width call. Just remove the width:100% !important line in template.css under:

#s5_logo {
    cursor: pointer;
    float: left;
    height: 100px !important;
    margin-right: 32px;
    padding-bottom: 12px;
    padding-top: 12px;
    width: 100px !important;
}
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
labadmends
Jr. Member
**
Offline Offline

Posts: 71



« Reply #9 on: February 22, 2017, 09:54:29 AM »

Thank you Mike! That totally worked  Grin
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.