matgb | Entries tagged with dreamwidth: layout

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

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.

Crossposts: http://matgb.livejournal.com/438207.html

This post exists purely so I can test some CSS on a non-locked entry, I'm hoping to have a box that only displays to logged out users.

You need to be logged in in order to take part in the poll. You do not need a Dreamwidth account, use your blog url as an OpenID here, you can also use your Google or Yahoo account, just type http://www.google.com/profiles/USERNAME or https://me.yahoo.com/ in the OpenID box.

( cut text within a hidden div )

Right, that works. Code is:

.logged-out .poll {display:none;}
.logged-in .loggedout {display:none;}

Crossposts: http://matgb.livejournal.com/435370.html

I've got proper coding work to do, but my brain isn't working straight, so I've been hacking my layout again. Almost certainly Dreamwidth specific as they only work because the Devs put a lot of effort into Classes for CSS tricks within the base code.

Two little tricks, both done through the Customize Journal Style CSS page, dead easy.

Custom comment colours

First is to give a regular commenter a custom colour in the comments box. Can only be done for logged in DW users, unfortunately, an OpenID user has .s in their name and that breaks CSS, might get that fixed but it needs a change in the base code. So, if you want to give commenters their own custom appearance (this includes yourself, naturally) in your comments box, here's how:

Let's start with you, the entry author. This is a generic tweak, so can be done on a Community as well. Simply put the following code in at the bottom of any other CSS you have there:

( Code for making your own comments appear differently, and then for individual named users )
Sorted.

Feed icons on Reading page

On a reading page, an icon only displays for accounts and journals that use userpics--feeds, having no userpic, get nothing displayed. That's fine, except I like the visual trigger if I'm scanning, so I've figured out how to get the feed logo to display in place of a userpic:

( Code for Feed icons and for individual account icons )
All straightforward hackery, typing it all up took longer than actually doing it. An example of the comment colours in action can be found here. Next up on my layout posts should be a tutorial for the 'sharethis' widgets, but that'll take a bit more time and screenshotting, so don't hold your breath. Linkspam post may follow later, but I have a bath to get into.

Crossposts: http://matgb.livejournal.com/434904.html

One of the best things about the internet is the ability to share stuff with friends and others. It can be stuff you've made, done or written, or it can be stuff you've found. Lots of people like doing this so much that there're sites dedicated to the whole idea, or have that sort of function built in as an attraction to users.

Making it easy makes sense

If you're creating content, encouraging others to share what you've written with their friends normally makes sense. Making it easy for them makes it likely that they'll do it. Well, normally, some churlish types are less likely to share something if the site's trying to make it easy. No pleasing some people...

The first weblogs were, literally, logging the web, they existed to share cool stuff found. Now? Billions of aps out there. Awhileback, Debi polled her readers to find out what they like to use, I'm just going to ask.

coding sharethis buttons

I'm coding a share this set of buttons, initially for my and

miss_s_b's layout, but eventually to possibly be submitted as part of the core function of Dreamwidth. I don't want to have too many little buttons, but I think I can make it so users can choose which buttons appear on their layout, and today I finally asked how I could strip the html, a silly little problem that'd be stopping me for weeks. I also want to have it only display on public entries, but that's a lesser issue.

I want it for my reading page, to allow easy sharing of links for me. That it might encourage others to share stuff I've written is an added bonus. If I ever get around to writing again regularly.

So, already coded I have Facebook, Livejournal, Twitter, Dreamwidth, Blogger, StumbleUpon, Bit.ly and LibDig (the last being, obviously, a very niche sharing tool). What major tools have I missed?

Unfortunately, as far as I can see, I can't do one for Wordpress.com, let alone custom installs, as the post page is always within your own subdomain, if someone shows me a hack to get around it or an alternative URL, I'm very much all ears.

What link sharing sites do you read or use?

Crossposts: http://matgb.livejournal.com/433511.html

The joys of blogging using a completely new platform with a development team that really want to make it work, instead of just make it sellable is palpable.

Dreamwidth is, still, not a finished, ready-for-general-release product. That's fine, it's getting there. What's really good though, is that the team behind it are really keen on getting the documentation up to speed, and are generally pleased when you go point out something that isn't working right.

After a lot of headscratching, and a bit of trial and error, I've finally got the sidebars to my main layout almost looking right (at least on this browser, on this laptop, with my preferred default settings). Setting the margin for some of the lists to -12px was a daft solution, but until I can figure it out better, it's a working solution.

( Dreamwidth's default settings for page TITLE tags were, well, a bit weird, and broke basic usability and SEO rules. So I've been hacking. )

( I know a lot of people don't like reading entries against a dark background with light text--I've fixed that for you )
( Prettifying the Crosspost link in the metadata )
It's all, naturally, still being tested, but I thought I'd post and let people know that a) I'm still alive and b) I'm trying to be useful.

This layout is, officially, 1337

But more importantly, hover over that 'Dark' link. Look at the S2 ID number. Everytime someone creates a new layout on DW, it gets assigned a new, sequential, number. There are loads and loads and loads of them. But those of us who signed up to the site really early, well we've got styles with low numbers. Mine isn't that low. But it is pretty cool. S2 layout #1337. This layout is, officially, 1337.

I just felt like sharing that.

(feedback on the code, suggested improvements, bug reports, etc very very welcome. Pointing out that the pale layout is barely personalised and needs a lot of work will be a statement of the already known, I'm looking for unknown unknowns out of preference...)

Crossposts: http://matgb.livejournal.com/424436.html

Some bloggy adminy points with some questions:

1) Thank you to the person who just paid for my account to be upgraded to paid; I'm always very grateful when people do this, while slightly bemused; it was on my to-do list for payday, but that's not for a few weeks, danke.

2) I've been doing some more tweaks to my layout, it's still nowhere near finished but it's better than it was. However,

mooism had problems with the tag cloud in the side column obscuring the text ox for commenting; this shouldn't happen in the code and I can't replicate it, is it happening to anyone else, if so can you let me know what browser you're using and send me a screenshot?

3)

theweaselking had problems logging in with OpenID so commented on the LJ mirror of my post; I know the OpenID commenting setup here isn't ideal, and it's being worked on by the dev team, but does anyone else have problems enough to stop them commenting here? Would a walk-through/explanation help people? I'll be doing some more work on my idea for improving the taskflow at some point as well; knowing what problems people have would be good, but obviously it's a low priority until post-election.

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:

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	DW	Mine
User
Community
Feed
Others

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?

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
/* so that IE users will still see an image */
background-image: url(http://pics.livejournal.com/snapesbabe/pic/000fxssg);
padding: 19px 15px 0 2px !important;
}
.ljuser img[src="http://s.dreamwidth.org/img/silk/identity/user.png"] {
background-color:transparent;
background-image: url(http://dammitja.net/lj/opp/drwho06.gif);
padding: 19px 15px 0 2px !important;
}
.ljuser img[src="http://s.dreamwidth.org/img/silk/identity/community.png"] {
background-color:transparent;
background-image: url(http://pics.livejournal.com/snapesbabe/pic/000fzf79);
padding: 18px 11px 0 2px !important;
}
.ljuser img[src="http://s.dreamwidth.org/img/silk/identity/feed.png"] {
background-color:transparent;
background-image: url(http://pics.livejournal.com/snapesbabe/pic/000fxssg);
padding: 18px 15px 0 2px !important;
}
.ljuser img[src="http://s.dreamwidth.org/img/silk/identity/user_staff.png"] {
background-color:transparent;
background-image: url(http://dammitja.net/lj/opp/drwho05.gif);
padding: 18px 15px 0 2px !important;
}
.ljuser img[src="http://s.dreamwidth.org/img/silk/identity/openid.png"] {
background-color:transparent;
background-image: url(http://dammitja.net/lj/opp/flibble.gif);
padding: 18px 15px 0 2px !important;
}
.ljuser img[src="http://s.dreamwidth.org/img/external/lj-userinfo.gif"] {
background-color:transparent;
background-image: url(http://www.livejournal.com/img/pencil.gif);
padding: 17px 17px 0 2px !important;
}

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

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.

Crossposts: http://matgb.livejournal.com/373329.html

So, following a few how-tos and some half remembered tricks from last time I messed around with my LJ layout, I've hacked into the Zesty theme and done some surgery to it.

ETA: I'm not currently using the Zesty layout, you can see where I got to here:
http://matgb.dreamwidth.org/?s2id=5702 and read this entry using it here:
http://matgb.dreamwidth.org/359787.html?s2id=5702

Firstly, I added in some code to let me define an off-site stylesheet (which I'm hosting in a Wordpress theme on my server as I can edit it online easily, a trick I'll build on I think).

Then I took out all of the "theme" CSS from the layout code and saved that in a seperate file. Now I'm adding in CSS from my normal colour scheme, slowly, in order to try to get the general look and feel of my LJ layout, but improving on it based around stuff I've learnt since I last did it.

Seems to be going OK so far, I have at least got a bearably readable friends page—it'd be nice if one of the themes available during Beta wasn't a white background, it was giving me headaches and I'm nowhere near as bad as some are.

I plan to write up a how-to anyway, would people be interested in full source for it? I've always found fiddling around with S2 to be more effort than its worth, hence the need to get a stylesheet I could edit ASAP. I reckon it'd definitely be worth getting the codebase for Zesty (and eventually Negatives for SB) into a styleable position, but I'm guessing I'm doubling up some work already being done.

Ah well. Haven't done proper code hacking for ages—it's still a bit flaky, need to finish some tweaks just on what I've managed.

If anyone can figure out how I can get my header to shrink down a bit, or how to get the navigation menu over to the right of the page, I'd be grateful.

And I do plan to get back to this layout at some point, I'm currently using just Core2 with my own stylesheet, I like it.

I like Twitter. It's nice, quick and effective, and allows for quick thoughts or short public discussions that can crossover with others. That there are MPs sometimes sat in the House of Commons listening to debates and reading Twitter means I can, if necessary, pass information on nice and easily. Not done it yet, but it might happen.

I also like sharing links and stuff on Twitter, and having my Twitter posts (but not replies) transfer to both my Facebook status and as daily digests. ~~As I'd just stopped doing linkspams and can't be bothered to fix the code, I'm temporarily doing all my links through Twitter as well, it suits me.~~

I like reading others Twitter digests, ported through LoudTwitter, on my ~~friends list~~Reading Page. I personally dislike it when they're cut, as it stops me doing a quick scan and I'm not likely to open the cut text up as it takes too long. If I don't want to read, I can scroll past.

Given that I like having LoudTwitter posts on my friends page, I've added some code to my journal to make them look a lot better than the default. This is Good.

But I also know that some people, poor misunderstanding types that they are, dislike seeing Twitter posts, completely. Given that some people seem to insist on crossposting all their Tweets, including their halves of ongoing conversations that make little sense, I can understand this, but it's better to just get such people to turn off the option of importing replies, as

redatt explains.

But, for those of you that really don't want to read Loudtwitter posts on their friends page, and for those of you that want to enhance the Loudtwitter posts that appear on theirs, I thought I'd share some code.

My enhancement code:

And some removal code if you really want it:

Note, I coded it in twenty seconds, it's a simple CSS trick, it only removes the list of tweets, not the whole post, and it was really easy.

To use either, all you need to do is go to CustomCSS on LJ or DW and copy/paste it in
http://www.livejournal.com/customize/options.bml?group=customcss
http://www.dreamwidth.org/customize/options.bml?group=customcss

For those of you that have got into the habit of cutting your tweet imports because some friends wanted it? If they don't want to see them, link them here. Because I'd much rather see them, and helping everyone make their tweets look pretty makes sense to me. Anyone that wants the colours changed to suit their background, feel free to comment.

Profile

Mat Bowles

September 2021

S	M	T	W	T	F	S
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

Friends

Me Elsewhere

Profiles

Blogs & stuff I read

Syndicate

Page Summary

Making blogs display better on mobile devices
Ignore me: OpenID logged out code testing
Dreamwidth personalisation: Feed userpics and custom comment colours
Sharing widgets--what do YOU use?
Hacking my 1337 layers: Dreamwidth Layout work
Administrivia
[DW] Profile link icons update.
[LJ/DW] Making profile icons look cool in your layout
Hacking my layout around
Removing or enhancing LoudTwitter posts on your Reading page

Style Credit

Base style: Corinthian by momijizukamori
Theme: Burning Up by zaluzianskya

Expand Cut Tags

No cut tags

Page generated 2025-May-25, Sunday 17:44

Mat Bowles

Dreaming in Digital

Entries tagged with dreamwidth: layout

Making blogs display better on mobile devices

Ignore me: OpenID logged out code testing

Dreamwidth personalisation: Feed userpics and custom comment colours

Custom comment colours

Feed icons on Reading page

Sharing widgets--what do YOU use?

Making it easy makes sense

coding sharethis buttons

What link sharing sites do you read or use?

Hacking my 1337 layers: Dreamwidth Layout work

This layout is, officially, 1337

Administrivia

[DW] Profile link icons update.

[LJ/DW] Making profile icons look cool in your layout

Hacking my layout around

Removing or enhancing LoudTwitter posts on your Reading page