• Our software update is now concluded. You will need to reset your password to log in. In order to do this, you will have to click "Log in" in the top right corner and then "Forgot your password?".
  • Welcome to PokéCommunity! Register now and join one of the best fan communities on the 'net to talk Pokémon and more! We are not affiliated with The Pokémon Company or Nintendo.
    Register

Battle Log Layout Tutorial

wolf

wolf

8,279
Posts
15
Years
    • he/him
    • Seen yesterday
    Oppo and I thought this would possibly be helpful for people. I hope it's useful. ^^ DA said it was ok to post it here.

    ??? tags were disabled, so I'll fix the code soon.

    Battle Log Layout Tutorial
    or whatever you want to call it

    Hello, this is a tutorial for people who are willing to use some of their time to make a battle log more appealing by using css-div. I'll explain what the important parts of the code are, and hopefully it will seem less confusing and smaller once you know which parts are for what. This layout can be changed to your liking, and you do not have edit anything other than what I explained. If you find any errors, you're having trouble, or have a suggestion, post in the thread or private message me. This is what the layout looks like:

    field effects
    620.png
    14tc1nr.png
    14tc1nr.png
    14tc1nr.png
    14tc1nr.png
    14tc1nr.png
    kojondo
    2eqbfwg.png


    BRN
    mamanbou
    n6anuu.png


    PAR
    594.png
    14tc1nr.png
    14tc1nr.png
    14tc1nr.png
    14tc1nr.png
    14tc1nr.png
    field effects


    Kojondo used Hi Jump Kick.
    Mamanbou lost 31% of his health.
    Mamanbou used Calm Mind.
    Mamanbou Special Attack and Special Defense was raised.
    Mamanbouaa's Leftovers restored his health a little!


    This is the code, simply copy it to edit it:

    [cd=width: 260px; cursor: crosshair;][cd=width: 256px; height: 32px; text-align: right;][cd=width: 50px; height: 30px; background-color: #000000; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; color: #ffffff; font-size: 110%; font-family: calibri; font-variant: small-caps; text-align: center; line-height: 12px; padding-top: 2px; padding-right: 2px; padding-left: 2px; float: left;][???=none]field effects[/???][/cd][???=Kojondo @ Life Orb 90%][IMG]http://veekun.com:81/dex/media/icons/620.png[/IMG][/???][???=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???][/cd][cd=width: 260px; height: 2px; background-image: url("http://i54.tinypic.com/znqyoo.png"); background-repeat: repeat-y;] [/cd][cd=width: 256px; height: 193px; background-image: url("http://i55.tinypic.com/fxv7tv.png"); background-repeat: no-repeat; border-right: 2px #000000 solid; border-left: 2px #000000 solid;][cd=width: 119px; height: 26px; background-image: url("http://i56.tinypic.com/311x2t0.png"); background-repeat: no-repeat; float: left; margin-top: 40px; padding-left: 10px; color: #ffffff; font-size: 120%; font-family: calibri; font-variant: small-caps; text-shadow: #212121 0px 1px 0px;]kojondo [IMG]http://i56.tinypic.com/2eqbfwg.png[/IMG]
    [???=90%][cd=width: 43.2px; height: 2px; background-color: #00ff4a; float: left; margin-left: 29px;] [/cd][/???]
    [cd=width: 17px; height: 8.6px; background-color: #ff2a00; border: 1.5px #b32d12 solid; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; color: #ffffff; font-size: 65%; font-family: calibri; line-height: 4.3px; margin-top: -20px; margin-left: -7px;][???=Burned]BRN[/???][/cd][/cd][cd=width: 96px; height: 96px; background-image: url("http://veekun.com:81/dex/media/black-white/620.png"); float: right; margin-top: 15px; margin-right: 22px;] [/cd][cd=width: 140px; height: 130px; background-image: url("http://i54.tinypic.com/j5fhns.png"); background-position: top,right; float: left; margin-top: -48px; margin-left: 0px; padding-left: -25px;] [/cd][cd=width: 96px; height: 29px; background-image: url("http://i51.tinypic.com/rup6j7.png"); background-repeat: no-repeat; float: right; margin-top: -5px; padding-left: 20px; color: #e4f0f0; font-size: 120%; font-family: calibri; font-variant: small-caps; text-shadow: #404440 1px 1px 0px;]mamanbou [IMG]http://i56.tinypic.com/n6anuu.png[/IMG]
    [???=75%][cd=width: 36px; height: 2px; background-color: #00ff4a; float: left; margin-left: 36px;] [/cd][/???]
    [cd=width: 17px; height: 8.6px; background-color: #ffd400; border: 1.5px #cc8800 solid; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; color: #ffffff; font-size: 65%; font-family: calibri; line-height: 4.3px; margin-top: -20px; margin-left: -2px;][???=Paralyzed]PAR[/???][/cd][/cd] [/cd][cd=width: 260px; height: 2px; background-image: url("http://i55.tinypic.com/bhi1w6.png"); background-repeat: repeat-y;] [/cd][cd=width: 260px; height: 32px; float: left; margin-top: -9px;][???=Mamanbou @ Leftovers 75% | +1 Special Attack / +1 Special Defense][IMG]http://veekun.com:81/dex/media/icons/594.png[/IMG][/???][???=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???][cd=width: 50px; height: 30px; background-color: #000000; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; color: #ffffff; font-size: 110%; font-family: calibri; font-variant: small-caps; text-align: center; line-height: 12px; padding-bottom: 2px; padding-right: 2px; padding-left: 2px; float: right; margin-top: 9px;][???=none]field effects[/???][/cd][/cd][/cd]

    [cd=width: 248px; background-color: #f8f8f8; border: 1px #b0b0b0 solid; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #101820; font-size: 110%; font-family: calibri; text-shadow: #a0a0a0 1px 1px 0px; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px; margin-top: 3px;]Kojondo used Hi Jump Kick.
    Mamanbou lost 31% of his health.
    Mamanbou used Calm Mind.
    Mamanbou Special Attack and Special Defense was raised.
    Mamanbouaa's Leftovers restored his health a little![/cd]


    Now to explain the parts of the CSS and what you have to edit. I have used asterisks (*) in some of the code quotes so only copy the above code.

    [a id]oppofield[/a id]
    Opponent's Field Effects
    [*cd=width: 260px; cursor: crosshair;][*cd=width: 256px; height: 32px; text-align: right;][*cd=width: 50px; height: 30px; background-color: #000000; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; color: #ffffff; font-size: 110%; font-family: calibri; font-variant: small-caps; text-align: center; line-height: 12px; padding-top: 2px; padding-right: 2px; padding-left: 2px; float: left;][*???=none]field effects

    The opponent's field effects such as Stealth Rock, Spikes, Toxic Spikes, weather, Trick Room, Gravity, etc. are listed here. Replace the red text with whatever field effects that are set-up on the opponent's side of the area.



    [a id]oppoteam[/a id]
    Opponent's Team
    [*???=Kojondo @ Life Orb 90%][*IMG]http://veekun.com:81/dex/media/icons/620.png[/IMG][/???][*???=??? 100%[*IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???][*???=??? 100%[*IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???][*???=??? 100%[*IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???][*???=??? 100%[*IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???][*???=??? 100%][*IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???]
    Spoiler:

    http://i53.tinypic.com/14tc1nr.png is the image URL for a red Poké Ball which is used if the Pokémon is unknown at the time. Bulbapedia is a useful place to find small Pokémon sprites. The red text is what shows up when hovering over the image. Leave the hovering info unchanged if the Pokémon is unknown. My format for the hovering text would be:

    Pokémon @ Life Orb or any healing item such as Leftovers, Black Sludge, Shell Bell (if it holds that type of item) 100% (health amount) | stat boosts (i.e. +1 Attack and +1 Speed)

    For example, a 84% health Tyranitar that has Dragon Danced once and is holding a Babiri Berry would be: Tyranitar 84% | +1 Attack / +1 Speed. There is no need to put the item if it isn't like Life Orb or a healing item. Another example, a 54% health Blissey that is holding Leftovers is: Blissey @ Leftovers 54%.



    Gradient Border
    [*cd=width: 260px; height: 2px; background-image: url("http://i54.tinypic.com/znqyoo.png"); background-repeat: repeat-y;]

    No need to change this.



    Battle Background
    [*cd=width: 256px; height: 193px; background-image: url("http://i55.tinypic.com/fxv7tv.png"); background-repeat: no-repeat; border-right: 2px #000000 solid; border-left: 2px #000000 solid;]

    Don't change this until the Spriters Resource is updated with more battle backgrounds (then I'll update this tutorial with correct width and height settings, etc.). If you do, remember to make the width and height the same as the image's. The two sprites and health bars will most likely move up or down depending on how different the width and height was, but you can fix this by editing their margin-top settings until it looks fine.



    [a id]pokeinfo[/a id]
    Opponent's Active Pokémon Info
    [*cd=width: 119px; height: 26px; background-image: url("http://i56.tinypic.com/311x2t0.png"); background-repeat: no-repeat; float: left; margin-top: 40px; padding-left: 10px; color: #ffffff; font-size: 120%; font-family: calibri; font-variant: small-caps; text-shadow: #212121 0px 1px 0px;]kojondo [*IMG]http://i56.tinypic.com/2eqbfwg.png[/IMG]

    This is the opponent's active Pokémon info, which is shown on the health bar. Edit the red text with the opponent's current Pokémon, and replace the blue text with this URL if the Pokémon is female: http://i56.tinypic.com/n6anuu.png. Delete the code if it's genderless. Also, for reference this is the URL for male: [URL]http://i56.tinypic.com/2eqbfwg.png[/URL].



    [cd=font-size: 180%; color: #00b300; font-family: Cambria; letter-spacing: 0px; border-bottom: 1px #736f6e solid; margin-bottom: 10px;]Opponent Pokémon's Health Bar[/cd][cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][*???=[COLOR=#00d5ff]90[/COLOR]%][*cd=width: [COLOR=#e50000]43.2[/COLOR]px; height: 2px; background-color: #[COLOR=#aa00ff]00ff4a[/COLOR]; float: left; margin-left: 29px;] [/???][/cd]
    This is the actual health bar. When you know the Pokémon's health (i.e. Azelf did 16% to Heatran with Psychic so it has 84% health, but Leftovers healed 6% so it is now 90%), multiply 48 by 0.<percent amount> and replace the red text with the product. i.e. From what Heatran's health was: 48 * 0.90 = 43.2, so width: 43.2px. By the way, you don't have to use decimal points, so 43.2 could be just 43. The purple text is the color, so it's green currently.

    [B]Color Code / px Amount[/B]
    00ff4a (green) / 48 - 25
    ffad00 (yellow) / 25 - 11
    ff4273 (red) / 10 - 1

    If your product is one of those, change the purple text to the code listed. For example, 40% health would be 19.2 so you would use ffad00 as the color code. Another example, 7% health would be 3.4 so you would use ff4273 as the color.

    And of course, change the blue text to the health percentage.



    [a id]oppostatus[/a id][cd=font-size: 180%; color: #00b300; font-family: Cambria; letter-spacing: 0px; border-bottom: 1px #736f6e solid; margin-bottom: 10px;]Opponent Pokémon's Status Condition[/cd][cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][PLAIN][cd=width: 17px; height: 8.6px; background-color: #ff2a00; border: 1.5px #b32d12 solid; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; color: #ffffff; font-size: 65%; font-family: calibri; line-height: 4.3px; margin-top: -20px; margin-left: -7px;][???=Burned]BRN[/???][/cd][/PLAIN][/cd]
    If the opponent's Pokémon has no status conditions, then just delete this code. If it has a different status condition that's not burn look here (copy the code for the status that you chose):
    [spoiler][cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][cd=color: #ffd400; font-size: 120%;]Paralysis[/cd]
    [PLAIN][cd=width: 17px; height: 8.6px; background-color: #ffd400; border: 1.5px #cc8800 solid; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; color: #ffffff; font-size: 65%; font-family: calibri; line-height: 4.3px; margin-top: -20px; margin-left: -7px;][???=Paralyzed]PAR[/???][/cd][/PLAIN][/cd]

    [cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][cd=color: #ff2a00; font-size: 120%;]Burn[/cd]
    [PLAIN][cd=width: 17px; height: 8.6px; background-color: #ff2a00; border: 1.5px #b32d12 solid; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; color: #ffffff; font-size: 65%; font-family: calibri; line-height: 4.3px; margin-top: -20px; margin-left: -7px;][???=Burned]BRN[/???][/cd][/PLAIN][/cd]

    [cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][cd=color: #808080; font-size: 120%;]Sleep[/cd]
    [PLAIN][cd=width: 17px; height: 8.6px; background-color: #808080; border: 1.5px #4d4d4d solid; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; color: #ffffff; font-size: 65%; font-family: calibri; line-height: 4.3px; margin-top: -20px; margin-left: -7px;][???=Sleep]SLP[/???][/cd][/PLAIN][/cd]

    [cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][cd=color: #994c59; font-size: 120%;]Poison[/cd]
    [PLAIN][cd=width: 17px; height: 8.6px; background-color: #994c59; border: 1.5px #592d4e solid; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; color: #ff80f4; font-size: 65%; font-family: calibri; line-height: 4.3px; margin-top: -20px; margin-left: -7px;][???=Poisoned]PSN[/???][/cd][/PLAIN][/cd]

    [cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][cd=color: #00d9d9; font-size: 120%;]Freeze[/cd]
    [PLAIN][cd=width: 17px; height: 8.6px; background-color: #00d9d9; border: 1.5px #12b3b3 solid; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; color: #ffffff; font-size: 65%; font-family: calibri; line-height: 4.3px; margin-top: -20px; margin-left: -7px;][???=Frozen]FRZ[/???][/cd][/PLAIN][/cd][/spoiler]



    [cd=font-size: 180%; color: #00b300; font-family: Cambria; letter-spacing: 0px; border-bottom: 1px #736f6e solid; margin-bottom: 10px;]Opponent Active Pokémon's Sprite[/cd][cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][*cd=width: 96px; height: 96px; background-image: url("[COLOR=#e50000][PLAIN]http://veekun.com:81/dex/media/black-white/620.png[/PLAIN][/COLOR]"); float: right; margin-top: 15px; margin-right: 22px;] [/cd]
    Edit the red text with your image URL to change the opponent's sprite. Look [URL="http://veekun.com/dex/pokemon/search?sort=evolution-chain&introduced_in=1&introduced_in=2&introduced_in=3&introduced_in=4&introduced_in=5"][U]here[/U][/URL] for Pokémon sprites.



    [cd=font-size: 180%; color: #00b300; font-family: Cambria; letter-spacing: 0px; border-bottom: 1px #736f6e solid; margin-bottom: 10px;]Your Active Pokémon's Sprite[/cd][cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][*cd=width: 140px; height: 130px; background-image: url("[COLOR=#e50000][PLAIN]http://i54.tinypic.com/j5fhns.png[/PLAIN][/COLOR]"); background-position: top,right; float: left; margin-top: -48px; margin-left: 0px; padding-left: -25px;] [/cd]
    This is your Pokémon's sprite; edit the red text with the image URL of course. You need to change the Pokémon's sprite image size to 200px w/h, and remember to choose the Nearest Neighbor setting (in Photoshop, Paint.NET, and others most likely) so it doesn't blur. If you don't have any programs for resizing images, I suggest Paint.NET or GIMP. I [I]may[/I] resize a few images for you, but only if I have time to. Also, try Googling if you have any more problems before asking me.



    [cd=font-size: 180%; color: #00b300; font-family: Cambria; letter-spacing: 0px; border-bottom: 1px #736f6e solid; margin-bottom: 10px;]Your Pokémon's Info[/cd][cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][PLAIN][cd=width: 96px; height: 29px; background-image: url("http://i51.tinypic.com/rup6j7.png"); background-repeat: no-repeat; float: right; margin-top: -5px; padding-left: 20px; color: #e4f0f0; font-size: 120%; font-family: calibri; font-variant: small-caps; text-shadow: #404440 1px 1px 0px;]mamanbou [IMG]http://i56.tinypic.com/n6anuu.png
    [???=75%]
    [/???][/PLAIN]
    [cd=width: 17px; height: 8.6px; background-color: #ffd400; border: 1.5px #cc8800 solid; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; color: #ffffff; font-size: 65%; font-family: calibri; line-height: 4.3px; margin-top: -20px; margin-left: -2px;][???=Paralyzed]PAR[/???][/cd][/cd]
    This is the same as the code found [alink id=pokeinfo]here[/alink id], it's just yours instead of the opponent's. The red text is the status condition; if your Pokemon has none then delete it or if it's something other than paralysis copy the code here (don't use the codes listed [alink id=oppostatus]here[/alink id], they have different margin settings):
    Spoiler:





    Gradient Border
    [cd=width: 260px; height: 2px; background-image: url("http://i55.tinypic.com/bhi1w6.png"); background-repeat: repeat-y;] [/cd]

    Again, no need to change this.



    Your Team
    [cd=width: 260px; height: 32px; float: left; margin-top: -9px;][???=Mamanbou @ Leftovers 75% | +1 Special Attack / +1 Special Defense][IMG]http://veekun.com:81/dex/media/icons/594.png[/IMG][/???][???=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/???]

    Same as [alink id=oppoteam]this[/alink id], but your team instead of the opponent's.



    Your Field Effects
    [cd=width: 50px; height: 30px; background-color: #000000; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; color: #ffffff; font-size: 110%; font-family: calibri; font-variant: small-caps; text-align: center; line-height: 12px; padding-bottom: 2px; padding-right: 2px; padding-left: 2px; float: right; margin-top: 9px;][???=none]field effects[/???][/cd][/cd][/cd]

    Same as [alink id=oppofield]this[/alink id], but it's your field effects.



    Battle Log
    [*cd=width: 248px; background-color: #f8f8f8; border: 1px #b0b0b0 solid; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #101820; font-size: 110%; font-family: calibri; text-shadow: #a0a0a0 1px 1px 0px; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px; margin-top: 3px;]Kojondo used Hi Jump Kick.
    Mamanbou lost 31% of his health.
    Mamanbou used Calm Mind.
    Mamanbou Special Attack and Special Defense was raised.
    Mamanbouaa's Leftovers restored his health a little!

    The red text is where the battle log is placed. This completely optional and can be changed of course. This thread is useful if you need any help making CSS for the rest of your battle log.

    Credits
    ● Opposite Day - for providing images since without them I couldn't update this layout to Black and White. :)

    ● Veekun - for being a great sprite website.

    ● Bulbapedia - same as Veekun.

    ● Spriters Resource - for being useful in general, although I never used this website for the B/W layout.

    ● You - for reading and hopefully found this helpful.
     
    Last edited:

    Opposite Day

    too old for name changes
    974
    Posts
    15
    Years
    • ...and from now on, I've become completely obsolete :x

    Very well done wolf, I'll definitely use this as a resource whenever I feel the urge to log something, hell, the css looks way more understandable now than it usually does to me.

    Hot stuff.
     
    wolf

    wolf

    8,279
    Posts
    15
    Years
    • he/him
    • Seen yesterday
    ...and from now on, I've become completely obsolete :x
    Click to expand...
    You can try doing move animations now. ^.^
    Very well done wolf, I'll definitely use this as a resource whenever I feel the urge to log something, hell, the css looks way more understandable now than it usually does to me.

    Hot stuff.
    Click to expand...
    Thanks, tell me if anything else can be done to make it better.
     

    Calum.

    129
    Posts
    15
    Years
    • Seen Jul 18, 2011
    this is kinda cool

    it doesnt work on other forums though right? there is probably a mention of that somewhere but meh
     
    Dark Azelf

    Dark Azelf

    ☽𖤐☾𓃶𐕣
    7,210
    Posts
    16
    Years
    • Seen yesterday
    Well ill put this in compiled guides if wolf makes another post of the OP so i can move it and so it doesn't look messy when i delete all the posts.
     
    wolf

    wolf

    8,279
    Posts
    15
    Years
    • he/him
    • Seen yesterday
    Oh, I forgot to reply to this. I'll re-post it once I have enough free time to change the ??? tags to title.

    edit

    field effects
    Ani598MS.png
    Ani130MS.png
    Ani248MS.png
    Ani479WMS.png
    Ani645MS.png
    Ani530MS.png
    ferrothorn
    2eqbfwg.png


    rotom

    Ani479WMS.png
    Ani385MS.png
    Ani560MS.png
    Ani472MS.png
    Ani381MS.png
    Ani612MS.png
    field effects






    field effects
    Ani598MS.png
    Ani130MS.png
    Ani248MS.png
    Ani479WMS.png
    Ani645MS.png
    Ani530MS.png
    ferrothorn
    2eqbfwg.png

    rotom
    Ani479WMS.png
    Ani385MS.png
    Ani560MS.png
    Ani472MS.png
    Ani381MS.png
    Ani612MS.png
    field effects
     
    Last edited:

    blaQk

    perfectionist. ♥
    619
    Posts
    15
    Years
    • Seen Nov 5, 2014
    Oppo and I thought this would possibly be helpful for people. I hope it's useful. ^^ DA said it was ok to post it here.

    Battle Log Layout Tutorial
    or whatever you want to call it

    Hello, this is a tutorial for people who are willing to use some of their time to make a battle log more appealing by using css-div. I'll explain what the important parts of the code are, and hopefully it will seem less confusing and smaller once you know which parts are for what. This layout can be changed to your liking, and you do not have edit anything other than what I explained. If you find any errors, you're having trouble, or have a suggestion, post in the thread or private message me. This is what the layout looks like:

    field effects
    620.png
    14tc1nr.png
    14tc1nr.png
    14tc1nr.png
    14tc1nr.png
    14tc1nr.png
    kojondo
    2eqbfwg.png


    BRN
    mamanbou
    n6anuu.png


    PAR
    594.png
    14tc1nr.png
    14tc1nr.png
    14tc1nr.png
    14tc1nr.png
    14tc1nr.png
    field effects


    Kojondo used Hi Jump Kick.
    Mamanbou lost 31% of his health.
    Mamanbou used Calm Mind.
    Mamanbou Special Attack and Special Defense was raised.
    Mamanbouaa's Leftovers restored his health a little!


    This is the code, simply copy it to edit it:

    [cd=width: 260px; cursor: crosshair;][cd=width: 256px; height: 32px; text-align: right;][cd=width: 50px; height: 30px; background-color: #000000; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; color: #ffffff; font-size: 110%; font-family: calibri; font-variant: small-caps; text-align: center; line-height: 12px; padding-top: 2px; padding-right: 2px; padding-left: 2px; float: left;][title=none]field effects[/title][/cd][title=Kojondo @ Life Orb 90%][IMG]http://veekun.com:81/dex/media/icons/620.png[/IMG][/title][title=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title][/cd][cd=width: 260px; height: 2px; background-image: url("http://i54.tinypic.com/znqyoo.png"); background-repeat: repeat-y;] [/cd][cd=width: 256px; height: 193px; background-image: url("http://i55.tinypic.com/fxv7tv.png"); background-repeat: no-repeat; border-right: 2px #000000 solid; border-left: 2px #000000 solid;][cd=width: 119px; height: 26px; background-image: url("http://i56.tinypic.com/311x2t0.png"); background-repeat: no-repeat; float: left; margin-top: 40px; padding-left: 10px; color: #ffffff; font-size: 120%; font-family: calibri; font-variant: small-caps; text-shadow: #212121 0px 1px 0px;]kojondo [IMG]http://i56.tinypic.com/2eqbfwg.png[/IMG]
    [title=90%][cd=width: 43.2px; height: 2px; background-color: #00ff4a; float: left; margin-left: 29px;] [/cd][/title]
    [cd=width: 17px; height: 8.6px; background-color: #ff2a00; border: 1.5px #b32d12 solid; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; color: #ffffff; font-size: 65%; font-family: calibri; line-height: 4.3px; margin-top: -20px; margin-left: -7px;][title=Burned]BRN[/title][/cd][/cd][cd=width: 96px; height: 96px; background-image: url("http://veekun.com:81/dex/media/black-white/620.png"); float: right; margin-top: 15px; margin-right: 22px;] [/cd][cd=width: 140px; height: 130px; background-image: url("http://i54.tinypic.com/j5fhns.png"); background-position: top,right; float: left; margin-top: -48px; margin-left: 0px; padding-left: -25px;] [/cd][cd=width: 96px; height: 29px; background-image: url("http://i51.tinypic.com/rup6j7.png"); background-repeat: no-repeat; float: right; margin-top: -5px; padding-left: 20px; color: #e4f0f0; font-size: 120%; font-family: calibri; font-variant: small-caps; text-shadow: #404440 1px 1px 0px;]mamanbou [IMG]http://i56.tinypic.com/n6anuu.png[/IMG]
    [title=75%][cd=width: 36px; height: 2px; background-color: #00ff4a; float: left; margin-left: 36px;] [/cd][/title]
    [cd=width: 17px; height: 8.6px; background-color: #ffd400; border: 1.5px #cc8800 solid; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; color: #ffffff; font-size: 65%; font-family: calibri; line-height: 4.3px; margin-top: -20px; margin-left: -2px;][title=Paralyzed]PAR[/title][/cd][/cd] [/cd][cd=width: 260px; height: 2px; background-image: url("http://i55.tinypic.com/bhi1w6.png"); background-repeat: repeat-y;] [/cd][cd=width: 260px; height: 32px; float: left; margin-top: -9px;][title=Mamanbou @ Leftovers 75% | +1 Special Attack / +1 Special Defense][IMG]http://veekun.com:81/dex/media/icons/594.png[/IMG][/title][title=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title][cd=width: 50px; height: 30px; background-color: #000000; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; color: #ffffff; font-size: 110%; font-family: calibri; font-variant: small-caps; text-align: center; line-height: 12px; padding-bottom: 2px; padding-right: 2px; padding-left: 2px; float: right; margin-top: 9px;][title=none]field effects[/title][/cd][/cd][/cd]

    [cd=width: 248px; background-color: #f8f8f8; border: 1px #b0b0b0 solid; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #101820; font-size: 110%; font-family: calibri; text-shadow: #a0a0a0 1px 1px 0px; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px; margin-top: 3px;]Kojondo used Hi Jump Kick.
    Mamanbou lost 31% of his health.
    Mamanbou used Calm Mind.
    Mamanbou Special Attack and Special Defense was raised.
    Mamanbouaa's Leftovers restored his health a little![/cd]


    Now to explain the parts of the CSS and what you have to edit. I have used asterisks (*) in some of the code quotes so only copy the above code.

    [a id]oppofield[/a id]
    Opponent's Field Effects
    [*cd=width: 260px; cursor: crosshair;][*cd=width: 256px; height: 32px; text-align: right;][*cd=width: 50px; height: 30px; background-color: #000000; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; color: #ffffff; font-size: 110%; font-family: calibri; font-variant: small-caps; text-align: center; line-height: 12px; padding-top: 2px; padding-right: 2px; padding-left: 2px; float: left;][*title=none]field effects

    The opponent's field effects such as Stealth Rock, Spikes, Toxic Spikes, weather, Trick Room, Gravity, etc. are listed here. Replace the red text with whatever field effects that are set-up on the opponent's side of the area.



    [a id]oppoteam[/a id]
    Opponent's Team
    [*title=Kojondo @ Life Orb 90%][*IMG]http://veekun.com:81/dex/media/icons/620.png[/IMG][/title][*title=??? 100%[*IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title][*title=??? 100%[*IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title][*title=??? 100%[*IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title][*title=??? 100%[*IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title][*title=??? 100%][*IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title]
    Spoiler:

    http://i53.tinypic.com/14tc1nr.png is the image URL for a red Poké Ball which is used if the Pokémon is unknown at the time. Bulbapedia is a useful place to find small Pokémon sprites. The red text is what shows up when hovering over the image. Leave the hovering info unchanged if the Pokémon is unknown. My format for the hovering text would be:

    Pokémon @ Life Orb or any healing item such as Leftovers, Black Sludge, Shell Bell (if it holds that type of item) 100% (health amount) | stat boosts (i.e. +1 Attack and +1 Speed)

    For example, a 84% health Tyranitar that has Dragon Danced once and is holding a Babiri Berry would be: Tyranitar 84% | +1 Attack / +1 Speed. There is no need to put the item if it isn't like Life Orb or a healing item. Another example, a 54% health Blissey that is holding Leftovers is: Blissey @ Leftovers 54%.



    Gradient Border
    [*cd=width: 260px; height: 2px; background-image: url("http://i54.tinypic.com/znqyoo.png"); background-repeat: repeat-y;]

    No need to change this.



    Battle Background
    [*cd=width: 256px; height: 193px; background-image: url("http://i55.tinypic.com/fxv7tv.png"); background-repeat: no-repeat; border-right: 2px #000000 solid; border-left: 2px #000000 solid;]

    Don't change this until the Spriters Resource is updated with more battle backgrounds (then I'll update this tutorial with correct width and height settings, etc.). If you do, remember to make the width and height the same as the image's. The two sprites and health bars will most likely move up or down depending on how different the width and height was, but you can fix this by editing their margin-top settings until it looks fine.



    [a id]pokeinfo[/a id]
    Opponent's Active Pokémon Info
    [*cd=width: 119px; height: 26px; background-image: url("http://i56.tinypic.com/311x2t0.png"); background-repeat: no-repeat; float: left; margin-top: 40px; padding-left: 10px; color: #ffffff; font-size: 120%; font-family: calibri; font-variant: small-caps; text-shadow: #212121 0px 1px 0px;]kojondo [*IMG]http://i56.tinypic.com/2eqbfwg.png[/IMG]

    This is the opponent's active Pokémon info, which is shown on the health bar. Edit the red text with the opponent's current Pokémon, and replace the blue text with this URL if the Pokémon is female: http://i56.tinypic.com/n6anuu.png. Delete the code if it's genderless. Also, for reference this is the URL for male: [URL]http://i56.tinypic.com/2eqbfwg.png[/URL].



    [cd=font-size: 180%; color: #00b300; font-family: Cambria; letter-spacing: 0px; border-bottom: 1px #736f6e solid; margin-bottom: 10px;]Opponent Pokémon's Health Bar[/cd][cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][*title=[COLOR=#00d5ff]90[/COLOR]%][*cd=width: [COLOR=#e50000]43.2[/COLOR]px; height: 2px; background-color: #[COLOR=#aa00ff]00ff4a[/COLOR]; float: left; margin-left: 29px;] [/title][/cd]
    This is the actual health bar. When you know the Pokémon's health (i.e. Azelf did 16% to Heatran with Psychic so it has 84% health, but Leftovers healed 6% so it is now 90%), multiply 48 by 0.<percent amount> and replace the red text with the product. i.e. From what Heatran's health was: 48 * 0.90 = 43.2, so width: 43.2px. By the way, you don't have to use decimal points, so 43.2 could be just 43. The purple text is the color, so it's green currently.

    [B]Color Code / px Amount[/B]
    00ff4a (green) / 48 - 25
    ffad00 (yellow) / 25 - 11
    ff4273 (red) / 10 - 1

    If your product is one of those, change the purple text to the code listed. For example, 40% health would be 19.2 so you would use ffad00 as the color code. Another example, 7% health would be 3.4 so you would use ff4273 as the color.

    And of course, change the blue text to the health percentage.



    [a id]oppostatus[/a id][cd=font-size: 180%; color: #00b300; font-family: Cambria; letter-spacing: 0px; border-bottom: 1px #736f6e solid; margin-bottom: 10px;]Opponent Pokémon's Status Condition[/cd][cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][PLAIN][cd=width: 17px; height: 8.6px; background-color: #ff2a00; border: 1.5px #b32d12 solid; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; color: #ffffff; font-size: 65%; font-family: calibri; line-height: 4.3px; margin-top: -20px; margin-left: -7px;][title=Burned]BRN[/title][/cd][/PLAIN][/cd]
    If the opponent's Pokémon has no status conditions, then just delete this code. If it has a different status condition that's not burn look here (copy the code for the status that you chose):
    [spoiler][cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][cd=color: #ffd400; font-size: 120%;]Paralysis[/cd]
    [PLAIN][cd=width: 17px; height: 8.6px; background-color: #ffd400; border: 1.5px #cc8800 solid; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; color: #ffffff; font-size: 65%; font-family: calibri; line-height: 4.3px; margin-top: -20px; margin-left: -7px;][title=Paralyzed]PAR[/title][/cd][/PLAIN][/cd]

    [cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][cd=color: #ff2a00; font-size: 120%;]Burn[/cd]
    [PLAIN][cd=width: 17px; height: 8.6px; background-color: #ff2a00; border: 1.5px #b32d12 solid; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; color: #ffffff; font-size: 65%; font-family: calibri; line-height: 4.3px; margin-top: -20px; margin-left: -7px;][title=Burned]BRN[/title][/cd][/PLAIN][/cd]

    [cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][cd=color: #808080; font-size: 120%;]Sleep[/cd]
    [PLAIN][cd=width: 17px; height: 8.6px; background-color: #808080; border: 1.5px #4d4d4d solid; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; color: #ffffff; font-size: 65%; font-family: calibri; line-height: 4.3px; margin-top: -20px; margin-left: -7px;][title=Sleep]SLP[/title][/cd][/PLAIN][/cd]

    [cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][cd=color: #994c59; font-size: 120%;]Poison[/cd]
    [PLAIN][cd=width: 17px; height: 8.6px; background-color: #994c59; border: 1.5px #592d4e solid; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; color: #ff80f4; font-size: 65%; font-family: calibri; line-height: 4.3px; margin-top: -20px; margin-left: -7px;][title=Poisoned]PSN[/title][/cd][/PLAIN][/cd]

    [cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][cd=color: #00d9d9; font-size: 120%;]Freeze[/cd]
    [PLAIN][cd=width: 17px; height: 8.6px; background-color: #00d9d9; border: 1.5px #12b3b3 solid; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; color: #ffffff; font-size: 65%; font-family: calibri; line-height: 4.3px; margin-top: -20px; margin-left: -7px;][title=Frozen]FRZ[/title][/cd][/PLAIN][/cd][/spoiler]



    [cd=font-size: 180%; color: #00b300; font-family: Cambria; letter-spacing: 0px; border-bottom: 1px #736f6e solid; margin-bottom: 10px;]Opponent Active Pokémon's Sprite[/cd][cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][*cd=width: 96px; height: 96px; background-image: url("[COLOR=#e50000][PLAIN]http://veekun.com:81/dex/media/black-white/620.png[/PLAIN][/COLOR]"); float: right; margin-top: 15px; margin-right: 22px;] [/cd]
    Edit the red text with your image URL to change the opponent's sprite. Look [URL="http://veekun.com/dex/pokemon/search?sort=evolution-chain&introduced_in=1&introduced_in=2&introduced_in=3&introduced_in=4&introduced_in=5"][U]here[/U][/URL] for Pokémon sprites.



    [cd=font-size: 180%; color: #00b300; font-family: Cambria; letter-spacing: 0px; border-bottom: 1px #736f6e solid; margin-bottom: 10px;]Your Active Pokémon's Sprite[/cd][cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][*cd=width: 140px; height: 130px; background-image: url("[COLOR=#e50000][PLAIN]http://i54.tinypic.com/j5fhns.png[/PLAIN][/COLOR]"); background-position: top,right; float: left; margin-top: -48px; margin-left: 0px; padding-left: -25px;] [/cd]
    This is your Pokémon's sprite; edit the red text with the image URL of course. You need to change the Pokémon's sprite image size to 200px w/h, and remember to choose the Nearest Neighbor setting (in Photoshop, Paint.NET, and others most likely) so it doesn't blur. If you don't have any programs for resizing images, I suggest Paint.NET or GIMP. I [I]may[/I] resize a few images for you, but only if I have time to. Also, try Googling if you have any more problems before asking me.



    [cd=font-size: 180%; color: #00b300; font-family: Cambria; letter-spacing: 0px; border-bottom: 1px #736f6e solid; margin-bottom: 10px;]Your Pokémon's Info[/cd][cd=width: 70%; background-color: #1a1a1a; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #ffffff; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px;][PLAIN][cd=width: 96px; height: 29px; background-image: url("http://i51.tinypic.com/rup6j7.png"); background-repeat: no-repeat; float: right; margin-top: -5px; padding-left: 20px; color: #e4f0f0; font-size: 120%; font-family: calibri; font-variant: small-caps; text-shadow: #404440 1px 1px 0px;]mamanbou [IMG]http://i56.tinypic.com/n6anuu.png
    [/PLAIN]
    [cd=width: 17px; height: 8.6px; background-color: #ffd400; border: 1.5px #cc8800 solid; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; color: #ffffff; font-size: 65%; font-family: calibri; line-height: 4.3px; margin-top: -20px; margin-left: -2px;][title=Paralyzed]PAR[/title][/cd][/cd]
    This is the same as the code found [alink id=pokeinfo]here[/alink id], it's just yours instead of the opponent's. The red text is the status condition; if your Pokemon has none then delete it or if it's something other than paralysis copy the code here (don't use the codes listed [alink id=oppostatus]here[/alink id], they have different margin settings):
    Spoiler:





    Gradient Border
    [cd=width: 260px; height: 2px; background-image: url("http://i55.tinypic.com/bhi1w6.png"); background-repeat: repeat-y;] [/cd]

    Again, no need to change this.



    Your Team
    [cd=width: 260px; height: 32px; float: left; margin-top: -9px;][title=Mamanbou @ Leftovers 75% | +1 Special Attack / +1 Special Defense][IMG]http://veekun.com:81/dex/media/icons/594.png[/IMG][/title][title=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]http://i53.tinypic.com/14tc1nr.png[/IMG][/title]

    Same as [alink id=oppoteam]this[/alink id], but your team instead of the opponent's.



    Your Field Effects
    [cd=width: 50px; height: 30px; background-color: #000000; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; color: #ffffff; font-size: 110%; font-family: calibri; font-variant: small-caps; text-align: center; line-height: 12px; padding-bottom: 2px; padding-right: 2px; padding-left: 2px; float: right; margin-top: 9px;][title=none]field effects[/title][/cd][/cd][/cd]

    Same as [alink id=oppofield]this[/alink id], but it's your field effects.



    Battle Log
    [*cd=width: 248px; background-color: #f8f8f8; border: 1px #b0b0b0 solid; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; color: #101820; font-size: 110%; font-family: calibri; text-shadow: #a0a0a0 1px 1px 0px; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px; margin-top: 3px;]Kojondo used Hi Jump Kick.
    Mamanbou lost 31% of his health.
    Mamanbou used Calm Mind.
    Mamanbou Special Attack and Special Defense was raised.
    Mamanbouaa's Leftovers restored his health a little!

    The red text is where the battle log is placed. This completely optional and can be changed of course. This thread is useful if you need any help making CSS for the rest of your battle log.

    Credits
    ● Opposite Day - for providing images since without them I couldn't update this layout to Black and White. :)

    ● Veekun - for being a great sprite website.

    ● Bulbapedia - same as Veekun.

    ● Spriters Resource - for being useful in general, although I never used this website for the B/W layout.

    ● You - for reading and hopefully found this helpful.
     
    You must log in or register to reply here.
    Back
    Top