Planet.videolan.org

[Jean-Baptiste Kempf]

What about applying the main skin ?

[Arite]

Nice - didn't know planet.videolan.org existed .

The main skin would look pretty good I think - thought I would just try out main.css as-is using the Stylish add-on for Firefox:



That is as-is, but would look good with a bit of tweaking .

Arite.

[Jean-Baptiste Kempf]

The main problems I see:
* the text of the posts shouldn't be centered but justified.
* the subscription people should be on the top or in a "special encadré"
* most important is the fact that it isn't clear whether the h2 and h3 are from the post or from the planet...

[Jean-Baptiste Kempf]

I have added some class="" to help you do that...

[Arite]

The main problems I see:
* the text of the posts shouldn't be centered but justified.
* the subscription people should be on the top or in a "special encadré"
* most important is the fact that it isn't clear whether the h2 and h3 are from the post or from the planet...

I agree. However what do you mean by "it isn't clear whether the h2 and h3 are from the post or from the planet"? Do you mean the posting date (h2) and the h2 in the post itself. For example - the "December 21, 2007" and the "Idea" both look identical?

I have added some class="" to help you do that...

OK, I wondered where the class="" came from .

I altered a couple of minor bits to get it left aligned (added 8px padding too so that the body isn't positioned on the far left edge):



Actually, the above isn't just the VideoLAN.org main.css - also includes planet.css.

This is what just the main.css (modified to be left aligned) looks like as-is (done using the Firebug extension):



Arite.

[Jean-Baptiste Kempf]

The main problems I see:
* the text of the posts shouldn't be centered but justified.
* the subscription people should be on the top or in a "special encadré"
* most important is the fact that it isn't clear whether the h2 and h3 are from the post or from the planet...

I agree. However what do you mean by "it isn't clear whether the h2 and h3 are from the post or from the planet"? Do you mean the posting date (h2) and the h2 in the post itself. For example - the "December 21, 2007" and the "Idea" both look identical?

Yes, exactly. We should mistake the Main planet layout with the posts layout.

I have added some class="" to help you do that...

OK, I wondered where the class="" came from .

God intervention

I altered a couple of minor bits to get it left aligned (added 8px padding too so that the body isn't positioned on the far left edge):



Actually, the above isn't just the VideoLAN.org main.css - also includes planet.css.

This is what just the main.css (modified to be left aligned) looks like as-is (done using the Firebug extension):



Arite.

I can add any Css you want.

[Jean-Baptiste Kempf]

About my opinion on the screenshots, you need a bigger distinction maybe change colour or somehting between the post and the titles...

[Arite]

I have added some class="" to help you do that...

OK, I wondered where the class="" came from .

God intervention

.

Well, can't say I am any good at making things look nice - but I did a couple of mods to the main.css to make the subs and planet_date class a bit better (also done using Firebug - much better than the Stylish add-on for this purpose):



The changes to main.css are as follows (in addition to the left align changes):

Code: Select all

/**** VideoLAN.org main.css Mods ****/ div.sidebar { align:right; position:absolute; right:20px; border: solid #9999ff; background-color: #fee7c4; padding: 20px; padding-top: 0px; } h2.planet_date { font-style: italic; text-decoration: underline; font-size: large; }

I was trying to get the subs class looking similar to something like the panel-orange class (for example the "Contribute!" box here), only ended up just matching the colour .

Arite.

[Jean-Baptiste Kempf]

you know, I can modify the HTML code without any problems if needed.

[Jean-Baptiste Kempf]

http://planet.videolan.org/

[Arite]

Looks excellent . Only two things - firstly the links at the top need to be sorted out. The hyperlinks that are relative to the main site ("Project and Community", "Documentation", "Developers") would need the complete url since it links only within the planet.videolan.org subdomain (e.g. "http://planet.videolan.org/doc/" as supposed to "http://www.videolan.org/doc/").

Secondly the position of the "subs" box means that text is underlayed behind it.

The additional CSS:

Code: Select all

h2.subs { color: #2D58AE; font-weight: bold; font-size: 14px; margin: 0; padding: 0px 0 4px; line-height: 19px; }

Removes the padding from the top of the subs box so that there is not a large gap above h2 and the box border.

And changing the margin for .panel.orange to "-20px":

Code: Select all

.panel-orange { width: 100%; margin: -20px auto 0; min-width: 200px;max-width: 792px; color:#C60; }

Raises it a above the text (could be more/less though).

Here is a screenshot with those two changes to the CSS:



Good work though .

Cheers, Arite.

[Jean-Baptiste Kempf]

Done. I think.

[Arite]

Much better - works perfectly now.

Arite.

[Jean-Baptiste Kempf]

Great... Now, let's put content in it...

[Arite]

Don'y worry j-b if you don't want to do this since it will make pratically no difference - however to add a VideoLAN site-like footer such as this:



Replace (the equivilant in the template):

Code: Select all

<hr> <p> <a href="http://www.planetplanet.org/">Powered by Planet!</a><br> <em>Last updated: May 13, 2008 05:30 PM</em> </p> </body>

With:

Code: Select all

</div> </div> <div id="footer"> <a href="http://www.planetplanet.org/">Powered by Planet!</a><br> <em>Last updated: May 13, 2008 05:00 PM</em> </div> </body>

The closing </div> tags are there since they are missing (alongside several other markup errors - W3C validator picked up 71!).

Cheers, Arite.

[Jean-Baptiste Kempf]

Done.

[Arite]

Nice - cheers .

Arite.

[Arite]

As a final little modification could the following be added to the pagecontainer ID in the CSS (line 121 in main.css):

Code: Select all

padding-bottom: 20px;

That will give some spacing between the bottom of the last post in the pagecontainer division and the footer division.

Cheers, Arite.

[Jean-Baptiste Kempf]

Wouldn't that change too much on all the websiteS?

[Arite]

Very true . If you add:

Code: Select all

#pagecontainer { padding-bottom: 20px; }

To planet2.css then that will just change it for planet.videolan.org.

Arite.

[Jean-Baptiste Kempf]

Done.

[Arite]

Nice one .

Arite.

[Arite]

It seems there is a problem with the Planet RSS feed? The latest post (August 12, 2008) is there, then it skips back a couple of years to August 30, 2006.

Arite.

[Arite]

RSS feed is still broken - latest post now September 24, 2006 .

Arite.

[Arite]

Since the main VideoLAN site has been updated the CSS for panels is now separate to the rest of the CSS.

To fix this could the "panels.css" be added below "main.css" in the template such that:

Code: Select all

<link rel="stylesheet" href="http://www.videolan.org/main.css" type="text/css" title="planet">

Is replaced with:

Code: Select all

<link rel="stylesheet" type="text/css" href="http://www.videolan.org/main.css" /> <link rel="stylesheet" type="text/css" href="http://www.videolan.org/panels.css" />

In addition, to prevent the article text from overflowing behind the panel, in "planet2.css" could:

Code: Select all

div.sidebar { align:right; position:absolute; right:20px; padding: 20px; padding-top: 0px; }

Be replaced with:

Code: Select all

div.sidebar { float: right; padding: 20px; padding-top: 25px; }

That should position it a bit better too.

Cheers, Arite.