Getting rough with CSS in the sidebar

[Martin]

Hooookay.

I'm a few steps further along the road of happiness in skinning s9y.
Now, I have a question concerning the sidebar and its elements.

Let's say I wanted to apply a new div style to the individual entries in my sidebar.

The way I understand it

Code: Select all

div.serendipitySideBarItem

will give any property to i.e. the entire list of recent entries, while

Code: Select all

.serendipitySideBarTitle

will give the property only to the title.

what I would like to do is implement a

Code: Select all

.serendipitySideBarEntry

that will set the properties of each individual entry in the recent entry list so that I could make something like this: http://www.hastalasiesta.org/bilder/entryStyled.jpg by specifying a 1px solid broder in the style.css.

Creating the CSS-class is no problem, but I'm at odds end as to where I should go to tell serendipity that each and every entry in its "Recent entries" plugin should adhere to this rule.

Help would be greatly appreciated.

As a sidenote; I used the Recent Entries plugin as an example, but I am wondering about how to modify the output of each and every of these plugins...

-m

[tadpole]

Here's the CSS that will do what you want to the recent entries plugin:

Code: Select all

.sidebar_content_serendipity_plugin_recententries a {
  display: block;
  border: 1px black solid;
  border-bottom: 0;
  padding: 0.2em;
  padding-bottom: 0;
}

.sidebar_content_serendipity_plugin_recententries div.serendipitySideBarDate {
  border: 1px black solid;
  border-top: 0;
  margin-bottom: 0.8em;
  padding: 0.2em;
}

.sidebar_content_serendipity_plugin_recententries br {
   display: none;
}

Other plugins are a bit different since they don't have multiple in each plugin--if you'd like to give another example I'd be happy to help out. If you want to figure it out yourself, take a look the standard's section on selectors.

[Martin]

Yes, but as far as I can see there is no <div>-tag surrounding each entry. There is a <div> tag called .sideBarDate for the dates, but that's only halfway there.

This is the source that serendipity makes for the Recent Entries plug in my browser :

Code: Select all

h3 class="serendipitySideBarTitle sidebar_title_serendipity_plugin_recententries">Recent Entries</h3>
        <div class="serendipitySideBarContent sidebar_content_serendipity_plugin_recententries">
<a href="/blog/index.php?/archives/19-The-best-laid-plans-of-mice-and-men....html" title="The best-laid plans of mice and men...">The best-laid plans of mice and men...</a>
<br />
<div class="serendipitySideBarDate">Tuesday, October 19 2004</div>
<br />
<a href="/blog/index.php?/archives/16-A-conversation-between-me-and-my-site.html" title="A conversation between me and my site">A conversation between me and my site</a>
<br />
<div class="serendipitySideBarDate">Tuesday, October 12 2004</div>
<br />

The classes called in the CSS you posted doesn't seem to be generated, which is more or less what I am wondering how to change.
I'd like to know where to find the code that generates this HTML for the plugins, so that I can add classes like the ones you are mentioning to the output of each.

[tadpole]

The code is in plugins/serendipity_plugin_recententries/serendipity_plugin_recententries.php, but you don't need to change it. The CSS I posted gives the result you want, and if you add a div to the plugin you will have to edit the plugin every time you update your software. Please just try the code I sent you--I tested it, it works.

The first block selects the links and wraps a border around the top, left, and right sides. The second block selects the serendipitySideBarDate div and wraps a border around the left, right, and bottom. The effect is to create a box around the two without having to resort to adding superfluous elements.

[Martin]

I did try it, and I can't get it to work. I also tried it with the default template to see if there was something wrong with the template I was using, but that didn't work either.

Did you test this successfully on your blog? If so, what template are you using?

I still see the problem as being that the CSS-code you gave me target a class that is in fact non-existent in the output from serendipity.

Edit: I have successfully styled my links in the sidebar by targetting

Code: Select all

div.serendipitySideBarContent a

and I have made the classes

Code: Select all

div.linkage a {
display: block; }

div.linkage a:hover {
display: block; 
padding-left: 10px;
border-left: 8px solid #FFFFFF;}

div.linkageinline a {
display: inline; }

That I use to style links in my HTML nuggets.

-m

[tadpole]

I just tried it on http://www.hastalasiesta.org/blog/ (ala EditCSS) and it worked. Yes, and I use idea. What class did I use that is non-existant?