• Ever thought it'd be cool to have your art, writing, or challenge runs featured on PokéCommunity? Click here for info - we'd love to spotlight your work!
  • It's time to vote for your favorite Pokémon Battle Revolution protagonist in our new weekly protagonist poll! Click here to cast your vote and let us know which PBR protagonist you like most.
  • 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

  • Pokémon General General Pokémon General Cadet Level Ball Master Ball
    • 8,318
    Posts
    16
    Years
    • he/him
    • Seen today
    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
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    kojondo
    [PokeCommunity.com] Battle Log Layout Tutorial


    BRN
    mamanbou
    [PokeCommunity.com] Battle Log Layout Tutorial


    PAR
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    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]https://veekun.com:81/dex/media/icons/620.png[/IMG][/???][???=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/???][/cd][cd=width: 260px; height: 2px; background-image: url("https://i54.tinypic.com/znqyoo.png"); background-repeat: repeat-y;] [/cd][cd=width: 256px; height: 193px; background-image: url("https://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("https://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]https://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("https://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("https://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("https://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]https://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("https://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]https://veekun.com:81/dex/media/icons/594.png[/IMG][/???][???=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]https://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]https://veekun.com:81/dex/media/icons/620.png[/IMG][/???][*???=??? 100%[*IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/???][*???=??? 100%[*IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/???][*???=??? 100%[*IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/???][*???=??? 100%[*IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/???][*???=??? 100%][*IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/???]
    Spoiler:

    https://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("https://i54.tinypic.com/znqyoo.png"); background-repeat: repeat-y;]

    No need to change this.



    Battle Background
    [*cd=width: 256px; height: 193px; background-image: url("https://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("https://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]https://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: https://i56.tinypic.com/n6anuu.png. Delete the code if it's genderless. Also, for reference this is the URL for male: [URL]https://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]https://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="https://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]https://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("https://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]https://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("https://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]https://veekun.com:81/dex/media/icons/594.png[/IMG][/???][???=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/???][???=??? 100%][IMG]https://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:
    ...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.
     
    ...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.
     
    this is kinda cool

    it doesnt work on other forums though right? there is probably a mention of that somewhere but meh
     
    Don't you love it when someone makes changes into the CSS so that it messes up everything with just a single flick? :z
     
    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
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    kojondo
    [PokeCommunity.com] Battle Log Layout Tutorial


    BRN
    mamanbou
    [PokeCommunity.com] Battle Log Layout Tutorial


    PAR
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    [PokeCommunity.com] Battle Log Layout Tutorial
    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]https://veekun.com:81/dex/media/icons/620.png[/IMG][/title][title=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/title][/cd][cd=width: 260px; height: 2px; background-image: url("https://i54.tinypic.com/znqyoo.png"); background-repeat: repeat-y;] [/cd][cd=width: 256px; height: 193px; background-image: url("https://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("https://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]https://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("https://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("https://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("https://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]https://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("https://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]https://veekun.com:81/dex/media/icons/594.png[/IMG][/title][title=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]https://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]https://veekun.com:81/dex/media/icons/620.png[/IMG][/title][*title=??? 100%[*IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/title][*title=??? 100%[*IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/title][*title=??? 100%[*IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/title][*title=??? 100%[*IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/title][*title=??? 100%][*IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/title]
    Spoiler:

    https://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("https://i54.tinypic.com/znqyoo.png"); background-repeat: repeat-y;]

    No need to change this.



    Battle Background
    [*cd=width: 256px; height: 193px; background-image: url("https://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("https://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]https://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: https://i56.tinypic.com/n6anuu.png. Delete the code if it's genderless. Also, for reference this is the URL for male: [URL]https://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]https://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="https://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]https://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("https://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]https://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("https://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]https://veekun.com:81/dex/media/icons/594.png[/IMG][/title][title=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]https://i53.tinypic.com/14tc1nr.png[/IMG][/title][title=??? 100%][IMG]https://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