Movable Type Community Forum > Author pictures next to entries using CSS

Full Version: Author pictures next to entries using CSS

Movable Type Community Forum > Using Movable Type > Default Stylesheets

joifoley

Jan 6 2004, 11:37 PM

im redesigning my site, and im doing sort of a community journal, where a few authors write entries. i thought itd be neat if each entry was next to a picture of the author. i found the topic here on the forums about how to do the author pictures with the entries, but im having trouble getting the design to actually work in css.

i did a few things. first, i tried floating the entry next to the picture. then, i tried floating the picture next to the entry. i tinkered around with a few other ideas, but none did exactly what i wanted them to do, nor did they work the same across browsers.

my css currently looks like this:

CODE

body {
    margin:0px 0px;
    padding:0px;
    text-align:center;
    font-family:verdana, arial, helvetica, sans-serif;
    font-size:10px;
    }

img {
    border:0px solid #ff0000;
    }

#Content {
    width:700px;
    margin:0px auto;
    text-align:left;
    padding:0px;
    border:1px solid #ff0000;
    border-width:0px 1px 0px 1px;
    background-color:#fff;
    }

#Header {
padding:100px;
margin:0px;
border:0px solid #ff0000;
border-width:0px 0px 0px 0px;
voice-family: "\"}\"";
voice-family: inherit;
width:auto;
background:;
text-align:;
background-image:url("--");
}
html>body #Header {
width:auto;
}

#Headermenu {
padding:10px;
margin:0px;
border:1px solid #ff0000;
border-width:1px 0px 1px 0px;
voice-family: "\"}\"";
voice-family: inherit;
width:auto;
background:;
text-align:left;
cursor:default;
}
html>body #Headermenu {
width:auto;
}

#Headermenu a,#Headermenu a:link,#Headermenu a:visited,#Headermenu a:active {
text-decoration:none;
cursor:default;
border:1px solid #ff0000;
}

#Headermenu a:hover {
text-decoration:none;
cursor:default;
border:1px solid #000;
background:#000;
}

#Main {
text-align:left;
width:auto;
}

#Menu {
float:right;
width:30%;
background:#fff;
border:1px solid #ff0000;
border-width:0px 0px 1px 1px;
margin-right:0px;
padding:0px;
}

#Authorpic {
}

#Entry {
}

my site is http://www.sistersublime.org.

here is a mockup of what i want: http://www.sistersublime.org/images/ssmockup.gif

any suggestions would be much appreciated

thanks so much,

joi.

dbabbage

Jan 7 2004, 12:50 AM

I've got to leave for work so can't give you full instructions for how to do this right now, but here's quite a nice idea for you to consider.

You can attach an image to any html tag by defining it as part of the "background" property in css.

In your main index template and archive templates, under the line:

If you added to the MT template for each entry

CODE

Add the code:

CODE

This creates a section that contains only a single blank space.

Then, in your css, add for each author:

CODE

.authorname {
    background: transparent url(images/authors/authorname.gif) top left no-repeat;
    height: 45px;
width: 45px;
    margin: 0px 0px 0px -55px;
}

This then puts in the background of that div created above, an image of the author. The css uses the author name selected by the MT tag to insert the correct image. (You'd need the code above for each authorname, pointing to the correct image obviously.)

This may require some considerable tweaking. The non-breaking space in the div may create layout problems. There are ways around this if so... The negative margin should move the image off to the left as you want. Again much tweaking required.

This is a starting point only. More another time.

joifoley

Jan 7 2004, 09:20 AM

thanks so much! im excited to see the rest of your suggestion, if you get the time...

joi.

dbabbage

Jan 7 2004, 10:06 AM

I'm trying to mock together a working version to demonstrate to you what I'm talking about. However, it's a little tricky, because your actual site doesn't contain any content even though your sample image does. If it were possible for you to actually post some entries on your site, I could then re-write the code that MT produced for you to include these author images.

As it is, you site does not include any of the code that would normal go around an entry, because there is no entry!

Also, if you can post URLs to those two author images that you've got in your example gif, I could just point my sample CSS straight to them, and make sure the code works right on images that size.

joifoley

Jan 7 2004, 05:51 PM

well, let me make sure we're on the same page... i know how to include the images. the images arent a problem. the problem for me is getting the actual text of the entries to sit next to the images, in the way they do in the mockup.

is that what you're trying to do, as well, or are you just focusing on the pictures? i just wanna make sure we're talking about the same problem...

thanks again for your help,

joi.

noelgreen

Jan 7 2004, 06:44 PM

I didn't do this with my css, but I did do it so it's automatic depending on author. I'm talking about how it's done on MonkeyType.org

First off I set up each author as his or her own category. So when they post something they select their name from the drop down list. They are then archived as category pages as well. However, I think you could just do this with the author tags... I use the category thing for the archives.

ANYWAY...

Then you can use something like this for the title code... this is taken from my site.

CODE

<h2 class="date">
<img src="<$MTEntryCategory$>.gif" align="middle" border="0"> <$MTEntryTitle$>...
</h2>

Then just upload an image that is the name of the category in this instance, or the author name, or even author nickname if you like, and viola! That's it.

Make sense?
If not email me and I'll be happy too.

kadyellebee

Jan 7 2004, 07:30 PM

QUOTE (joifoley @ Jan 7 2004, 06:51 PM)

So you want the paragraph not to wrap around the image, but the image should be to the left of the paragraph? Something like this: tester page? View the source and see if it helps you

Kristine

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.