Increase the size of the Logo using CSS in Rowling theme.

• 

  kenswe1972 · Member · Feb 27, 2017 at 10:58 pm

  • Copy link
  • Add topic to favorites

  Hi.
  I’m working with the Rowling theme and I am trying to increase the size of the logo using this configuration but when I attempt to enlarge it, the logo becomes blurred, regardless of what size or shape it is. I’ve tried various sizes but all appear blurred. The seems to scale the image down automatically; the CSS is now just using that same scaled down image and trying to increase it back to the dimensions I entered.

  a.site-logo-link img {
  width: 128px;
  height: 128px;
  }

  .site-title { padding-top: 20px; }

  Is there any way to increase the size and keep the quality?
  This is my site.
  http://www.europaunited.eu

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

• 

  thesacredpath · Member · Mar 1, 2017 at 1:34 am

  • Copy link

  Hi there, the theme software actually creates the logo image off of your original at 80px square, so enlarging it will cause loss in quaility. What we can do is make the existing logo image invisible and then add the original logo image to the “a” element. Add the following to your custom CSS.

  .site-logo-link {
    height: 128px;
    width: 128px;
    background: url('https://skokmedia.files.wordpress.com/2017/02/cropped-cropped-14910341_1087389464712245_9010349152999697868_n-e1487187676483.jpg') no-repeat scroll 0 0 / contain;
  }

• 

  kenswe1972 · Member · Mar 1, 2017 at 4:16 pm

  • Copy link

  Thank you for your help but I’m afraid it didn’t work.
  When I loaded the above text into the CSS, I got a larger version but the current sized version still appeared over it. I also want to use a new logo but this also appeared over the current one that was enlarged.

• 

  thesacredpath · Member · Mar 1, 2017 at 7:49 pm

  • Copy link

  I am soooo sorry. I missed copying one of the needed CSS rules. Add this to your custom CSS (the first rule was the one I didn’t copy the first time).

  .site-logo {
    visibility: hidden;
  }
  .site-logo-link {
    height: 128px;
    width: 128px;
    background: url('https://skokmedia.files.wordpress.com/2017/02/cropped-cropped-14910341_1087389464712245_9010349152999697868_n-e1487187676483.jpg') no-repeat scroll 0 0 / contain;
  }

• 

  kenswe1972 · Member · Mar 1, 2017 at 7:54 pm

  • Copy link

  Hi again,

  That worked so just one more thing. If I want to change the logo, who do I do it?

  Thanks for all your help.

• 

  kenswe1972 · Member · Mar 1, 2017 at 7:56 pm

  • Copy link

  sorry, meant to write “how” instead of “who”.

• 

  kenswe1972 · Member · Mar 1, 2017 at 7:58 pm

  • Copy link

  Hi.
  I figured it out. I changed the link to the new logo that was in the library on the site. Thank you very much for this. It’s really appreciated.

• 

  thesacredpath · Member · Mar 1, 2017 at 8:06 pm

  • Copy link

  You are welcome.