Tessisamess

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

December 2019

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
293031    

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal
Previous | Next

How to make wreath icons!




How do we make a wreathed icon?

You see them on IJ a lot, and maybe you don't know how they're done, or you're looking for the simplest way to do them. There are a few different ways to achieve this effect, so let's go through them below! I will not be covering adding the wreath as a standard background image, as it does not have the capacity to switch between the wreath and the icon as the top layer.

Method #1: Two image tags

This is the most straightforward way to create an icon with a wreath. All you need is a div (I'm using a section to keep this S1 Generator-safe), two image tags, and the appropriate class names. This can be used in S2 Complete inside of a custom text, but not as a way to put this wreath on existing icons in the layout such as entry userpics.

<section class="wreath"> <img src="WREATH_URL" class="frame"> <img src="ICON_URL" class="icon"> </section>

Now let's look at the CSS that makes this work! Each CSS spec has a note to tell you why it's there and what it does. I don't recommend removing anything unless it's marked as removable.

.wreath{ width:100px;height:100px; /* overall sizing; change to your preferred sizing; inner elements will automatically resize */ position:relative; /* preparation to position the wreath and icon */ } .frame, .icon{ box-sizing:border-box; /* makes math easier for insetting your icon within the frame */ position:absolute; /* lays the wreath and icon on top of each other */ width:100%;height:100%; /* makes sure your wreath and icon fit the space */ } .frame{ z-index:2; /* puts frame on top; swap with icon z-index to reverse */ } .icon{ z-index:1; /* puts icon on bottom; swap with frame z-index to reverse */ padding:8%; /* icon padding; may need individual padding on each side in px if your wreath is asymmetrical */ border-radius:100%; /* makes your icon a circle; change to px if less is needed or delete if unneeded */ }

Method #2: Pre-existing image tag + :after element

The above method might not suit your needs, especially if you're trying to use an existing rendered icon within an S2 layout (like the profile icon in the sidebar, or entry icons.) The following method will work with any of those as long as you know the class name of the image you're trying to add a wreath to. This method is not specific to S2 though, so you can easily use this method in an S1 Generator layout too if you prefer this to the first method.

<section class="wreath"> <img src="ICON_URL"> </section>

Let's see the CSS for this one! If using for an entry icon or your sidebar's profile module icon in S2 you will not need the above HTML. You will only need to change the wreath class name to the container name that holds the icon you want to put a wreath into.

.wreath{ width:100px;height:100px; /* overall sizing; change to your preferred sizing; inner elements will automatically resize */ position:relative; /* preparation to position the wreath and icon */ } .wreath:after, .wreath img{ box-sizing:border-box; /* makes math easier for insetting your icon within the frame */ position:absolute; /* lays the wreath and icon on top of each other */ width:100%;height:100%; /* makes sure your wreath and icon fit the space */ } .wreath:after{ content:''; /* renders your :after element */ display:block; /* makes :after element behave as a div */ background:url(https://i.imgur.com/wbcbgKe.png)center; /* your wreath image */ background-size:100%; /* your wreath's automatic sizing */ z-index:2; /* puts frame on top; swap with icon z-index to reverse */ } .wreath img{ z-index:1; /* puts icon on bottom; swap with frame z-index to reverse */ padding:8%; /* icon padding; may need individual padding on each side in px if your wreath is asymmetrical */ border-radius:100%; /* makes your icon a circle; change to px if less is needed or delete if unneeded */ }

For your reference, in S2 Complete you would use .userpic for the sidebar profile icon and .inner-entry-userpic for the entry icon. You can read more here and here at [info]s2complete! Please note that if you're just planning on using this in a sidebar custom text you can use the HTML provided and leave the class name as-is.

Entry-Safe Method

Sometimes we're not looking to put this within the layout at all and we just want it in an entry. We can do that too!



<lj-raw><div style="width:100px;height:100px;"> <img src="WREATH_URL" style="box-sizing:border-box;width:100%;height:100%;position:relative;"> <img src="ICON_URL" style="box-sizing:border-box;width:100%;height:100%;padding:8%;border-radius:100%;margin:-100px 0 0 0;"> </div></lj-raw>

Make sure your height and the negative margin are the same number so that your icon sits level with your wreath. You can also remove the positioning if you don't want your wreath to sit on top of your icon. Adjust your padding and border radius as needed and you're all set! You can also add margin:0 auto; to the main container if you want to center this.


♡ You're Done! ♡