Community forum styling question

SlashedZero · September 2006

Hi folks.

I'm currently working on a style which I regularly test on this forum as my custom style. I noticed something that I thought being a mistake of mine, but in fact, it appears Mark's style might override some of my CSS classes. I'm not sure about this, that's why I ask. I guess since there's a special header with all of the Lussumo links at the top, some elements under it may be affected.

On local and on my test site, I have no problem displaying the "signed in as..." text and the advanced search switch at the height I want. But when I test it here, no matter what position from the top I specify, both of them always stay at the same place. Not really a big deal, but since my header isn't the same height than Vanilla's base style, these two elements aren't at the right place in my style on this forum (and only on this forum).

Did some of you encounter the same problem? Is there something I can do for these two elements to look nice on the community forum?

pbear · September 2006

I guess find what height works here and tweak your personal style into one version for this forum. I'm not sure of the reason these two elements are absolutely positioned (IIRC) at all. Why can't they simply float:right in their respective sections? It would mean putting the login within the header section; not sure offhand about advanced search.

bjrn · September 2006

Yeah, it's Mark's stylesheet that is overriding your style. If you set a custom stule here on the Lussumo forums, the markup getting the styles on the top of each page looks like this:

<link rel="stylesheet" type="text/css" href="http://example.com/vanilla.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://example.com/vanilla.print.css" media="print" />
<link rel="stylesheet" type="text/css" href="/community/extensions/Style/style.css" />
<link rel="stylesheet" type="text/css" href="/community/extensions/TextMode/style.css" />
<link rel="stylesheet" type="text/css" href="/community/extensions/LussumoBanner/style.css" />

Since the LussumoBanner style is added after your custom style, it gets applied later, and overrides your style.

SlashedZero · September 2006

Oh ok. Well, my only solution is what pbear suggested, then. I was doubting my own sanity since I wasn't sure of the cause of the problem. Not that I absolutely want to use my own style. I was planning to release it for the community, so this pointless little detail was annoying me.

WallPhone · September 2006

You still can position things relatively absolute, if that makes sense.

You have to set the positioning on the container, and then position the items inside the container.

For example, I use this on the categories page to turm parts of the content into a header:

#Categories {
position: relative;
	}

.CategoryDiscussionCount span, .CategoryOptions span {
position: absolute;
top: -23px;
border-bottom: 3px solid #f00;
}

;

SlashedZero · September 2006

That's quite a clever trick. Thanks for the hint

TheMachine · September 2006

Can anybody please point me to, or advise on changes required to do the following; I need to make the boards fit into a 600px table. Obviously left links are a no-go. The links will need to be horizontal along the top. I need to write html into the scripts so the boards match the style of my site. I was planning to just insert the code into the header and footer but are there any special requirements I must meet with this script. I am a complete noob to Vanilla. I'd much rather use this system than phpBB or any other free board.

WallPhone · September 2006

I was expirementing with a horizontal panel, but was turned off by some inconsistent appearance depending on how many items are in the panel.

If you are already familiar with CSS, this should get you started:

#Panel * {
	float: left;
	width: 180px;
	}

This floats all panel items to the left, but some could be grouped together better with some more specific styling.

bjrn · September 2006

Depending a bit on which extensions you've got enabled, I think it might be quite hard to somehow get the left panel working as a horizontal bar. At least if you are planning on having it above the discussions themselves. You could try to put them below the discussions like Jazzman has done in his Vanilla Blue theme.

If you're good with CSS you could probably manage to pull the left sidebar to the bottom without having to write a new theme, but otherwise you'll probably need to write a theme to help you position things easier.

And you can of course actually leave the sidebar where it is, which would leave you with 420px for the main content. Kind of cramped perhaps, but you can make it work.

Community forum styling question

Comments