Styles, the code push, and you: external stylesheets and comment titles using heading elements

[foxfirefey]

There are a couple of important style happenings that could affect people who make their own custom styles; remember that if you end up having problems with your style, you are always free to ask for help here or in style_system. We are more than happy to assist you!

External Stylesheets

So, we've flipped the property to make style sheets load externally by default (external_stylesheet). This is actually going to be great for styles--it means that instead of putting the CSS in the HTML page on every single page load, increasing load times, browsers will be able to cache the externally linked CSS! It does mean, though, that if you have manually overwritten the print_default_stylesheet function, you might end up with some problems--to solve them, take away any <style> tags you may be printing out, as the system will add any necessary ones inline.

Comment titles now use heading elements

Comment titles now use heading elements--this allows people with screenreaders to jump by a certain element level, which increases accessibility. We've updated the CSS for official styles for this (let us know if anyone finds anything amiss), but you might have to add extra CSS for any custom styles.

And now, on to the fun stuff!

There are a LOT of new themes, thanks to timeasmymeasure, dancing_serpent, busaikko, and sarken. Layouts with new color themes include: Drifting, Bases, Negatives, Skittlish Dreams, Nouveau Oleanders, Modular, Blanket, and Brittle. Other fun changes include:

• Sunday morning now has one column and two-columns right layouts. (ninetydegrees)
• Transmogrified now has a two-columns-left layout. (ninetydegrees)
• More official styles support the placement of icons to the right or left side of entries now. (ninetydegrees)
• More official styles also support placing metadata at the top or bottom of the entry. (ninetydegrees)
• There's a new journal search module! If you're a paid user (or can search the journal you are viewing), and are viewing a style that includes the search module, you can use it to search the journal! (foxfirefey, ninetydegrees, fu)
• You can now use community icons instead of the poster's icon on your reading page for community posts (kareila and fu)

• sarken fixed Skittlish Dreams' metadata being hardcoded to red, so you can now change that color in the wizard.

• ninetydegrees fixed Sunday Morning's navigation module from wrapping poorly
• ninetydegrees fixed the custom reply/# of comments text on the network page to use the same values as the reading page
• ninetydegrees has made sure all the layout.pm modules look the same
• ninetydegrees fixed the author's name in Bases
• ninetydegrees implemented one column and two-columns right layouts in Sunday Morning
• ninetydegrees has made official styles support the placement of icons on the right or left side of entries
• ninetydegrees separated out color settings from the nav and calendar module in Bases
• liv has added additional classes to the body tag letting you know if the viewer is logged in, the owner of the journal, if they have access, if they're a subscriber, if they're a member of the community, or if they admin or moderate the community
• deborah has improved tag cloud semantics and accessibility
• fu fixed 24-hour time on customized core1 styles
• yvi made the current active filter visible in the page title, if you're viewing a subscription or access filter
• aveleh made a bare-bones style for feed accounts
• kareila fixed the crosspost label text from saying xpost
• ninetydegrees fixed the datestamp on comments in Modular
• penemue fixed a username from breaking subject entry links in the active entries module.
• ninetydegrees made changes to distinguish collapsed comments from screened/deleted/suspended comments
• ninetydegrees made Funky Circles use the latest CSS3 properties
• ninetydegrees fixed archive and tags pages in Tehotenion (Transmogrified), which had white text on a white background
• deborah and jadelennox fixed alt text from being overescaped in S2
• foxfirefey made it so S2 can now access whether the viewer is allowed to manage tags on the journal they are viewing, so that it will show if, say, you are an admin on a community
• deborah cleaned up the files for Nouveau Oleanders so they're neat and alphabetized and reference the right things
• ninetydegrees made it so modules that don't work in Sunday Morning's header can't be moved there.
• foxfirefey made S2 backend changes so the style system can know whether the viewer has access, is subscribed, or is the administrator of a community--which could then get used to add body tags
• poulpette fixed long entry titles pushing usernames to the right in Fluid Measure on the Chrome browser
• yvi made it so you can view the entry creator name in community's recent entries in Bases
• ninetydegrees fixed padding/margins for modules in headers and footers for some styles
• fu fixed a problem in Tabula Rasa based layouts where when the entry was narrower than the sidebar and the sidebar was on the right, the right sidebar would barge into the entry area and overlap the entry. It should now scroll horizontally instead.

This was a huge update, so if I missed anything or missed giving credit, please let me know!

Comments

[ninetydegrees]

900degrees and kareila fixed the author's name in Bases (she didn't take credit but I'll give it to her anyway :))

Edit: oh I did! Sorry, Fey! *facepalm*

[ninetydegrees]

deborah cleaned up the files for Nouveau Oleanders so they're neat and alphabetized and reference the right things:
I think that's dancing_serpent (http://changelog.dreamwidth.org/620704.html).

[matgb]

My tag cloud CSS in my bespoke layout got borked by the tweaks, I can't actually see why, but it displayed as a long list, was a class removed from the LIs?

I didn't have a display inline command in the code, but did have it for .tag, if that was removed it would make sense that it broke.

Think I've almost got it fixed but the padding's a bit messed up.

[ninetydegrees]

Here's the change: http://changelog.dreamwidth.org/671407.html

Seems to me SPANs were replaced by LIs.

[matgb]

Ah, yes, that is what it looks like, so I wouldn't have needed inline before, OK. That's also why the padding is wrong, so I know what I need to fix there too, danke.

[ninetydegrees]

You're welcome!

[laitaine]

Something (I assume the external stylesheet magic) has completely killed my layout. As in, when I load my journal, I just see the tabula rasa base layout; my layout and theme layers have no effect at all.

I tried to turn the setting off using "set external_stylesheet = false;" so as to fix this temporarily until I have time to faff around with external stylesheets but that hasn't worked. My layout layer is here if it helps.

I'm undoubtedly being a huge idiot about this. What do I need to do to get my pretty back again?

[baggyeyes]

I put a hash before the style property in the layout layer:
#<style

This brought back the forms and color of the layout/theme, but, oddly, not the images.

P.S. Sorry about the multiple edits. I keep forgetting to use the preview function.

[laitaine]

I tried that but it didn't work for me. Hmmm. The only <style tag I have is in the tabula rasa part of my layout layer anyway, which I assume should work nicely, even if my parts of the layout layer are failing.

But thanks for your help!

[baggyeyes]

That's where you have to disable it. Don't forget to disable the closing tag as well.

As they mentioned above:

External Stylesheets

So, we've flipped the property to make style sheets load externally by default (external_stylesheet). This is actually going to be great for styles--it means that instead of putting the CSS in the HTML page on every single page load, increasing load times, browsers will be able to cache the externally linked CSS! It does mean, though, that if you have manually overwritten the print_default_stylesheet function, you might end up with some problems--to solve them, take away any tags you may be printing out, as the system will add any necessary ones inline.

[laitaine]

Yeah, I saw that in the post and that is the one I commented out - I missed the closing tag though which made it not work. I just tried again, commenting out both tags and it works now :)

Thank you! ♥

Thank You!

[onyxlynx]

I just tried out the "Random Icon" link! (It pulled up the Winter Holiday icon, so I did it again, and it produced something more suitable.) And thanks for the list of HTML one can and can't use.

Looking forward to checking out the items mentioned here! Yay Dreamwidth!

Fixing tag cloud CSS

[matgb]

In case others find it useful as they've built a CSS styled layout purely from Tabula Rasa, here's the code I've used to make my tagcloud back into a cloud with acceptable padding and similar:

.module-tags_cloud .module-list, .module-tags_cloud .module-list ul, .module-tags_cloud .module-list-item {
padding-left: 0px;
margin-left: 0px;
list-style-type: none;
list-style-image: none;
display:inline;
}

The actual change shows it's turned what was a series of size changed spans into a more correct unordered list, but you need to tell a list to not list itself to get the cloud effect, the rest is just prettifying.

Now I need to play around with the access body classes and see if I can do something silly with them.

Also? Am I being blind, or is the page to choose sitescheme not in teh site map or nav menues? I only want to go there to find out what my scheme is called to point out it's doing something weird with links, that list of usernames above looks very strange (it's the dark background with sidebar scheme).

Re: Fixing tag cloud CSS

[foxfirefey]

Thanks for sharing your changes!

The site scheme choosing place is here:

http://www.dreamwidth.org/manage/settings/?cat=display

I think you have Gradation Vertical--I'm using Gradation horizontal and I've noticed the same thing, but I'm not sure why it's there to begin with!

Re: Fixing tag cloud CSS

[matgb]

So I am being blind, I looked at that page going "I'm sure it's here somewhere" at least twice.

Also, I hadn't realised Grad horizontal was live, shows how much attention I pay. It is a very weird effect on links though. Ah well, enough for one night.

Tomorrow, I shall post a tutorial thingy, I hope.

[lnr]

Hi there,

I'm an openid user with a reading page on DW to follow my friends here. It seems like too much of a coincidence that you've made a big style-related change in the last couple of days and all of a sudden my reading page has lost all styles altogether.

Reading this article it seems to be showing in the style I currently have selected (so it's in purple, with circles in the bottom left corner and assorted navigation and links down the right-hand column, etc etc). But my reading page is in absolutely plain HTML, black on white, with all the links and navigation and calendar at the bottom of the page.

Do you think this *is* connected, or is there something else going on?

I can't immediately find anywhere more sensible than this to ask, so apologies if this is the wrong place, do point me elsewhere if appropriate.

Thanks!

[lnr]

FWIW changing my style changes the style of this article (since I've got &style=mine in the URL), the reading page remains broken (http://ext-66326.dreamwidth.org/read) and I can't add &style=mine to that to fix it.

[denise]

This is a bug that somebody else has pointed out, and we're going to get it fixed as quickly as we can. :) Sorry about the inconvenience!

[lnr]

Brilliant, thanks. I couldn't spot it under current issues :)

[foxfirefey]

Hey--you are correct that this is a bug, just like denise said, and it's connected to the external stylesheets change. (Apparently instead of rendering the stylesheet, it renders the same error as trying to go to the recent page!)

There's a bug fix in the queue for it now, so hopefully a tweaking code push will go out soon. In the meantime, if you use Firefox, I'm more than willing to help you use the Stylish extension to make it so you can read your reading page in your style (whatever that may be) until that fix goes through.

We totally apologize for the inconvenience!

[lnr]

Thanks for the offer, but although I'm a firefox user I use several versions on several platforms on several machines, so I like to keep extensions to a minimum. I'll live with the funny looking version for a while!

Thanks again.

[baggyeyes]

You're very welcome!