Support » Plugin: WP Biographia » [Plugin: WP Biographia] Mis-aligned Profile and Bio information in Custom Community

  • Resolved kimi.keith

    (@kimikeith)


    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/

Viewing 15 replies - 1 through 15 (of 22 total)
  • Plugin Author vicchi

    (@vicchi)

    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

    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.

    Plugin Author vicchi

    (@vicchi)

    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

    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.

    Plugin Author vicchi

    (@vicchi)

    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

    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!

    Plugin Author vicchi

    (@vicchi)

    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

    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)

    Plugin Author vicchi

    (@vicchi)

    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

    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?

    Plugin Author vicchi

    (@vicchi)

    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

    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

    Oh, and Firefox 13.0.1 it is misaligned too!

    Plugin Author vicchi

    (@vicchi)

    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

    [ 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

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘[Plugin: WP Biographia] Mis-aligned Profile and Bio information in Custom Community’ is closed to new replies.