I'm trying to fix some issues with my and Jennie's layout for display on mobile devices, if anyone knows enough about either the DW style system or CSS media types to help, the question is over at [community profile] style_system
Using @media commands to print separate stylesheets?

Essentially, it's considered good practice to have a different stylesheet for different sorts of browsers. For example, on my computer, the browser needs to be told that I want the sidebar to the right, how wide the boxes should be, etc. But on my phone browser, that information is actually worse than useless, as it can't make use of it, I pay for the bandwidth to download it anyway, and some mobile browsers will try and display it if told to even though it can't work properly.

I've had reports from some readers, here and on friends journals, that most DW layouts are unreadable in certain devices (a Palm Pre being a specific example--I can't check). I think this is both a good thing to learn to do, and will be useful overall for the site.

Wondering around cvarious places, wordpress.com hosted blogs do it by not giving any style information to a mobile device, so you just get default browser stuff, which looks ugly, wordpress self-hosted blogs use a variety of tools--some good & some bad, LJ and DW styles don't do anything specific, but seem to degrade gracefully, and Blogger hosted blogs are almost impossible to navigate using Opera Mobile and I still can't figure out what it is in the code they're doing that borks it that badly.

If anyone can spot it, I can code a fix for friends using Blogger. Because that'd make my life much happier.
In my Monday post about icons, I gave replacement codes for the 5 icons that DW commonly uses as well as the 3 that LJ commonly uses. I missed one that DW uses, namely direct links to LJs using the new custom site code.

If you didn't know, rather than the old [lj-user="matgb"] code, DW has replaced it with [user name="matgb"], ie removing the LJ bit given, obviously, it's not on LJ. But cunningly, they've also added another option, if you code [user name="matgb" site="livejournal.com"] it will link to matgb on LJ, not DW. And it'll take the LJ usericon from the LJ server as well.

Which would be cool. Except it doesn't auto-discover whether it's a person, community or feed. So my post Tuesday mentioning the Russian President's blog displayed it as a person, not as a community. Which I think is slightly unintuitive and misleading. So I've fixed that.

I've added another bit of code for DW so that off-site links to LJs instead display the LJ pencil, to show it's something on LJ, not a bloke regardless of what it is on LJ. So, if you look at this post on DW using my style, it'll show the little pencil when I repeat the link. Look: [livejournal.com profile] blog_medvedev. I suspect I could keep doing these for ages—if you regularly link to IJ, WP, JF or whatever people, y'know what? Sort your own code out, ask me if you need help.
One of the things I like about journalling platforms based on the LJ codebase is the easy shortcut for usernames that'll link to both the blog itself and the profile, with that nice little logo for the profile link.

ETA: At the top, unfortunately. The site where some of my icons was hosted, dammitja.net appears to be down, I'll be contacting the site owner ASAP, but in the meantime, the code does work, but won't display properly here using the icons I liked :-(





LJ User Icon

DW User Icon

Little Colin Baker


LJ Comm Icon

DW Comm Icon

Little Tardis!


LJ Feed Icon

DW Feed Icon

Little Dalek!

Little Peter! Little Mr Flibble! LJ userbloke
Thing is, the nice little logo doesn't always suit the style of the place it's appearing in, or the colour scheme of the layout. So, given I know how to replace them, I thought I'd update the code and add some new tweaks. As always, CSS hackery, playing with CSS is both fun and easy, I highly recommend it for people of a web-savvy nature.

I have, naturally, chosen a Doctor Who theme to my replacement images—feel free to replace them with something else if you wish. I forget where I got the original code for to do this, it's heavily updated now, but I'd like to credit the author, so if you know, gimme a link?

Anyway. Dreamwidth users should go to the DW Custom CSS page and paste the code into the big box.

Livejournal users should go to the LJ Custom CSS page and, go on, have a guess...

Yup, copy and paste the code into the box. One little caveat—it's replacing images taken from l-stat.livejournal.com, if LJ changes their CDN again, then the URL might change and the code'll stop working, I'll update it as soon as I know to, it's likely to be a simple change the letter hack (it used to be p-stat.*)

The Colin icon is taken from [livejournal.com profile] allah_sulu's Ten Doctor's. If you want to use different images, then replacing the image location is fairly easy, just make sure you also change the dimensions in the 'padding' area, the first two are effectively height and width.

I deliberately haven't done one for OpenID accounts, I might change my mind on that but I think the OpenID logo ought to be got used to. I'm considering a DW staff replacement, but not sure what I should go for (either Five or appeal a bit). Haven't bothered with sponsored Comms, probably ought to, not doing so means the image won't show up at all.

As always, feel free to link or comment with questions, etc.
Well, to be more specific, I did a lot of trial and error copy/pasting my CSS, and think the problem is the large amount of /* comment */ text there was in there. As anyone that codes CSS will know, commenting on your markup is dead useful when you come back to it cold after a few months. But by judicious removal of most of it, I've both got the appearance back the way I like it and made a few minor improvements (especially to the way comments display).

Not going to bother hacking in and sorting out the tagcloud now, might do eventually but, y'know, bigger things to worry about. Can't find anything in the LJ FAQ saying why they're now stripping out CSS with large comment texts, that's a really strange decision to make. Ah well.

Silly quiz: Smut novel character )Can't really argue with that one...
matgb: Artwork of 19th century upper class anarchist, text: MatGB (Marvin-Computer-Hates-Me)

Layout woes

Sep. 5th, 2006 09:05 pm
Actually, the Expressive layout and theming options are very cool. I like them. A lot. In fact, my journal, although lacking a header image and some background stuff, now looks very nice indeed.

Small problem though; it doesn't work properly in IE. [livejournal.com profile] burkesworks has confirmed that the profile column appears to overlap the main entry column, which it does for me as well when I check using it. As I haven't actually touched the column positioning myself, it means it's actually a problem their end, so I've opened a support request. In the meantime, my journal looks pretty good in Fx, OK in Safari, and both unreadable in parts and fugly in IE. Hopefully, we can deal with the unreadable bits, but the fugly bits? I'm using stuff from CSS3, which IE isn't implementing at all. I looks good my end.

Bah, who cares. The BBC is going to repeat Dangermouse having bought the rights. I mean, I can't watch it, but still, that's cool, it means a whole new generation of people encounter Penfold.

Oh, the signed Jasper Fforde book I mentioned I bought yesterday? It had a postcard custom made by him half way through, of one of his made up villages. Very very cool.
Old news to some, but to others, the wonders that is a decent internet browser (ie pretty much anything that isn't made by Microsoft) is still lost on them. So, reading [livejournal.com profile] devils_kitchen this morning, I come across this post linking to his company's homepage. Now, I know that Microsoft's default internet browser is crappy, but do you?

Here's a good reason. Go to his homepage, and hover the mouse over the 'start' button at the top right. Now, if you're using IE, that's just a link to his home. If you're using, for example, firefox, then, using nothing more complicated than a Cascading Style Sheet (something that is simple enough for me to understand and read, even if I can't (yet) code it), you get a full drop-down site map. How cool is that? In Internet Explorer or other crappy browser platforms, you don't get any of the coolness.

So, if you're still using IE, why not get a free copy of Firefox and give money to a good cause? (NB, disclaimer here, giving the money to a good cause involves using the Google version of Firefox, which some people, notably [livejournal.com profile] daweaver think is a bad plan) To get it, go here to [livejournal.com profile] timworstall's site, and follow the links. Google gives money for every time a person DLs Firefox and uses is once. That's all you have to do, try it.

If you'd rather try a different browser but not trust Mr Google, then there's a decent summary of them on Too Cool for IE. OK, it's midday, there are twelve hours (and one second) left in 2005. I may do a proper 'my life' update before I leave to go out. May. Don't hold your breath ;-)

Screenshot )
matgb: Artwork of 19th century upper class anarchist, text: MatGB (Default)

British Liberal, house husband, school play leader and stepdad. Campaigner, atheistic feminist, amateur baker. Male.

Known to post items of interest on occasions. More likely to link to interesting stuff. Sometimes talks about stuff he's done. Occasionally posts recipes for good food. Planning to get married, at some point. Enjoying life in Yorkshire.

Likes comments. Especially likes links. Loves to know where people came from and what they were looking for. Mostly posts everything publicly. Sometimes doesn't. Hi.

Mat Bowles

Expand Cut Tags

No cut tags

October 2015


Stuff and nonsense

I'm the Chair of the Brighouse branch of the Liberal Democrats.

Here's the legal text:
Printed by Dreamwidth LLC, Maryland, USA. Published and promoted by Mat Bowles (Liberal Democrat) of Brighouse, West Yorkshire.

Popular Topics

Subscription Feeds

RSS Atom

Designed by

Powered by Dreamwidth Studios
Page generated Apr. 26th, 2019 02:02 pm