Feed Entries in Abstractia

[sally_maria]

I've recently switched to using one of the Abstractia themes (Deep Forest) and I've mostly managed to adapt it how I want.

My feed entries still don't look quite right though, and I was hoping that someone might be able to help me sort them out. I'm using custom CSS adapted from previous entries here to make all feed entries have a userpic and to make them a fixed height.

.journal-type-Y .userpic {
background: url(link to userpic) center no-repeat;
width:100px;
height:100px;
float: left;
margin-top: -1.0em;
border: .50em solid #000400;
}

/* max-height for syndicated journals on reading page */
.page-read .journal-type-Y .entry-content {
margin-top: 1.5em;
max-height: 30em;
overflow: auto;
}

There are two problems that I'm not sure how to fix:
1. The style has a double border round the entry userpics - a thin line round the outside of the black box - and I'm not sure how to replicate that.
ETA - the thin line border isn't that obvious - I hope you might be able to see the difference in these two screen shots.




On the right, there's a line border round both the heading and the userpic, on the left, it's only round the heading.

2. The normal entries wrap nicely round the userpics, while the feed entries almost touch them and then continue straight down the page, as you can see on my reading page. I'd like to get them to wrap as well, if it's possible. FIXED thanks to foxfirefey

Thank you for any help you can give me.

Comments

[foxfirefey]

I don't see a thin line anywhere on any entries re: #1 so I don't know how to fix that. But as for problem #2 try this alternate:

.journal-type-Y .userpic {
background: url(http://i6.photobucket.com/albums/y241/sally_maria/Mood%20Theme/dreamsheep_rss.png) center no-repeat;
width:100px;
height:100px;
float: left;
margin-top: -1.0em;
border: .50em solid #000400;
display: inline;
margin-right: 1em;
margin-bottom: .5em;
}

.journal-type-Y .entry-contents { display: inline; }

/* max-height for syndicated journals on reading page */
.page-read .journal-type-Y .contents {
margin-top: 1.5em;
max-height: 30em;
overflow: auto;
}

[sally_maria]

Yes, thank you - that fixes the entry flowing problem, it looks much better.

I'll try and put some screen-shots in of the border to show what I mean.

[matgb]

Right, the first set of code is, I think, mine, but I'm not certain on that one. anyway, I can see why your normal entries have the border, and I don't see why it's not there, so if you just add
border-color: rgba(70, 70, 70, 0.25);
to the top batch of code it should bring it back, but I'm not 100% certain on it (it's definitely why it's there in the main layout).

The reason the wrapping doesn't work for the feed entries is because on a normal entry there's actually a picture there, whereas for feed entries we're telling the browser to put something there that actually isn't there, and I never figured out how to tell the other elements to flow around the non existent thing, but if anyone knows how that'd be cool.

[sally_maria]

Yes, I think you're right about it being your code, I seem to remember we had this conversation last time I was trying to mess it about. :-)

foxfirefey has come up with some changes that make the entries wrap for me - I've only tried them on this layout, but they work.

Unfortunately the extra line you've given me doesn't work - oddly enough, if you put it after the border: .50em solid #000400; line, it makes the black border a lighter colour, but if you put it before it doesn't seem to do anything.

[matgb]

Ah, yes, um, that line changes the colour, my suggestion changes the colour, but in slightly different ways, so the last bit of code applies. That makes sense. I'll have more of a play later, see if I can figure out a better way of doing it, my original code was a fudge on my blank layout anyway, adding something to an existing layer you can easily get clashes, if you work from scratch nothing clashes but you've got to get first principles in line.

[sally_maria]

Thank you very much for looking into it. I must admit I thought it would the easier of the two to fix, which just shows how much I don't know about these things.