WordPress.org

Forums

Simple Staff List
Strange CSS Issue (14 posts)

  1. mitchellkarr
    Member
    Posted 1 year ago #

    I am trying to display the name of the staff member, the position, and bio to the right of the staff photo instead of underneath of it. I have used this code

    img.staff-member-photo {
    float: left;
    padding-right:10px;
    }

    that I found in this support forum to no avail. I have also tried this with and without the external CSS file option checked. Any ideas? Thanks.

    The webpage is http://cwgr.org/?page_id=15

    http://wordpress.org/plugins/simple-staff-list/

  2. gsbrock
    Member
    Posted 1 year ago #

    If you set your staff <img> to "position: absolute" and your <div> for the staff member info wrap to "position: relative" I believe it will work.

    You may need to find tweak the actual padding and margines, but that should get it floating the image to the left of the text block.

  3. mitchellkarr
    Member
    Posted 1 year ago #

    I couldn't get this to work. This is what is currently in my custom CSS box:

    img.staff-member-photo {
    float: left;
    position: absolute;
    padding-right:10px;
    }
    
    /*  Wrap around staff info  */
    .staff-member-info-wrap {
    position: relative;
    float: left;
    width: 70%;
    margin-left: 3%;
    }

    See anything wrong?

  4. gsbrock
    Member
    Posted 1 year ago #

    The only issue I see is that margin-left: 3%; will put your text overtop of your image. I set the margin-left higher and it seemed to work fine for me using Chrome v30.

  5. lothsun
    Member
    Posted 1 year ago #

    After inspecting your code, I noticed that all of your h1-h6 tags have "clear:both;" as one of their style properties. So if you add the code below to your stylesheet you should be good to go.

    .staff-member-name, .staff-member-position {
    clear:none;
    }
  6. mitchellkarr
    Member
    Posted 1 year ago #

    This is what is in the custom CSS box right now:

    img.staff-member-photo {
    float: left;
    position: absolute;
    padding-right:10px;
    }
    
    /*  Wrap around staff info  */
    .staff-member-info-wrap {
    position: relative;
    float: left;
    width: 70%;
    margin-left: 3%;
    }
    
    .staff-member-name, .staff-member-position {
    clear:none;
    }

    And it still won't move. I'm sorry to be blowing up this thread and this issue isn't the plugins fault. In fact, this is the easiest to use plugin and for my site, which will eventually be turned over to a client, it is perfect.

    I just don't understand why nothing is working. Is it possible that the CSS isn't overriding the default? Even simple changes don't work.

  7. lothsun
    Member
    Posted 1 year ago #

    Try this:

    .staff-member-name, .staff-member-position {
    clear:none; !important
    }

    If that doesn't work then you will need to do this:

    <h3 class="staff-member-name" style="clear:none;">[staff-member-name]</h3>

  8. mitchellkarr
    Member
    Posted 1 year ago #

    One thing I've noticed is that after I save the custom CSS, when I come back to that page the code is gone.

    Is it possible to bypass the custom CSS box and go straight into the plugin's CSS via the plugin edit link in WordPress and fix this issue?

  9. lothsun
    Member
    Posted 1 year ago #

    You could edit the plugins default css but if and when the plugin updates, your styling will be lost. If I were you, I would copy my template and custom css from the plugin to a random .txt file, uninstall and delete the plugin, then reinstall the plugin. that should restore the save functionality for the custom boxes.

    On the other hand, if you have checked the "use external stylesheet" checkbox, you can look for the custom css file and edit that. I believe it is named staff-list-custom.css or something close to that. I'm not sure where it is located though. It may be stored in the plugin directory or the theme directory.

  10. dvmac
    Member
    Posted 1 year ago #

    Hi guys,

    I appear to be having a similar issue. I'm using the Bootstrap framework and wanted to wrap each member inside a div with a class of .well so that they all appear in their own box.

    Whatever I try to do, I can't expand the .well parent to enclose the content. I have checked the 'use external stylesheet' box but it hasn't created a custom css file anywhere.

    I can work around this but it's a pain as the client will probably insist on the styling and I'll be forced to create the custom post type manually and build it again.

    Any ideas what might be going wrong? Thanks.

    http://dvmac.co.uk/rlt/our-chefs/

  11. lothsun
    Member
    Posted 1 year ago #

    dvmac, I see the box, .well, around your content. So I don't see your problem. As far as the location of the external style sheet, it is located in your current themes folder, which on your site would be: http://dvmac.co.uk/rlt/wp-content/themes/rosylee/simple-staff-list-custom.css. So it did create a custom css file for you. I don't know what problems you guys are having. I have never had an issue with this plugin and I have been using it on multiple sites for at least 6 months now.

  12. dvmac
    Member
    Posted 1 year ago #

    Hi there,

    Thanks for the quick response. I fiddled around a little more and managed to solve the issue. Sorry I didn't look in the theme folder, thinking it would probably be written to the plugin's css folder, but it makes sense now.
    I was just about to repost indicating that I'd resolved the issue but thanks for your help.

  13. lothsun
    Member
    Posted 1 year ago #

    No Problem mac. I'm not the plugin author, but I know he's been busy recently so I help out where I can.

  14. Tryah85
    Member
    Posted 1 year ago #

    For the record I was having the same issue using the Twentyfourteen theme. I used what mitchellkarr posted last and it does work! Make sure the " Write to external CSS file? (Leave unchecked for WP Multisite.)" is checked or it will not suffice. For some reason I kept reading make sure this is unchecked and it threw me off. Running WP 3.9.1 on Chrome v.35.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Simple Staff List
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic