houndsofhell: (Daud)
houndsofhell ([personal profile] houndsofhell) wrote2017-03-09 04:23 am

Fixing IJ Layout Images on Dreamwidth

If you've installed a layout meant for IJ onto DW, this is necessary to make the layout appear properly. It feels like a lot of work, but in the end it's not really that much.

Start by searching for one of the "find this" versions. If you find it, great! If not, skip to the next table and try one from it. Unfortunately, there's several different methods used and I'm only familiar with two of them. The same principle applies to layouts from livejournal, but will be more manual. Since those are so rare, I'm not including those in the guide.



Option One


find thisand replacewith this
img[src*="img/userinfo.gif"]img[src*="img/silk/identity/user.png"]
img[src*="img/community.gif"]img[src*="img/silk/identity/community.png"]
img[src*="img/syndicated.gif"]img[src*="img/silk/identity/feed.png"]
img[src*="img/icon_protected.gif"]img[src*="img/silk/entry/locked.png"]
img[src*="img/icon_private.gif"]img[src*="img/silk/entry/private.png"]
img[src*="img/icon_groups.gif"]img[src*="img/silk/entry/filtered.png"]



Option Two


find thisand replacewith this
img[src="http://www.insanejournal.com/img/userinfo.gif"]img[src*="img/silk/identity/user.png"]
img[src="http://www.insanejournal.com/img/community.gif"]img[src*="img/silk/identity/community.png"]
img[src="http://www.insanejournal.com/img/syndicated.gif"]img[src*="img/silk/identity/feed.png"]
img[src="http://www.insanejournal.com/img/icon_protected.gif"]img[src*="img/silk/entry/locked.png"]
img[src="http://www.insanejournal.com/img/icon_private.gif"]img[src*="img/silk/entry/private.png"]
img[src="http://www.insanejournal.com/img/icon_groups.gif"]img[src*="img/silk/entry/filtered.png"]



Almost done! Now, if you want to keep the little squeaky seen in ij links (like so: [insanejournal.com profile] squeaky), you need not do the following step. However, if you have a layout where the replacements are rather small images, you're going to want to replace the little guy using the standard userinfo icon from the layout chosen. To do this, find this part of your freshly altered code:

img[src*="img/silk/identity/user.png"]


Add a comma after the ] at the end of the portion you just found, duplicate the .class or #id before it, then type a space and add:

img[src*="img/external/ij-userinfo.gif"]


So, for example, a code snippet which looks like this:
.ljuser img[src*="img/silk/identity/user.png"] {
width:0!important;
height:0!important;
background:transparent url(IMAGEURLHERE) no-repeat!important;
padding:16px 0 0 16px!important;
}


will now look like this:
.ljuser img[src*="img/silk/identity/user.png"], .ljuser img[src*="img/external/ij-userinfo.gif"] {
width:0!important;
height:0!important;
background:transparent url(IMAGEURLHERE) no-repeat!important;
padding:16px 0 0 16px!important;
}

And that's it! Everything should be in order once you've saved the edits.

By the way, if you're wondering: The reason both versions are replaced with the wildcard method of img[src*="URL"] is because dreamwidth operates on both http and https. Let's just say I found out the hard way that when the blog swaps to https mode, so do all the images. Which means you can have some users (and even yourself at different times) viewing the proper image replaces and others viewing the defaults. All on the same layout.

Post a comment in response:

From:
Anonymous (will be screened)
OpenID (will be screened if not validated)
Identity URL: 
User
Account name:
Password:
If you don't have an account you can create one now.
Subject:
HTML doesn't work in the subject.

Message:

If you are unable to use this captcha for any reason, please contact us by email at support@dreamwidth.org


 
Links will be displayed as unclickable URLs to help prevent spam.