Logo Size/Resolution and Top Bar Bottom Border

Hi there! Just bought the awesome NEWSPAPER 7 template… great job guys!

I need some help with a couple of things:

1. No matter what size or resolution I use when uploading my logo images, the logo in the actual site (www.psl.ucr.ac.cr) will show unsharp, loosing a lot of resolution and almost pixelated. I tried it using the specific instruction in the documentation about normal and retina logo sizes; nothing worked (see the sharpness difference between the logo in my laptop and the logo at the site here: https://postimg.org/image/id9534rcf/).

2. In some of your theme demos, when using the Header Style 10 with the centered logo, centered main menu and top bar enabled, I can see a grey 1px top bar bottom border dividing the top bar from the header logo (see Wedding Demo http://demo.tagdiv.com/newspaper_wedding/). Could you please help me enabling this feature again? I can’t figure it out!

That’s it for now. Thanks so much!

Fidel

I have the same problem as Point 1. Despite uploading higher resolution/sized logos (retina versions), the logo still appears blurry. Please advise.

Hi there.

1. I’ve completed all actions instructed, except for CDN files and jetpack image features, since I’m using none. Cache is cleared, some custom logo for the header removed and all other plugins deactivated and only Visual Composer remains active. PROBLEM PERSISTS. Please notice that the image in my WordPress Media section appears to be alright; it’s when displaying it in the front end that it gets blurry. Please help.

2. You’ve got this one all wrong. I’m not trying to make my site look as Wedding demo after installing the Politics demo; that would be dumb. I’m just asking for some code to display the thin grey bottom line under the top bar that you show as a feature in your Header Style 10 documentation (see here https://forum.tagdiv.com/header-styles/). That’s all… You show the bottom border as a feature of the Header Style 10 in the documentation, so I want it there, it’s not that difficult.

Thanks again,

Fidel

Hello.

1. I provided you with my site’s URL in my first post to this topic… Anyway, here it goes again: http://www.psl.ucr.ac.cr. I also attached in that first post a screenshot showing the difference in the logo image quality when seen in my laptop vs. displayed in the site’s header. Here it goes again: https://postimg.org/image/id9534rcf/.

2. Regarding the bottom border of the top bar I asked for, a feature offered by you in your theme documentation (see Style 10 in this section of your documentation, or this screenshot for more clarity: https://postimg.org/image/v75w3azbh/), here is a screenshot of where the top bar bottom border should go: https://postimg.org/image/5mz0j4ojx/.

Hope this clarifies everything. Thanks,

Fidel

• This reply was modified 9 years by Fidel de Rooy.

Hey kfx!

I finally came into a solution for this issue by my self, regarding the logo resolution problem. Catalin simply did not provide the expected quality support (not a great theme support experience for me so far), so I’ll post it here step by step in case you can use it:

1. First of all, produce (via Illustrator or Photoshop) a high quality resolution PNG image of your logo. Try not to exceed a width of 1400px. Make sure it looks really sharp. Consider leaving a transparent background if needed.

2. Optimize it by uploading/downloading it to/from Optimzilla. This is to ensure your image achieves the minimum file size possible, while keeping its quality.

3. Upload it to your WordPress Media Library.

4. Change your logo image in the Theme Panel settings Theme Panel> Header> Logo & Favicon (be sure to load the proper image in both “Logo Upload” and “Retina Logo Upload” fields).

5. Go to Pages> Home, and open the Visual Editor for your homepage. Once in the Visual Editor, add this code into the Custom CSS option at the top right portion of the editor:

.td-logo {
display: inline-block;
width: 55%;
}

See http://www.screencast.com/t/zBtkB7Acv, if needed. You can always adjust the width property to your desired size.

6. Click “Save Changes”, and finally “Update” your page. When done, you should see a really sharp logo image in your header, like the one displayed in my site.

Hope it works!

Cheers,

Fidel

• This reply was modified 9 years by Fidel de Rooy.
• This reply was modified 9 years by Fidel de Rooy.

Hi Fidel

Thanks for the helpful info.

Agree – support is really not great for this theme!

Thanks again.