Alignment issues

Hi there,

This is probably almost definitely a CSS issue, with either your theme or another plugin using some CSS which isn’t playing well with WP Biographia. There’s so many potential variations of CSS in a WordPress install that, sadly, this happens quite a lot. Can you post a publicly accessible URL to your site with an example of this happening and I’ll take a look.

-Gary

Thank you for taking a look at this. Here is a link to the example:

https://phototravelerusa.com/new-post-for-commenting/

If I choose to display icons instead of link, the alignment is fine.

I would also like to ask if it’s possible to include a Pinterest link?

Also, I thought my bio was too long, so I updated it in the WordPress User area, but the bio box bio didn’t update with the new bio. How do I make that happen?

Thanks so much for your help & quick reply!

Lori

https://phototravelerusa.com/new-post-for-commenting/

If I choose to display icons instead of link, the alignment is fine.

This is odd. I see a lot of alignment problems and they’re usually down to the current theme or a plugin, but they’re also almost always evident across all browsers. This isn’t the case here.

For Chrome and Safari under both Mac OS X and Windows, the alignment on your site seems to be fine; see https://imgur.com/CRJC200. But under Firefox on both Mac OS X and Windows and IE under Windows, the alignment is out; see https://imgur.com/UjGFXwi.

This leads me to think that there’s some browser specific hacks, possibly CSS hacks, that’s going on either in your theme or in another plugin that you have installed and active. But we need to narrow this down. So I suggest the following, tried and tested, process.

Firstly disable all your plugins and revert your site to a stock WordPress theme, such as Twenty Ten. Hopefully in addition to your live, publicly accessible site, you’ll have an offline or local version of the site; in this case, do this on that version. It’s also worthwhile clearing the cache of each browser you’re using to test against.

Now (re)enable WP Biographia; does the alignment work across all browsers? If it doesn’t let me know.

If it does, (re)enable each plugin, testing to see if the problem recurs. If it does, let me know which plugin was enabled when the problem recurred.

When all of your plugins are active and none of them have made the problem recur; swap back to your current theme. Does the problem recur here? If it hasn’t by now, it should do.

At the end of this process, we should be able to identify which plugin is not playing well or whether it’s your theme.

Also, if your theme is free and publicly available to download, please post a download link so I can try testing on one of my local installs. If it’s a premium or paid for theme, then this isn’t something I’ll be able to help with and you’ll need to raise this with the people you bought the theme from.

I would also like to ask if it’s possible to include a Pinterest link?

This is covered in the FAQ section of the plugin’s documentation and it’s broken out and covered in a slightly easier to read form in FAQs 14 and 15.

To add support for a new social network/contact link, you’ll need to add some code that calls the wp_biographia_contact_info and wp_biographia_link_items filters from your theme’s functions.php. There’s an example of how to do this in the plugin’s Filter Support and Usage documentation that actually uses Pinterest as a working example.

Also, I thought my bio was too long, so I updated it in the WordPress User area, but the bio box bio didn’t update with the new bio. How do I make that happen?

Out of the box, WordPress provides a field in the user’s profile to add biographical information; you’ll find this under Dashboard -> Users -> Your Profile -> About Yourself -> Biographical Info. This is the profile field that WP Biographia uses by default to supply the biography text.

The plugin also adds another, shorter, biography field to the profile under Dashboard -> Users -> Your Profile -> About Yourself -> Biography Options -> Biographical Excerpt. This excerpt is used in the plugin’s sidebar widget under Dashboard -> Appearance -> Widgets -> WP Biographia -> Use User’s Short Biography.

The biography excerpt can also be configured via the radio button (Display the full text of the user’s biography / Display the excerpt of the user’s biography) in the plugin’s settings and options under Dashboard -> Settings -> WP Biographia -> Display. This can be done on a global basis for the front page, for individual posts, for individual pages and for each of the built in archive types that WordPress supports as well as for custom post types, should your theme support them or should you have added them manually via your functions.php.

-Gary

No reply for a week here, so I’m assuming everything worked out and I’m flagging this as resolved. Feel free to reopen this thread if that’s not the case.

-Gary

Hello Gary –

https://phototravelerusa.com/lori-rowland/

I apologize for not doing my part sooner… just busy… you know how that goes. Anyhow, I worked through the steps of deactivating all the plugins & theme. When all was deactivated, the alignment worked perfectly. Then, step by step, I reactivated the plugins and checked in 4 browsers and the alignment worked perfectly. When I reactivated my theme, the problem reintroduced itself. The theme is one I created with Artisteer 4. I went to Firebug and this is what I found in the html that is associated with the image box:

<div class=”wp-biographia-container-around” style=”background-color: #B2E0F8; border: 1px solid #605CB7;”>
<div class=”wp-biographia-pic” style=”height:100px; width:100px;”>
<img class=”wp-user-avatar wp-user-avatar-100 avatar avatar-100 photo” width=”100″ height=”100″ alt=”Lori Rowland” src=”https://phototravelerusa.com/wp-content/uploads/2013/03/LoriProfilePicTransparentBG229x263-150×150.png&#8221; onerror=”this.src=”https://phototravelerusa.com/wp-content/themes/PhotoTravelerUSA_Light2/images/no-avatar.jpg””&gt;
</div>
<div class=”wp-biographia-text”>
<h3>About Lori Rowland</h3>

When I hover over this line, <div class=”wp-biographia-pic” style=”height:100px; width:100px;”>, I notice that Firebug separates the highlighting on the avatar photo. The yellow outer box is beside the photo and the purple highlighting box remains centered around the white photo background. I hope I’m explaining it properly. I’m not even sure it’s relevant information. What follows is the code related to the avatar photo area.

Here’s what I inherited from WP Biographia:

element.style {
height: 100px;
width: 100px;
}
.wp-biographia-pic {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #E7E7E7;
float: left;
height: 100px;
margin: 0 -122px 0 0 !important;
padding: 10px !important;
width: 100px;
}

**In Firebug, the height & width elements in .wp-biographia-pic are lined through, I assume that means they have been overridden by something else? For some reason, that didn’t copy & paste. The height & width in element.style are not lined through.**

Here’s what I inherited from my theme:

.art-postcontent, .art-postcontent li, .art-postcontent table, .art-postcontent a, .art-postcontent a:link, .art-postcontent a:visited, .art-postcontent a.visited, .art-postcontent a:hover, .art-postcontent a.hovered {
font-family: Verdana,Geneva,Arial,Helvetica,Sans-Serif;
line-height: 175%;
}
.art-postcontent, .art-postheadericons, .art-postfootericons, .art-blockcontent, ul.art-vmenu a {
text-align: left;
}
.art-sheet {
cursor: auto;
}
#art-main {
cursor: default;
font-family: Verdana,Geneva,Arial,Helvetica,Sans-Serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
}
body {
color: #22292A;
}

Could it be the line height of 175%? I’m not sure. I would be happy to provide you more info. Can I email it or how should I get it to you?

Thanks for your help!!!! I really appreciate it!!

Lori

Your theme’s CSS is adding a 10px margin to all images (see style.css:1848) and it’s this that is pushing the avatar image to the corner.

You’ll need to override this for images in the .wp-biographia-pic class, either in your theme’s CSS (as it looks like one you’ve written, from my reading of your posts) or in custom CSS plugin such as this one – https://www.ads-software.com/extend/plugins/custom-css-manager-plugin/.

Something like this should do the trick, though you might need to tweak it a bit …

.wp-biographia-pic {
    margin: 0 0 0 0 !important;
}

-Gary

Just another thought –

Could it be possible that I have a setting somewhere within WP that prevents edits from showing? I can see my edits in the code though.

Hi Lori,

Which edits? The ones you’re making to the CSS?

-Gary

Ooops! One post didn’t show up.

I tried making the edits you suggested using Custom CSS Manager. They did not work even when I made adjustments like 50 px. I think the plugin wasn’t working. So I downloaded another CSS manager. My edits didn’t work there either. I edited my template css, no results. I’ve cleared my cache & tried the 3 main browsers. (The text/separators did line up properly in Chrome but the image was still off) Anyhow, that’s when I began to think that perhaps I have another setting either preventing the edits from showing up or perhaps I am editing the wrong thing.

I would be happy to open the website to you, can I email you the info directly. I really appreciate your help with this as I am really stumped.

Thanks so much!

Let’s take a step back. While I really appreciate your trust, accessing your site is not something I’d be comfortable with doing.

There’s two things we need to rule out to try and narrow this down. Firstly your theme and secondly the User Avatar plugin.

Disable the User Avatar plugin and revert your site to a stock WordPress theme, such as Twenty Ten or Twenty Eleven. Is the alignment good?

If it is, then re-enable the User Avatar plugin and re-check. Is the alignment still good?

If it still is, swap back to your custom theme and re-check.

Let me know how you get on. We’ll go through this step by step and hopefully narrow down what the cause is and then try to fix it.

-Gary

Hello Gary –

I reset my site using the 2012 theme. The Avatar alignment seems to be fine whether or not WP User Avatar is activated. I think we can exclude that plugin as the source. All my other plugins are activated and I am assuming that we can exclude them too. You can take a look.

https://phototravelerusa.com/lori-rowland/

I checked the site in 4 browsers. They are consistent with the layout. The text links at the bottom are also aligned properly in each browser. However, the image seems like it is placed a little high within the box. I feel that the problem is most likely my theme. I will leave this as it is until you have a chance to check it out.

Thanks for your help!

You’re right that in Twenty Twelve the avatar image doesn’t align with the top of the actual biography text. This is an artefact of that theme’s CSS for .entry-content h3 being inherited by the Biography Box. If you decide to stick with Twenty Twelve, this can be fixed via the custom CSS mechanism I can see you’re using.

But this is a minor tweak overall and I think you’re right, that the original cause of the alignment issues (way back when this thread started) is your custom theme.

Where next? I think the root cause is the CSS that Artisteer 4 has generated for you which means that this is a theme issue and not a plugin issue. You might want to see if the people behind Artisteer can help.

-Gary

Hi Gary –

Ok, believe it or not, I got the alignment issue fixed on the avatar using Firebug. I am still having troubles with the alignment of the separators between the social media links at the bottom of the window. It seems to work fine in Chrome & Safari but not IE 8 or Firefox 20.0.1.

https://phototravelerusa.com/lori-rowland/

Thanks for your help!

Lori

I’ve taken another look using Firefox and it looks like this is down to this CSS in /wp-content/themes/PhotoTravelerUSA_Light2/style.css …

.art-postcontent ul>li, .art-post ul>li, .art-textblock ul>li
{
   /* makes "ul li" not to align behind the image if they are in the same line */
  overflow-x: visible;
   overflow-y: hidden;
}

If you override overflow-y to it’s default value of visible, this does the trick for Firefox, though you may need to do some browser detection cleverness if this affects other browsers adversely (caveat: I’ve tested this in Firebug but not actually in a CSS file or on other browsers).

IE8 is, to be blunt, a nightmare. The next version of WP Biographia, which is currently under development (yes, I’ve actually started coding it!) will revamp the social media links list entirely, relying on the :after CSS pseudo element rather than the way in which the ‘|’ separator is specified in the current version. On the plus side, this will be way more browser standards compliant but it does mean that IE8 won’t be supported at all.

-Gary