Customizing Logo Area Width

• 

  stonehousemedia · Member · Feb 6, 2015 at 2:05 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I’m currently using the Adventure theme and was hoping someone can help me increase the width where I’m placing the logos in the header.

  Currently I’m stuck at 306px. Ideally I would like the ability go beyond this size. Also have to keep in mind that the site is responsive. Hopefully going wider won’t impact the phone and tablet.

  The Adventure theme admins were a great help but directed my to this forum for advanced help.

  https://leadingedgeaviation.wordpress.com/

  Thanks.

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Feb 13, 2015 at 9:19 pm

  • Copy link

  have I pontificated with you yet about my ideas around redefining QA in a continuous deployment env?

  I checked your site and I found that there is a logo embedded directly into the header image: https://leadingedgeaviation.files.wordpress.com/2015/02/cropped-header6.jpg

  Is that a different setup than you had before? With the current setup you have now, there isn’t a need to use CSS because of how the logo image is embedded in the image directly.

• 

  leftisthejourney · Member · Feb 14, 2015 at 3:08 pm

  • Copy link

  I also have a problem with customizing the logo in my website: autobodyconnection.biz

  The image I’ve uploaded is much larger, but the theme seems to limit my logo size to only about 270Wx50H pixels. Can I use CSS to increase the allotted size? Can I use CSS to fill the entire banner (now just a white background) with an image?

• 

  designsimply · Member · Feb 15, 2015 at 12:10 am

  • Copy link

  I checked http://autobodyconnection.biz/ and I see that it is using the Edin theme. When it comes to CSS, each theme needs different CSS applied, so it’s best to post help requests in separate threads.

  The image I’ve uploaded is much larger, but the theme seems to limit my logo size to only about 270Wx50H pixels.

  This is normal. Themes have a general accepted size or max size and try to stick to that.

  Can I use CSS to increase the allotted size? Can I use CSS to fill the entire banner (now just a white background) with an image?

  One possible solution would be to manually replace the site logo that’s there now with a different image using CSS. Here is an example you can try:

  .site-branding {
  	margin-left: 0;
  	max-width: 1100px;
  	width: 100%;
  }
  
  .site-logo-link {
  	background: url(http://i2.wp.com/s.w.org/about/images/logos/wordpress-logo-notext-rgb.png?w=150) no-repeat;
  	display: block;
  	margin: 0 auto;
  	width: 150px;
  	height: 150px;
  }
  
  .site-logo-link img{
  	display: none;
  }

  Replace the url() value with your own image link and update the width and height in the “.site-logo-link” section to match the image’s dimensions.

• 

  leftisthejourney · Member · Feb 19, 2015 at 2:59 pm

  • Copy link

  Hmmm… I tried using the CSS you posted, but it doesn’t seem to change anything. I added the URL of the image and indicated its px size.

  Do you think that might be the theme settings, keeping me from making this customization?

• 

  designsimply · Member · Feb 19, 2015 at 4:08 pm

  • Copy link

  You’ve added your CSS inside a comment, and that’s why it’s not working.

  In CSS, comments start with “/*” and end with “*/” and anything inside those marks is ignored.

  In your Appearance > Customize > CSS editor, remove this from the top:

  /*
  Welcome to Custom CSS!
  
  CSS (Cascading Style Sheets) is a kind of code that tells the browser how
  to render a web page. You may delete these comments and get started with
  your customizations.
  
  By default, your stylesheet will be loaded after the theme stylesheets,
  which means that your rules can take precedence and override the theme CSS
  rules. Just write here what you want to change, you don't need to copy all
  your theme's stylesheet content.
  
  If you need any further help, ask in the CSS Customization forum.

  And remove this from the bottom:

  */

• 

  leftisthejourney · Member · Feb 23, 2015 at 9:02 pm

  • Copy link

  Thanks. That helped a lot

• 

  designsimply · Member · Feb 24, 2015 at 3:02 pm

  • Copy link

  Cheers :)

  We actually just made the default comment shorter! Maybe it will help some other people in the future.

  Here are a couple great tutorials if you’re just getting started with CSS:
  http://www.htmldog.com/guides/cssbeginner/
  http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1?curriculum_id=50579fb998b470000202dc8b