![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
Entry tags:
roster: most active
UPDATED 1/5/2020: I've updated this code to be in flexbox so that you will get less breaks in the code when you want to add more than three "most active" characters or if your character/canon names in the "available by request" section are especially long. It wraps a little better and you don't have to resize your images to make it work, anymore; the code will do the grunt work for you.
I've also added two more options for your "most active" character section, if you'd like to use some icons to link out to HMD, Open Post, Kinks/Permissions, Meme tracker, and Game pages. Of course, all of these images can be replaced with text only, if you prefer, by just overwriting the image code with the link text you want. You can also remove any of these divs if you don't want to use them and the code will adjust itself so that the remaining linked icons are still centered.
I've also added two more options for your "most active" character section, if you'd like to use some icons to link out to HMD, Open Post, Kinks/Permissions, Meme tracker, and Game pages. Of course, all of these images can be replaced with text only, if you prefer, by just overwriting the image code with the link text you want. You can also remove any of these divs if you don't want to use them and the code will adjust itself so that the remaining linked icons are still centered.
KEY:
HMD
Open Post
Kinks &
Permissions
Memes
Game
most active muses
also available upon request
'most active' design by mistojen
instructions!
Most Active Muses (plain) section:
Most Active Muses (black and white icons) section:
Most Active Muses (colorful icons) section:
Also Available section (paste between most active and credit sections):
Icon Key section (this is optional and you can kind of paste it anywhere you want):
To change colors:
rgba(255,255,255,.75) #8c8c8c #000
- Copy code from the text box below.
- Edit the following
- CHARACTER NAME
- CANON NAME
- JOURNALNAME
- IMGURL (image looks best at 200x300 dimensions; it will resize and stretch to fit the space, positioned from the center, so anything will work, but be mindful of the aspect ratio and size of the original image so it doesn't look warped.)
- SQUAREIMG (image must be square; it will resize itself as needed, but to avoid warping, make sure it's square).
- URLGOESHERE with the URL for the appropriate post, if you're using one of the Most Active sections with the icons
- Make sure you check the box that says Disable Auto-Formatting located below the subject line and above the content box for your entry itself.
- To resize/crop gifs to keep them from taking too long to load or warping to fit the divs, try ezgif.)
- Please do not remove credit.
- Profit.
Most Active Muses (plain) section:
Most Active Muses (black and white icons) section:
Most Active Muses (colorful icons) section:
Also Available section (paste between most active and credit sections):
Icon Key section (this is optional and you can kind of paste it anywhere you want):
To change colors:
rgba(255,255,255,.75) #8c8c8c #000
no subject
no subject
no subject
no subject
So, here's the thing you're running into: Imgur is being an asshole lately.
You've linked the imgur posts, not the images themselves. So, in your post, replace:
http://imgur.com/lhtrsO6 with http://i.imgur.com/lhtrsO6.png
http://imgur.com/Lyl1hKP with http://i.imgur.com/Lyl1hKP.png
and
http://imgur.com/UuXXCwV with http://i.imgur.com/UuXXCwV.png
A helpful hint I've learned with Imgur's recent bullshittery with direct links is that whatever it gives you as the link, paste it into a new tab and add .png, .jpg, or .gif to the end of it and hit enter. It'll load up the actual direct image url which will show up in codes just fine! :) Let me know if you're still having trouble after you make those changes, but that should do it!
no subject
Thanks for such an excellent code it was exactly what I was looking for. :)
no subject
I'm glad it worked and I'm really glad you like it! Enjoy! :)
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject
http://i.imgur.com/nTeNB5a.png
The only other thing that I could think of is to wrap a centered table around the whole thing.
no subject
no subject
Another thing you could try if wrapping the table around it didn't work, would be to bump that fourth active character back up to the first row. If you want to try that, that same div I had you change before? Change the height back to 350px, but change the width to 880px and that'll make room for the fourth character at the top. IDK if you will like that quite as much or not, but it could work?
no subject
no subject
no subject
no subject
Thanks!
(Ignore the list of journals in the pastebin
and sorry for all the edits.)no subject
So, the divs that look mostly like this:
*I say mostly because I'm fairly certain the margin attributes vary but...you know what I mean, I hope.
Where it says the width is 800px, if you fiddle around with that, you can line the characters back up again. I found that on my screen resolution, it looks best when edited down to 610px.
So yeah when I have more time on my hands (I work two jobs at a shopping mall so time is not a thing I have a lot of at the moment with the holidays coming up) I'll probably redo this whole code to be a table which is sort of a pain to shift characters around in but won't run into so many coding issues, and then that way people can choose their preference. But thank you for checking in! I hope that helps!
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject
You can use this code for the active muses section, rather than what I have in the copy/paste box above.
Basically, all I did is reduce the "660px" width to 440px (taking away 200px for the third image, plus 10px margin on the left and 10px margin on the right), and then I added a margin of "0 auto" to the div that wraps around the whole thing, so that it would center. Explaining in case someone else sees this question and wants to know how to add/subtract more characters (basically add/subtract 220px per character and make sure you add "0 auto" margin on the wrapper div to center it since it won't center with the bottom on its own anymore).
no subject
question
Re: question