How to remove border on logo

[AestheticDesign]

After using Weaver Pro II for many years, I’m building my first site using Weaver Extreme Pro. I’ve placed a logo image in the Header HTML area. It is getting styled with:

#header #branding img

/* border-top:  4px solid #000; */

/* border-bottom: 1px solid #000; */

I looked at the header and image option pages and I don’t see an easy way to disable the border for that area. Is it possible through the interface, or do I need to do it with custom CSS?

[scrambler]

There is a border option in Main Options > Header > Header HTML section, but we need a link to your site to be sure of what you mean.

If  the border is coming from the general border settings for all images, you will need to remove that either with and inline style on the image or with a rule like you mentioned. It needs to include removal of padding as this is part of the style. The rule will go in Main options > Fonts & Custom > Custom CSS Rule box

#header-html img {border:none !important;padding:0px !important;}

[Weaver]

The image border settings are generally applied globally to ALL images.

There is an additional option (Customizer : Images : Global Image Settings) that will restrict the borders to images inserted into content via the Editor Media Insert button, but not add borders to images with a direct link (even if they really are located in the media library directory). That might solve your issue.

[AestheticDesign]

This is the site: http://dcibuilders.com/wp/

The logo has a 4px top border and a 1px bottom border that is due to the CSS I mentioned in my first post.

Header HTML: Add the “standard” border (as set on Custom tab)   =   Unchecked.

Under Global Image Settings, I do have Restrict Borders to Media Library Checked, but that only affects Container and Footer, not anything in the Header.

I’ve tried a couple of different sub themes and they all add the CSS for #header #branding img

If possible I’d like to eliminate that CSS, rather than add more to override it.

[Weaver]

If I were doing your header, I’d take a step back to see a more global idea of what you want to do.

I could picture putting you logo on the left and pushing the title/tagline a bit to the right.

The easiest way to do that would be to hide the standard title/tagline (so they will still be accessed for SEO), and use the header widget area. Put the logo in the 1st  widget, and the title/tagline in a second widget, either by direct HTML or using the title/tagline shortcodes. Since you have X-Plus, you can set the widths for those to whatever % you want.

I think that would be a better approach than fiddling with a couple of margins at this point.

[Author]

Posts