houndsofhell (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
houndsofhell) wrote2017-03-09 04:23 am
houndsofhell) wrote2017-03-09 04:23 am
Entry tags:
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.
Almost done! Now, if you want to keep the little squeaky seen in ij links (like so:![[insanejournal.com profile]](https://www.dreamwidth.org/img/external/ij-userinfo.gif)
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:
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:
So, for example, a code snippet which looks like this:
will now look like this:
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
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 this | and replace | with 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 this | and replace | with 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:
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.