This topic is part of our CSS Tutorials and Add-ons section: http://myanimelist.net/forum/?topicid=419405 A trick I used to do on past sites was paste one of these weather stickers on a layout then put another background over them. Now with #inlineContent, you can do this to any anime list as well! Its easy and takes only a few minutes! Adding a weather counter to your list with your location! Step 1: First, add this Widget code to the bottom of your CSS edit box then move on to step 2. Later on, we're going to add your city's location to it and it will appear on your page! If you already got a Widget code in your CSS head to step 2. btw if you're using a layout with #inlineContent to produce an extra image on your layout, then this code will replace that one. A few layout use it: The Mizore Animated Snow layout uses it for the snow, the Dark and TTGL layouts use it for a bottom fade, and the Futuristic layout (anime-version only) uses this for a background character pic. If you don't want to lose that extra image, use this alternate code instead of the above one: Step 2: Next, you'll need to go to this site and find your city. It even find stations in Antarctica! http://www.wunderground.com/ Note: Use the search bar to enter your city name or nearest location Once you've found your city or nearest station, click "get free weather sticker" as circled in the pic below. Step 3: This is the counter that will go on your page! There's three different styles of the default counter (plus you can click "get more styles here" underneath). Copy the code it gives you, as circled in the pic below. Step 4: Take the Wunderground code you paste it into a notepad, Word, or any place you copy text to (even a comment box!) and copy the code in quotations after img src=. I highlighted it in mine from the example below! Step 5: Take this Notepad code you copied from there to TinyURL.com. Enter it here, as circled below, and click the button "Make TinyURL!" too shorten it. It needs to be shortened this way for to work on MAL! Step 6: It will make a new shorter URL (see below). Now take this TinyURL code to the Weather CSS code I had you paste in your CSS edit box earlier (#inline_content). Put it in the parenthesis after background-image, as in the example below. Now save your CSS with the blue bottom at the bottom of the page! The weather should be at the bottom of your page like on my own list here! Enhancing your widget with chibis and other renders You can modify your Widget code with another background url in front of the first one to add a character or another image in front the widget. Example of a code, #inline_content: #inlineContent { background-attachment: fixed; background-image: url(NEW URL), url(http://tinyurl.com/ctxuxkj); background-position: 100% top, 99% bottom; background-repeat: no-repeat; bottom: 0; display: inline !important; height: 200px; margin-bottom: 0; pointer-events: none; position: fixed; right: 0; width: 100%; z-index: 2; } The red and green parts are the new code you'll add, and the green will be a new image url for whatever you want to add to your widget. Here's mine: This is the code for it. I needed to lower height to move the chibi down, you can do that too or lower 100% to move the chibi to the left. note: if you're using body for the widget, add scroll, before the fixed in your code on after background-attachment. And it looks like this on the page: Moving the weather widget down I know some people might want to lower the height, so that the wunderground.com isn't displaying. There's a note in the code on how to do this: ... to lower the widget off the page go to background-position and then bottom, change bottom to 130%. You can lower or raise that to adjust how far down the widget goes off the page. Other kinds of widgets? I've occasionally seen other widgets that we can add with CSS but didn't really take note so if you know of some others let me know here! I'd really like some kind of clock widget on a list. You can always do a Google hunt of your own. |
Shishio-kunSep 1, 2016 9:22 PM
| Oh this looks nice, and yeah, I like some clock widgwt too, specialy my own clock widwet that comes from a Win 7 Gadget, and I convert it to web with cookie for settings. But with only CSS there's nothing that we can do... |
More topics from this board
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7924 |
by Shishio-kun
»»
Yesterday, 1:50 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1262 |
by Shishio-kun
»»
Sep 22, 4:35 AM |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
382 |
by Shishio-kun
»»
Sep 22, 4:29 AM |
|
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )Shishio-kun - Feb 16, 2023 |
57 |
by Shishio-kun
»»
Sep 22, 4:27 AM |
|
Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templatesShishio-kun - Feb 16, 2023 |
31 |
by Shishio-kun
»»
Sep 22, 4:14 AM |