Use CSS Boxes for Category Items

[railer]

Hi,
I could use some help with figuring out how get grey boxes to display around each category item in the sidebar menu.

I've been fiddling with the plugin_categories.tpl file, trying to style the list item but it won't work.

Here's an example of what I want to do:


Any ideas?

Thanks,
Railer

[carl_galloway]

Hi Railer,

check out this thread, and note Judeberts answer. I think this will give you the start that you need, but feel free to reply with your existing code, one of us will be able to help you fix it up. Good luck,

Carl

[railer]

Hi Carl,
Thanks for your reply. I set up Jude's code and it works only in IE/PC--at least in my version. Doesn't work in Safari/Firefox/Netscape. Also, in IE it's causing a piece of the masthead art to break to a new line, pushing the sidebar down. I tried that IE Float fix Jude mentioned, but no luck.

Thanks,
Railer

Staging site is at: http://www.magiprocess.com/blog

Here's what I really want to do:


And here's the code I put in my style.css file:

Code: Select all

.serendipitySideBarContent a:link, a:visited { 
    font-size: 10px;
    font-family: Myriad, Arial, Helvetica, sans-serif;
    text-align: left;
    font-weight: normal;
    color: #000000; 
    background: #BBBDBF; 
    display: block;
    padding: 3px 3px 3px 3px;
    margin: 6;
    text-decoration: none;  
} 

.serendipitySideBarContent a:hover { 
    font-size: 10px;
    font-family: Myriad, Arial, Helvetica, sans-serif;
    text-align: left;
    font-weight: normal;
    color: #000000; 
    background: #B6C261; 
    display: block;
    margin: 6;
    padding: 3px 3px 3px 3px;
    text-decoration: none;  
} 

.serendipitySideBarContent br { 
    display: none; 
} 

.serendipitySideBarContent img { 
    float: left; 
    margin-right: 0px; 
}

.serendipitySideBarContent input {
    width: 121px;
}

/* THE BACKGROUND ART BEHIND THE SIDEBAR */

#leftcolumn_bkgd {
	position:absolute;
	left: 0px;
	top: 94px;
	z-index:-1;
}

#mainpane {
    line-height: 140%;
    text-align: left;
    height: 1px;
    padding: 0px;
    spacing: 0px;
    width: 100%;
    border: 0px;
    margin: 0px;
}

[railer]

I'm noticing that the link color settings are conflicting with the body link colors. Not sure how to differentiate between the two. I'll keep hacking at it while waiting for your reply.

Best,
Railer

[judebert]

Problem number 1: I'm seeing a bunch of unknown characters in your CSS. Maybe they're UTF-8, and you're adding them to prevent lines from being executed. That's why your link colors aren't changing, for instance.

Problem number 2: Your header image is moving because that first link actually says "all <a> children of anything whose class is serendipitySideBarContent, and all <a> who have a link, and all <a> who have been visited." You need to put the .serendipitySideBarContent after each comma, essentially.

Since you don't have images in your sidebars, you don't need the float rule.

You only have <br> in expected places, so you can remove the br rule and see if you like the results.

After that, it all looked as you expected to me. I use FireFox on Windows XP at work, and FireFox on Debian Linux at home.

If you want the links to only be modified in the categories plugin, use .container_serendipity_categories_plugin instead of .serendipitySideBarContent.

I'll check up on you later tonight.

[railer]

Thanks Judebert,

Make that tomorrow. Going out for dinner. Thanks for your help. I'll try to implement it later tonight, but that's doubtful.

Best,
Railer

[judebert]

That's cool. It occurs to me that the "special characters" are probably tabs or something. Try the EditCSS FireFox extension to see what I'm talking about.

Good Luck!

[Guest]

Hi,
Okay, I implemented the changes you suggested. I'm getting there...

Below is the code I used to get the boxes (blocks) to display with the category names... it may not be elegant, but it's working. I know the anchor link styling is redundant, but it doesn't seem to work if I don't repeat it. Any suggestions?

My next related question is:

Q: Where do I set a padding-left value to get the titles to move away from the left edge of the boxes? I can't seem to make it work.

Thanks,
Railer

PS: I also have a related question regarding putting image bullets before the category titles. It's in a new thread, here >>

Code: Select all

a {

	text-decoration: underline;
}

a:link {
/*	color: #000000; */
	color: #B6C261;
}

a:visited {
/*	color: #000000; */
	color: #B6C261;
}

a:active {
/*	color: #000000; */
	color: #B6C261;
}

a:hover {
	color: #dfe784;
}

.serendipitySideBarContent 	a {
	text-decoration: none;
}

.serendipitySideBarContent a:link {
	color: #000000;
}

.serendipitySideBarContent a:visited {
	color: #000000;
}

.serendipitySideBarContent a:active {
	color: #000000;
}

.serendipitySideBarContent 	a:hover {
	color: #FFFFFF;
}

/* Original class title: .serendipitySideBarContent */

 .container_serendipity_categories_plugin a, 
 .container_serendipity_categories_plugin a:link, 
 .container_serendipity_categories_plugin a:visited { 
    margin-bottom: 2px;
	display: block;
	padding: 12px 3px 12px 8px;
	width: 117px;
	background: #BBBDBF; 
    font-family: Myriad, Arial, Helvetica, sans-serif;
    font-size: 10px;
	text-align: left;
    font-weight: normal;
    color: #000000; 
	text-decoration: none;  
} 

.container_serendipity_categories_plugin a:hover { 
    margin-bottom: 2px;
	display: block;
	padding: 12px 3px 12px 8px;
	width: 117px;
	background: #BBBDBF; 
    font-family: Myriad, Arial, Helvetica, sans-serif;
    font-size: 10px;
	text-align: left;
    font-weight: normal;
    color: #000000; 
    text-decoration: none;  
} 

.serendipitySideBarContent br { 
  display: none; 
} 

[railer]

Hi, the post above is mine. Strange, I was logged in, but got bumped...

Anyway, the link to the other thread about inserting a bullet image before category names is here...

Best,
Railer

[judebert]

You really need the EditCSS extension for FireFox. It lets you examine and change your CSS on-the-fly so you can see what's going on.

Using it, I can see that your .container_serendipity_categories_plugin stuff still has weird characters, preventing margin-bottom, font-family, color, and text-decoration from being recognized.

I also stacked all the bare link stuff, saving 8 lines.

When I fixed the weird characters preventing br from display:none, the archives links got squished together. So they're separated by breaks. I restricted the no-br to the category plugin with:

Code: Select all

.container_serendipity_categories_plugin br { 
 display: none; 
}

For a finale, I stacked the category a:hover with the other category links, then reduced its standalone CSS to:

Code: Select all

.container_serendipity_categories_plugin a:hover { 
 color: #FFF; 
} 

Which still provided the same effect. We could probably take the colors out of the container links, and move the .serendipitySideBarContent links underneath to save another few lines.

So, that took me to your actual question: the left padding. I used MODI from SlayerOffice (another incredible tool) to check out your CSS classes, which reported that it had padding-left:0px on each link. Since it normally only does that when the style is inline, I checked in the source: sure enough, there's 0 padding added inline to each of the category links. Have you done that in your category.tpl?

I used "padding-left:1em !important;" to force all the links to use 1 character padding on the left, and it looked good.

Try out EditCSS. Here's a snippet of what I did with it:

Code: Select all

.serendipitySideBarContent a ,
.serendipitySideBarContent a:link,
.serendipitySideBarContent a:visited,
.serendipitySideBarContent a:active,
.serendipitySideBarContent a:hover  {
	text-decoration: none;
	color: #000000;
}

/* Original class title: .serendipitySideBarContent */

 .container_serendipity_categories_plugin a, 
 .container_serendipity_categories_plugin a:link, 
 .container_serendipity_categories_plugin a:visited,
.container_serendipity_categories_plugin a:hover { 
 margin-bottom: 2px;
	display: block;
	padding: 12px 3px 12px 8px;
	width: 117px;
	background: #BBBDBF; 
 font-family: Myriad, Arial, Helvetica, sans-serif;
    font-size: 10px;
	text-align: left;
    font-weight: normal;
 color: #000000; 
	text-decoration: none;
  padding-left: 1em !important;
} 

.container_serendipity_categories_plugin a:hover
 { 
 color: #FFF; 
} 

.container_serendipity_categories_plugin br { 
 display: none; 
}