WordPress.org

Ready to get started?Download WordPress

Forums

WP Biographia
[resolved] Mis-aligned Profile and Bio information in Custom Community (23 posts)

  1. kimi.keith
    Member
    Posted 2 years ago #

    I have a side-bar in my Custom Community theme and I think that it is squashing my biographical information so that the bio text appears below the avatar instead of alongside the avatar. Can I change this using CSS? My theme has a customisable CSS tab so I know where to put the CSS but I do not know what to write. I am using WP 3.4, WP-Biographia v 1.3.0. Thank you.

    http://wordpress.org/extend/plugins/wp-biographia/

  2. vicchi
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    Have a look at the information in this post; it should tell you what you need to know in order to hack the plugin's CSS. Let me know if you need any more information and/or help.

    -Gary

  3. kimi.keith
    Member
    Posted 2 years ago #

    I had read your article but my CSS is non-existant so I did not know where to start! I tried this though:

    '.wp-biographia-text {
    margin-top: -120px;
    margin-top: -120px !important;
    }'

    It seems to work but there is still a strange border around my avatar. Is this CSS ok to use and do you have any advice on how to change the CSS for the avatar border?
    Thank you.

  4. vicchi
    Member
    Plugin Author

    Posted 2 years ago #

    It would really help if I can see this in-situ on your site so I can try and work out what's going on. Do you have a URL I can visit?

    -Gary

  5. kimi.keith
    Member
    Posted 2 years ago #

    Sure, I have taken the coming soon plugin page off for now. You can see the problem on my site here (without the CSS that I wrote above): http://www.twintalk.co.za/2012/06/18/saving-childs-education-liberty/
    Thank you Gary.

  6. vicchi
    Member
    Plugin Author

    Posted 2 years ago #

    So it's your theme that's doing this. Somewhere in the post template you're using it looks like there's a whole load of inline (yuck) CSS definitions. One of these looks like this ...

    div.post img { margin: 15px 0; border: none; border: none !important; }

    ... this forces all images contained within a div with the post class to have a top margin of 15px applied and it's this which is forcing the author's avatar to be pushed down to the bottom of the div which contains the avatar image.

    Take a look at this image which is your site with the CSS unchanged, compared with this image which is after I've hacked your CSS within my browser's developer's console.

    On a side note, inline CSS and CSS which applies to all images regardless of their use within a div makes life very interesting some times, such as right now, and should be avoided if at all possible.

    I think that it is squashing my biographical information so that the bio text appears below the avatar instead of alongside the avatar

    ... I can't see this on your site right now, the biography text is nicely aligning to the right hand side of the avatar for me in Safari, Chrome and Firefox?

    -Gary

  7. kimi.keith
    Member
    Posted 2 years ago #

    Hi Gary
    Thanks for showing me where the problem was. There is a CSS tab in Custom Community and I changed the CSS to:

    'div.post img { margin: 0px 0; border: none; border: none !important; }'

    that seemed to work! Thank you!

    For the biographical text, this is still misaligned in Chrome. It looks lovely in IE. This is what it looks like in Chrome now without my CSS: http://www.twintalk.co.za/wp-content/uploads/2012/06/Twin-Talk.png

    I can't use that previous CSS that I wrote because it gets messed up (pushed too far up) in IE! Any ideas on how to make sure it aligns in Chrome and IE?
    Thank you Gary!

  8. vicchi
    Member
    Plugin Author

    Posted 2 years ago #

    Hmmm ... what version of Chrome and what OS are you using?

    I've just checked this out under the following OS/browser combinations ...

    Windows 7 Enterprise, SP 1
    Chrome 20.0.1132.43 m
    Firefox 13.0.1
    IE 8.0.7601.17514

    Mac OS X 10.7.4
    Chrome 20.0.1132.43
    Firefox 13.0.1
    Safari 5.1.7

    ... the biography text is aligned correctly to the right hand side of the avatar image on all of these.

    -Gary

  9. kimi.keith
    Member
    Posted 2 years ago #

    I am using:

    Windows XP, SP 3 (sorry, I live in deep dark Africa - LOL)
    Chrome 20.0.1132.43 m

    (works fine in IE)

  10. vicchi
    Member
    Plugin Author

    Posted 2 years ago #

    So that wasn't the answer I expected. Yes, we're running different versions of Windows, but I can't see that that would make a difference as (for any browser which isn't IE) all the browser's rendering code is self contained. The OS shouldn't make a difference. But it does.

    I'm scratching my head here.

    Two possible things which spring to mind ... firstly are you running any Chrome extensions? Maybe there's an incompatibility there. Somehow I doubt it but it's worth checking.

    Secondly, maybe it's still a theme issue. Have you tried reverting back to one of the stock reference themes that ship with WordPress, such as Twenty Ten? If the alignment of the biography text and image looks fine under a stock theme, then we might have to go back and look at the theme's CSS again.

    -Gary

  11. kimi.keith
    Member
    Posted 2 years ago #

    Hi Gary
    I tried the Twenty Ten theme and its still mis-aligned. I then deactivated all my Chrome extensions and it is still mis-aligned. I even tried it in incognito window - the same thing. Do you have any more ideas to try?
    It looks fine on iPad in Safari too... looks like it is just Chrome - strange... I wonder if anyone else has had this problem?

  12. vicchi
    Member
    Plugin Author

    Posted 2 years ago #

    This just makes no sense to me. I don't suppose you have another machine you get test this on? Would be good to see whether it's a general Chrome on XP issue or just your machine (although I have no idea how this could be).

    -Gary

  13. kimi.keith
    Member
    Posted 2 years ago #

    Hi Gary
    You are not going to believe this. I tried it on another PC, Windows XP Home Edition SP 3 with Chrome 19.0.1084.56 m and IE 8.0.6001.18702IC and in both IE and Chrome, the text is misaligned! That's weird! So, I guess that it is not a problem with Chrome or the other PC. I wonder what it could be then?
    ~kimi

  14. kimi.keith
    Member
    Posted 2 years ago #

    Oh, and Firefox 13.0.1 it is misaligned too!

  15. vicchi
    Member
    Plugin Author

    Posted 2 years ago #

    That noise you can head right now is me screaming and banging my head against the desk in sheer frustration.

    So let's take a step back and try a different angle. Could you possibly let me have a copy of your theme, WP Biographia's settings/options (you can find these on the plugin's Colophon tab on the admin page) plus a list of all the plugins you have installed? I'll them try and duplicate your environment as much as I can and see if I can get this to happen for me.

    -Gary

  16. kimi.keith
    Member
    Posted 2 years ago #

    [ Code edited with backticks (not the single quote character). Moderator note: when sharing code or lists, please wrap the text in backticks or use the code button. ]

    Hi Gary
    Sorry it took me so long to reply back. Here are the WP Biographia settings/options:

    Array
    (
        [wp_biographia_installed] => on
        [wp_biographia_version] => 310
        [wp_biographia_style_bg] => #ffffff
        [wp_biographia_style_border] => none
        [wp_biographia_display_front] =>
        [wp_biographia_display_archives] => on
        [wp_biographia_display_posts] => on
        [wp_biographia_display_pages] =>
        [wp_biographia_display_feed] => on
        [wp_biographia_display_location] => bottom
        [wp_biographia_content_prefix] => About
        [wp_biographia_content_name] => display-name
        [wp_biographia_content_authorpage] => on
        [wp_biographia_content_image] => on
        [wp_biographia_content_image_size] => 100
        [wp_biographia_content_bio] => on
        [wp_biographia_content_icons] => on
        [wp_biographia_content_alt_icons] =>
        [wp_biographia_content_icon_url] =>
        [wp_biographia_content_email] => on
        [wp_biographia_content_web] => on
        [wp_biographia_content_twitter] => on
        [wp_biographia_content_facebook] => on
        [wp_biographia_content_linkedin] => on
        [wp_biographia_content_googleplus] => on
        [wp_biographia_content_delicious] =>
        [wp_biographia_content_flickr] =>
        [wp_biographia_content_picasa] =>
        [wp_biographia_content_vimeo] =>
        [wp_biographia_content_youtube] => on
        [wp_biographia_content_reddit] =>
        [wp_biographia_content_posts] => extended
        [wp_biographia_content_link_target] => _self
        [wp_biographia_content_link_nofollow] =>
        [wp_biographia_admin_new_users] => administrator,contributor
        [wp_biographia_admin_hide_profiles] =>
        [wp_biographia_category_exclusions] =>
        [wp_biographia_post_exclusions] =>
        [wp_biographia_global_post_exclusions] =>
        [wp_biographia_page_exclusions] =>
        [wp_biographia_admin_content_priority] => 10
        [wp_biographia_admin_excerpt_priority] => 10
        [wp_biographia_display_archives_product] =>
        [wp_biographia_display_product] =>
        [wp_biographia_display_archives_forum] => on
        [wp_biographia_display_forum] => on
        [wp_biographia_display_archives_topic] => on
        [wp_biographia_display_topic] => on
        [wp_biographia_display_archives_reply] => on
        [wp_biographia_display_reply] => on
        [wp_biographia_display_archives_gpages] => on
        [wp_biographia_display_gpages] => on
        [wp_biographia_display_archives_wpbdm-directory] =>
        [wp_biographia_display_wpbdm-directory] =>
        [wp_biographia_display_archives_question] => on
        [wp_biographia_display_question] => on
    )

    and

    Array
    (
        [1] => Array
            (
                [ID] => 1
                [user_login] => admin
                [wp_biographia_suppress_posts] =>
                [wp_biographia_suppress_pages] =>
            )
    
        [10] => Array
            (
                [ID] => 10
                [user_login] => KimiCat
                [wp_biographia_suppress_posts] =>
                [wp_biographia_suppress_pages] =>
            )
    
        [16] => Array
            (
                [ID] => 16
                [user_login] => KimKeith
                [wp_biographia_suppress_posts] =>
                [wp_biographia_suppress_pages] =>
            )
    
        [6] => Array
            (
                [ID] => 6
                [user_login] => RobKeith
                [wp_biographia_suppress_posts] =>
                [wp_biographia_suppress_pages] =>
            )
    
        [4] => Array
            (
                [ID] => 4
                [user_login] => twintalkmommy
                [wp_biographia_suppress_posts] =>
                [wp_biographia_suppress_pages] =>
            )
    
    )

    Here is a list of all my (many) plugins:

    Ad Codes Widget Version 110709
    
    Add Link to Facebook Version 1.159 
    
    Ads Manager WP/BB Version 1.6.1 
    
    Akismet Version 2.5.6 
    
    AutoChimp Version 1.14 
    
    bbPress Version 2.0.3
    
    BP Group Organizer Version 1.0.4 
    
    BP Show activity liked names Version 1.0
    
    BuddyPress Version 1.5.6 
    
    BuddyPress Activity Plus Version 1.4.1 
    
    BuddyPress Album Version 0.1.8.11 
    
    BuddyPress Community Stats Version 0.5.1 
    
    Buddypress Component Stats Version 1.0 
    
    BuddyPress Edit Activity Stream Version 0.5.1 
    
    Buddypress Friends Version 1.2 
    
    BuddyPress Group Email Subscription Version 3.2 
    
    BuddyPress Groups Extras Version 3.2.2 
    
    BuddyPress Like Version 0.0.8
    
    BuddyPress Moderation Version 0.1.6
    
    BuddyPress Registration Groups Version 0.8 
    
    BuddyPress Share It Version 1.1.7 
    
    BuddyPress Twitter Version 1.2
    
    Business Directory Plugin Version 2.0.4.1 
    
    CD BuddyPress Avatar Bubble Version 2.3.1 
    
    Chat Lite Version 1.0.7
    
    Connections Version 0.7.2.6 
    
    CubePoints Version 3.1 
    
    CubePoints Buddypress Integration Version 1.9.8.4
    
    Cudazi Latest Tweets Version 0.1 | By Cudazi
    
    Dynamic Widgets Version 1.5.2
    
    Easy Digital Downloads Version 1.0.8.5 
    
    Fanpage Connect FREE Version v1.4.6 
    
    gtrans Version 1.0.20 
    
    Invite Anyone Version 1.0.13
    
    MarketPress Lite Version 2.5.1
    
    Members Version 0.2
    
    Newsletter Sign-Up Version 1.7.3
    
    Picatcha Version 1.3.1 
    
    Q&A Lite Version 1.0.4
    
    Quick Cache Version 111203 
    
    Rating-Widget Plugin Version 1.4.2 
    
    Recently Registered Version 2.3 
    
    s2MemberĀ® Framework Version 120622 
    
    Simple "Coming soon" And "Under construction" Version 1.0.1 
    
    Social Login for wordpress Version 2.3 
    
    Social Media Widget Version 2.9.4 | By Brian Freytag
    
    sxss Buddypress Shared Friends Version 1.0 
    
    TDLC Birthdays Version 0.4 
    
    U BuddyPress Forum Editor Version 1.3 
    
    User Security Tools Version 1.1.1 
    
    WangGuard Version 1.4.6.1 Version 1.0.9 
    
    Widget Logic Version 0.52 
    
    WordPress Database Backup Version 2.2.3
    
    WordPress PopUp Version 4.3.2 
    
    WordPress SEO Version 1.2.5 
    
    WP-Table Reloaded Version 1.9.3 
    
    WP Biographia Version 3.1 
    
    WPMU DEV Dashboard Version 3.1.2 
    
    WP Show IDs Version 110709
    
    WP to Twitter Version 2.4.5 
    
    WP Users Exporter Version 1.2

    and, sorry to ask another stupid question but how do I send you my theme? Here is the link to the free theme in case this will suffice:

    http://wordpress.org/extend/themes/download/custom-community.1.8.9.1.zip

    Thanks so much for all your help!

    ~kimi

  17. vicchi
    Member
    Plugin Author

    Posted 2 years ago #

    Wow. That's an impressive set of widgets. I think I'll put them to one side for now and focus on the theme. Will keep you posted.

    -Gary

  18. vicchi
    Member
    Plugin Author

    Posted 2 years ago #

    So try as I might, I can't replicate this at all. I think it's down to one of two things.

    1. It's a plugin CSS clash. This is usually the most probable cause based on past experience. Normally I'd try to replicate the site which is having issues but, as I'm sure you can understand, you've just got too many for me to go down this route and it would take far too much of what little time I have.

    2. It's a theme clash. This is also possible, but I can't replicate it. Of course, it may be that you've added something to your theme so just to be 100% sure we're looking at the theme, try running this command, from the shell, in the root of your theme which should be /wp-content/themes/custom-community ...

    $ find . -type f -exec md5 {} + | awk '{print $4}' | sort | md5

    ... on my local install, I get a final MD5 of 8be2e24103f919d7529c0001d320362c, this should match your value exactly.

    Other that this, I'm at a loss. I've tried everything I can think of to replicate this, but short of cloning every plugin you have (and you have a lot) I can't think of what else to check. I'm truly sorry, but I've run out of options here.

    -Gary

  19. kimi.keith
    Member
    Posted 2 years ago #

    Hi Gary
    It is not a plugin issue as I deactivated all my other plugins and the mis-alignment was still there. I have no idea how to run a command. I will try this if I can figure out what to do... sorry, I am a newbie! I tried to Google it to no avail. Do you run it on the FTP or something?

    But, I did find out something interesting. The biography only mis-aligns when there is more than one line of biographical information in the box. If there is only one line, it aligns perfectly! Could this info lead to a possible solution?

    ~kimi

  20. vicchi
    Member
    Plugin Author

    Posted 2 years ago #

    But, I did find out something interesting. The biography only mis-aligns when there is more than one line of biographical information in the box. If there is only one line, it aligns perfectly! Could this info lead to a possible solution?

    ... I think this is probably a symptom of the problem rather than the problem itself.

    Try as I might, I simply cannot reproduce this. One thing you might try is to do a clean install of WordPress on a local machine, export your site's content and import it into the new install and see if the problem recurs. If it doesn't, add in your theme from the source, not from your public site and see if the problem recurs. If it doesn't, then start to add in your plugins, one by one, to see if the problem recurs.

    If, after all of this, the problem doesn't recur, then there's something on your live site, maybe an edit to the theme or a plugin that you don't recall, doing this.

    -Gary

    [ Please do not bump, that's not permitted here. ]

  21. vicchi
    Member
    Plugin Author

    Posted 1 year ago #

    Haven't heard back from you in over 3 months so I'm going to assume you've either fixed this or it isn't an issue any more. Feel free to get back in touch if it still is.

    -Gary

  22. kimi.keith
    Member
    Posted 1 year ago #

    Hi Gary

    Sorry I did not get back to you. We went live that month! Themecraft solved the issue with CSS:

    'wp-biographia-container-none {
    background-color: transparent !important;
    border-radius: 0 0 0 0 !important;
    float: right;
    margin: 0 0 0 !important;
    padding: 0% !important;
    text-align: left !important;
    width: 21% !important;
    position: relative;
    top: -90px;
    width:640px;
    height:300px;
    }
    .wp-biographia-text {
    float: left;
    margin: 0px 0px 0px 150px;
    1height:290px;
    width:400px;
    }
    .wp-biographia-text .img.avatar{ height:32px;width:32px;}'

    FYI - in case anyone else has the same problem.

    Thank you.

    Regards

    Kimi

  23. vicchi
    Member
    Plugin Author

    Posted 1 year ago #

    Glad it got sorted out for you; that's good to hear.

    -Gary

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic