-
Suggestion
-
Resolution: Fixed
-
None
-
Version: 2.1.3 Build:#408 Jan 23, 2006
I'm trying to change the look of blog entries on our corporate Wiki, and I was hoping to do so by providing an 'override' CSS file that modifies the defaults.
For example, I wanted to make the end section left aligned doing something like this:
.endsection
{ align: left; }Unfortunately the right-aligning of the endsection is not in the CSS as it should be, but is instead hard-coded into the HTML (I've attached the complete HTML for my blog posts page).
<div class="endsection" align="right" style="color: #666666; margin-top: 10px">
If this was encoded instead in the CSS as follows then it would be easy for anyone to control this aspect of the layout:
.endsection
{ align: right; color: #666666; margin-top: 10px; }Note that you can also control it just for blogs if you want by doing
.blogpost .endsection
{ align: right; color: #666666; margin-top: 10px; }This would be such a powerful way of customizing the look of JIRA, and is exactly how CSS is meant to be used. I strongly suggest that all explicit 'style' tags are excised from the generated HTML and replaced with the equivalent CSS.
Currently it is much harder to alter the look of a Confluence page than it should be, and this improvement would go a long way.
- is related to
-
- Closed
[CONFSERVER-5382] Remove hand-coded 'style' attributes from generated HTML
The blog date styles will also be fixed in Confluence 2.1.4.
I've raised another issue for dealing with the upper-right of the page. This is significantly more complicated, and because you said it's less important, I've reduced the priority to 'minor'. See CONF-5386.
Regards,
Matt
The first one (blog headings) will also be fixed in 2.1.4. (CONF-5235)
I'll reopen this until the other two are fixed as well.
Andy Armstrong
added a comment - I figured that such a massive rewrite wasn't on the cards. 
Here's a few more that are getting in my way right now:
1. Changing blog heading is almost impossible because of the three 'style' attributes here:
<div class="blogpost" style="margin-bottom: 30px">
<div class="blogHeading" style="margin-top: 0px; padding-top: 0px"><a style="text-decoration: none; color: black" href="/display/blogs/2006/02/02/Pantero+2.1+Service+Pack+1+now+available">Pantero 2.1 Service Pack 1 now available</a></div>
2. This one stops me from changing the colors of the post date section:
<div class="greybox" style="background: #f0f0f0; font-weight: bold; text-decoration:none; color: black;">
BTW, CSS should never have a style called 'greybox'! The classes should be used semantically, not for color. I can live with the name once the styles have been removed!
3. It would be nice if the 'top right' region had better use of classes and no style attributes. This one is less important to me because I can control it in the header template (I think).
<div id="PageContent">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 5px" colspan="2">
<table style="padding: 0px; margin: 0px 5px; width: 100%;" cellspacing="0" cellpadding="1" border="0">
The first two would be a huge help. Any more that I run into as I continue tweaking our design I'll report as separate issues.
Thanks for being so responsive, Tom. You guys are awesome, and it shows in your products!
Andy Armstrong
added a comment - I figured that such a massive rewrite wasn't on the cards. Here's a few more that are getting in my way right now:
1. Changing blog heading is almost impossible because of the three 'style' attributes here:
<div class="blogpost" style="margin-bottom: 30px">
<div class="blogHeading" style="margin-top: 0px; padding-top: 0px"><a style="text-decoration: none; color: black" href="/display/blogs/2006/02/02/Pantero+2.1+Service+Pack+1+now+available">Pantero 2.1 Service Pack 1 now available</a></div>
2. This one stops me from changing the colors of the post date section:
<div class="greybox" style="background: #f0f0f0; font-weight: bold; text-decoration:none; color: black;">
BTW, CSS should never have a style called 'greybox'! The classes should be used semantically, not for color. I can live with the name once the styles have been removed!
3. It would be nice if the 'top right' region had better use of classes and no style attributes. This one is less important to me because I can control it in the header template (I think).
<div id="PageContent">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 5px" colspan="2">
<table style="padding: 0px; margin: 0px 5px; width: 100%;" cellspacing="0" cellpadding="1" border="0">
The first two would be a huge help. Any more that I run into as I continue tweaking our design I'll report as separate issues.
Thanks for being so responsive, Tom. You guys are awesome, and it shows in your products! No, still 511 occurences of 'style=' in .vm files.
Please let us know about any which are particularly troublesome.
Andy Armstrong
added a comment - Wow, Tom, that was really fast! Thanks so much.
One question: did you fix these styles 'everywhere' or just in the blog HTML? Even the localized fix will be a huge improvement, but I'm sure I'm going to run into more. Let me know if you'd like a separate report for other such usages of 'style'.
If every 'style' tag in my attached html has been removed that will be fantastic! I think this approach of having an override CSS is going to be awesome.
Let me know.
Thanks,
- Andy
Andy Armstrong
added a comment - Wow, Tom, that was really fast! Thanks so much.
One question: did you fix these styles 'everywhere' or just in the blog HTML? Even the localized fix will be a huge improvement, but I'm sure I'm going to run into more. Let me know if you'd like a separate report for other such usages of 'style'.
If every 'style' tag in my attached html has been removed that will be fantastic! I think this approach of having an override CSS is going to be awesome.
Let me know.
Thanks,
Andy
Awesome. Thanks very much for the speedy resolution.