tutorial: Tiny Icons!
Feb. 22nd, 2012 09:45 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
arobynsung posting in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
visualwitThis page will be updated as I get all the tweaks I know about on here.
⇒ User Tiny Icons
- For the following code, the replacements you'll be making are in the "--px" and the "YOURURLHERE".
- The dashes are the sizes of the icons (these are usually square so the numbers should be the same). For example, if you use Pinvoke's Fugue icons, you'll enter "16px" to replace the "--px".
⇒ Access Tiny Icons
- For the following code, the replacements you'll be making are in the "--px" and the "YOURURLHERE".
- The dashes are the sizes of the icons (these are usually square so the numbers should be the same). For example, if you use Damnicon's tiny icons, you'll enter "16px" to replace the "--px".
⇒ Navigation Icons
- For the following code, the replacements you'll be making are in the "--px" and the "YOURURLHERE".
- The dashes are the sizes of the icons (these are usually square so the numbers should be the same). For example, if you use Pinvoke's Fugue icons, you'll enter "16px" to replace the "--px".
⇒ Cut Tag Icons
- For the following code, the replacements you'll be making are in the "--px" and the "YOURURLHERE".
- The dashes are the sizes of the icons (these are usually square so the numbers should be the same). For example, if you use Pinvoke's Fugue icons, you'll enter "16px" to replace the "--px".
⇒ User Tiny Icons
- For the following code, the replacements you'll be making are in the "--px" and the "YOURURLHERE".
- The dashes are the sizes of the icons (these are usually square so the numbers should be the same). For example, if you use Pinvoke's Fugue icons, you'll enter "16px" to replace the "--px".
.ljuser img {
width: 0px; height: 0px;
background: transparent url(YOURURLHERE) no-repeat 0 0 !important;
padding: --px --px 0px 2px !important;
vertical-align: baseline !important;
}
.ljuser img[src*="user.png"] {
background: transparent url(YOURURLHERE) no-repeat scroll 0 0 !important;
padding: --px --px 0px 2px !important;
}
.ljuser img[src*="community.png"] {
width: 0; height: 0;
background: transparent url(YOURURLHERE) no-repeat scroll 0 0 !important;
padding: --px --px 0px 2px !important;
}
.ljuser img[src*="feed.png"] {
width: 0; height: 0;
background: transparent url(YOURURLHERE) no-repeat scroll 0 0 !important;
padding: --px --px 0px 2px !important;
}
.ljuser img[src*="openid.png"] {
width: 0; height: 0;
background: transparent url(YOURURLHERE) no-repeat scroll 0 0 !important;
padding: --px --px 0px 2px !important;
}
.ljuser img[src*="'comm_staff.png"] {
width: 0; height: 0;
background: transparent url(YOURURLHERE) no-repeat scroll 0 0 !important;
padding: --px --px 0px 2px !important;
}
.ljuser img[src*="'user_staff.png"] {
width: 0; height: 0;
background: transparent url(YOURURLHERE) no-repeat scroll 0 0 !important;
padding: --px --px 0px 2px !important;
}
⇒ Access Tiny Icons
- For the following code, the replacements you'll be making are in the "--px" and the "YOURURLHERE".
- The dashes are the sizes of the icons (these are usually square so the numbers should be the same). For example, if you use Damnicon's tiny icons, you'll enter "16px" to replace the "--px".
img[src*="locked.png"] {
width: 0; height: 0;
background: transparent url(YOURURLHERE) no-repeat scroll 0 0 !important;
padding: --px --px 0px 2px !important;
}
img[src*="filtered.png"] {
width: 0; height: 0;
background: transparent url(YOURURLHERE) no-repeat scroll 0 0 !important;
padding: --px --px 0px 2px !important;
}
img[src*="private.png"] {
width: 0; height: 0;
background: transparent url(YOURURLHERE) no-repeat scroll 0 0 !important;
padding: --px --px 0px 2px !important;
}
img[src*="sticky_entry.png"] {
width: 0; height: 0;
background: transparent url(YOURURLHERE) no-repeat scroll 0 0 !important;
padding: --px --px 0px 2px !important;
}
⇒ Navigation Icons
- For the following code, the replacements you'll be making are in the "--px" and the "YOURURLHERE".
- The dashes are the sizes of the icons (these are usually square so the numbers should be the same). For example, if you use Pinvoke's Fugue icons, you'll enter "16px" to replace the "--px".
.module-navlinks a[href*=".dreamwidth.org/"] {
background: transparent url(YOURURLHERE) no-repeat scroll 50% 0;
padding: 0px 0px --px --px;
}
.module-navlinks a[href*="/archive"] {
background: transparent url(YOURURLHERE) no-repeat scroll 50% 0;
padding: 0px 0px --px --px;
}
.module-navlinks a[href*="/read"] {
background: transparent url(YOURURLHERE) no-repeat scroll 50% 0;
padding: 0px 0px --px --px;
}
.module-navlinks a[href*="/network"] {
background: transparent url(YOURURLHERE) no-repeat scroll 50% 0;
padding: 0px 0px --px --px;
}
.module-navlinks a[href*="/tag"] {
background: transparent url(YOURURLHERE) no-repeat scroll 50% 0;
padding: 0px 0px --px --px;
}
.module-navlinks a[href*="/memories"] {
background: transparent url(YOURURLHERE) no-repeat scroll 50% 0;
padding: 0px 0px --px --px;
}
.module-navlinks a[href*="/profile"] {
background: transparent url(YOURURLHERE) no-repeat scroll 50% 0;
padding: 0px 0px --px --px;
}
⇒ Cut Tag Icons
- For the following code, the replacements you'll be making are in the "--px" and the "YOURURLHERE".
- The dashes are the sizes of the icons (these are usually square so the numbers should be the same). For example, if you use Pinvoke's Fugue icons, you'll enter "16px" to replace the "--px".
img[src*="collapse.gif"] {
width: 0; height: 0;
padding: 0px 0px --px --px;
background: transparent url(YOURURLHERE) no-repeat scroll 0 0;
}
img[src*="expand.gif"] {
width: 0; height: 0;
padding: 0px 0px --px --px;
background: transparent url(YOURURLHERE) no-repeat scroll 0 0;
}
img[src*="collapse-end.gif"] {
width: 0; height: 0;
padding: 0px 0px --px --px;
background: transparent url(YOURURLHERE) no-repeat scroll 0 0;
}
no subject
Date: 2012-02-23 08:24 am (UTC)no subject
Date: 2012-02-24 04:23 am (UTC)no subject
Date: 2012-02-23 10:56 pm (UTC)no subject
Date: 2012-02-23 11:04 pm (UTC).ljuser img[src*='openid.png']
{
background-image: url('YOURURLHERE');
padding: 0px 0px --px --px;
}
.ljuser img[src*='comm_staff.png']
{
background-image: url('YOURURLHERE');
padding: 0px 0px --px --px;
}
.ljuser img[src*='user_staff.png']
{
background-image: url('YOURURLHERE');
padding: 0px 0px --px --px;
}
And these to change the cut expansion triangles.
img[src*="collapse.gif"]
{
width: 0;
height: 0;
padding: 0px 0px --px --px;
background: transparent url(YOURURLHERE) no-repeat scroll 0 0;
}
img[src*="expand.gif"]
{
width: 0;
height: 0;
padding: 0px 0px --px --px;
background: transparent url(YOURURLHERE) no-repeat scroll 0 0;
}
img[src*="collapse-end.gif"]
{
width: 0;
height: 0;
padding: 0px 0px --px --px;
background: transparent url(YOURURLHERE) no-repeat scroll 0 0;
}
no subject
Date: 2012-02-24 04:12 am (UTC)no subject
Date: 2012-03-16 05:47 pm (UTC)Though I was wondering what the codes are for the cut tags? Because I like how the default cut tags match my layout, and I only want to move them a little to space them out from my cut. Hahaha I know it's nothing but I'm just being really OCD.