Strange CSS Issue

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.

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?

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.

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;
}

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.

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>

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?

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.

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.

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

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: https://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.

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.

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

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.