amberlynnbenton

For anyone else who is struggling with 1 px transparent border in their background repeats here is what I have learned:

So this isn’t really a wordpress issue – but for a long time I thought it was! I was creating repeat patterns in Illustrator to use as background images for my header and background. See examples here: amberlynnbenton.com.

I was running into a one pixel transparent border that was totally ruining the effect. I saw other people online who were struggling with the issue as well – and I tried fixing it for many days with code to no avail. (The repeats worked perfectly in illustrator!) I found this article very helpful:

https://graphicdesign.stackexchange.com/questions/42280/white-border-around-transparent-png-after-illustrator-export

Sure enough, this was my issue. When I created my artwork I was sizing the artboard to fit the selected artwork – which isn’t a problem until you export it out to the web. So now I have a new routine – I make sure the artboard is aligned as described in the article and has the same dimensions as my artwork. Then I use the align tool to aligh the artwork to the artboard and export. Voila! No pesky transparent borders!

Here is the code that finally resolved the issue of centering the logo over the header:

<div class="navbar-brand">
            <h1 class="logo" style="margin-left:25%;">
               <a href="https://www.amberlynnbenton.com/">
<img src="https://www.amberlynnbenton.com/wp-content/uploads/2015/09/AmberLynnYellow.png" alt="Amber Lynn Benton" align="middle">
</a>
            </h1>
        </div>

I think that the navbar-brand is a bootstrap class? Anyway it’s not listed in my css so I had to find an html fix. There is probably a better way, but to fix this issue I added a style with a margin-left value of 25%. Check it out: amberlynnbenton.com

Here’s the code:

<div class="navbar-brand">
            <h1 class="logo" style="margin-left:25%;">
               <a href="https://www.amberlynnbenton.com/">
<img src="https://www.amberlynnbenton.com/wp-content/uploads/2015/09/AmberLynnYellow.png" alt="Amber Lynn Benton" align="middle">
</a>
            </h1>
        </div>

I’m going to mark this as resolved – hopefully someone else will find it helpful. I am truly bumbling so if someone else happens upon this post and would like to post a more knowledgeable reply or a better fix it would be appreciated.

I think that the navbar-brand is a bootstrap class? Anyway it’s not listed in my css so I had to find an html fix. There is probably a better way, but to fix this issue I added a style with a margin-left value of 25%. Check it out: amberlynnbenton.com

<div class="navbar-brand">
            <h1 class="logo" style="margin-left:25%;">
               <a href="https://www.amberlynnbenton.com/">
<img src="https://www.amberlynnbenton.com/wp-content/uploads/2015/09/AmberLynnYellow.png" alt="Amber Lynn Benton" align="middle">
</a>
            </h1>
        </div>

Tim,

I have an open post about the class ‘navbar-brand’. My site is amberlynnbenton.com.

I’m using the Genesis Simple Hooks plugin to place the logo over the header as I have a custom header background image.

Am I correct in assuming that this div is not set to the width of the entire header? I want to center the logo horizontally on the header but it Is remaining on the left. Since I have set it to align ‘middle’ I’m assuming it is aligned in the div, but the div is just shorter than the header.

I unhooked the defualt header and placed this code inside the appropriate box in the plugin:

<div class="navbar-brand">
            <h1 class="logo">
               <a href="https://www.amberlynnbenton.com/">
<img src="https://www.amberlynnbenton.com/wp-content/uploads/2015/09/amberlynnheader.png" alt="Amber Lynn Benton" align="middle">
</a>
            </h1>
        </div>

Thoughts?

So I have been bumbling around for many hours but I have made some progress. I used the same code mentioned above except I left out this portion to remove the header title:

.site-header h1.site-title a {
display: none;

Instead I did use the Genesis Simple Hooks plugin to get my logo to display on top of the header. I checked the box to unhook the default header and then inside the navbar-brand’ div I put in an img src for my logo along with a link for it to go back to the homepage and used my name as alt text like this:

<div class="navbar-brand">
            <h1 class="logo">
               <a href="https://www.amberlynnbenton.com/">
<img src="https://www.amberlynnbenton.com/wp-content/uploads/2015/09/amberlynnheader.png" alt="Amber Lynn Benton" align="middle">
</a>
            </h1>
        </div>

I’m still struggling with centering it inside the header – the align + middle isn’t working so I’m assuming that the navbar-brand div is not set to the entire width of the banner but rather the left half of the banner.

I’m not sure if my code I’m using is clean – I’m open to learning where my mistakes are and learning more efficient ways to do things. Any help appreciated.