MyACC how to put image on character samples

[Lopaskurwa]

Hello
how to put image on "Character Creation" when you creating character lets say Knights Sample this knight sample would have Knight image and says Knight below. Example
.

Because now its just a like this

• Knight
• Mage
• Archer
• Balabla
• Balablasd

and etc which is boring.

Code

Please choose a name{% if config.character_samples|length > 1 %}, vocation{% end - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

pastebin.com

 

[Lopaskurwa]

bump

 

[margoh]

You can achieve it through css edits.

 

[Lopaskurwa]

You can achieve it through css edits.

Lol what a top tier answer wow just wow i can believe how much information i got. "-How can i make this code?" "-You can achieve it trough lua". "-How can i a draw a nice face?" "-You can achieve it trough pencil". "-How can i drift like a professional?" "-You can achieve it trough car".

 

[Jacobs]

It seems like you'll need to do something like this:


Replace line 65 - 86:

{% if config.character_samples|length > 1 %}
    <td>
    <table class="TableContent" width="100%">
        <tr class="Odd" valign="top">
            <td width="160"><br/><b>Select your vocation:</b></td>
            <td>
                <div class="vocations">
                    {% for key, sample_char in config.character_samples %}
                        <div class="vocation">
                            <input type="radio" class="vocation__radio-item" name="vocation" id="vocation{{ key }}" value="{{ key }}"
                                    {% if vocation is not null and vocation == key %} checked="checked"{% endif %}>
                            <label for="vocation{{ key }}" class="vocation-label">
                                <img class="vocation-label__img" src="{{ config['vocation_images'][key] }}" alt="{{ config['vocations'][key] }}"/>
                                <span class="vocation-label__name">{{ config['vocations'][key] }}</span>
                            </label>
                        </div>
                    {% endfor %}
                </div>
            </td>
        </tr>
    </table>
{% endif %}

Then add some styles:

        <style>
            .vocations {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
            }
            .vocation {
                flex: 50%;
                text-align: center;
            }
            .vocation input[type=radio] {
                display: none;
            }
            .vocation__radio-item:checked +.vocation-label .vocation-label__name {
                color: red;
            }
            .vocation-label__img {
                max-width: 100%;
            }
            .vocation-label__name {
                display: block;
                margin-top: 20px;
            }
            .vocation-label:hover .vocation-label__name, .vocation-label:active .vocation-label__name, .vocation-label:focus .vocation-label__name {
                color: red;
            }
        </style>

Then add some images to the "images" folder on your server, e.g. "images/vocations/", such as "images/vocations/vocation_1.png", "images/vocations/vocation_2.png" and set them up in your config.php:

// new character config
'vocation_images' => array( // vocations, format: ID_of_vocation => 'Path to image'
    1 => '/images/vocations/vocation_1.png',
    2 => '/images/vocations/vocation_2.png',
    3 => '/images/vocations/vocation_3.png',
    4 => '/images/vocations/vocation_4.png',
),

This is of course very basic, I've got no idea how does your template look and thus can't assume the proper stylings required.

 

[Lopaskurwa]

It seems like you'll need to do something like this:


Replace line 65 - 86:

{% if config.character_samples|length > 1 %}
    <td>
    <table class="TableContent" width="100%">
        <tr class="Odd" valign="top">
            <td width="160"><br/><b>Select your vocation:</b></td>
            <td>
                <div class="vocations">
                    {% for key, sample_char in config.character_samples %}
                        <div class="vocation">
                            <input type="radio" class="vocation__radio-item" name="vocation" id="vocation{{ key }}" value="{{ key }}"
                                    {% if vocation is not null and vocation == key %} checked="checked"{% endif %}>
                            <label for="vocation{{ key }}" class="vocation-label">
                                <img class="vocation-label__img" src="{{ config['vocation_images'][key] }}" alt="{{ config['vocations'][key] }}"/>
                                <span class="vocation-label__name">{{ config['vocations'][key] }}</span>
                            </label>
                        </div>
                    {% endfor %}
                </div>
            </td>
        </tr>
    </table>
{% endif %}

Then add some styles:

        <style>
            .vocations {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
            }
            .vocation {
                flex: 50%;
                text-align: center;
            }
            .vocation input[type=radio] {
                display: none;
            }
            .vocation__radio-item:checked +.vocation-label .vocation-label__name {
                color: red;
            }
            .vocation-label__img {
                max-width: 100%;
            }
            .vocation-label__name {
                display: block;
                margin-top: 20px;
            }
            .vocation-label:hover .vocation-label__name, .vocation-label:active .vocation-label__name, .vocation-label:focus .vocation-label__name {
                color: red;
            }
        </style>

Then add some images to the "images" folder on your server, e.g. "images/vocations/", such as "images/vocations/vocation_1.png", "images/vocations/vocation_2.png" and set them up in your config.php:

// new character config
'vocation_images' => array( // vocations, format: ID_of_vocation => 'Path to image'
    1 => '/images/vocations/vocation_1.png',
    2 => '/images/vocations/vocation_2.png',
    3 => '/images/vocations/vocation_3.png',
    4 => '/images/vocations/vocation_4.png',
),

This is of course very basic, I've got no idea how does your template look and thus can't assume the proper stylings required.

Yes its pretty much perfect but would be great to adjust two thinks.

1. Flex container would contain 5 items not 2
2. And they are on paragraph

   <td width="160"><br/><b>Select your vocation:</b></td>

   when they should be below text Select your vocation. Tried using <p> or <br> non worked

 

[Lopaskurwa]

Yes its pretty much perfect but would be great to adjust two thinks.

1. Flex container would contain 5 items not 2
2. And they are on paragraph

   <td width="160"><br/><b>Select your vocation:</b></td>

   when they should be below text Select your vocation. Tried using <p> or <br> non worked

bump

 

[Jacobs]

Yes its pretty much perfect but would be great to adjust two thinks.

1. Flex container would contain 5 items not 2
2. And they are on paragraph

   <td width="160"><br/><b>Select your vocation:</b></td>

   when they should be below text Select your vocation. Tried using <p> or <br> non worked

1. If I understand it correctly, then just use "flex: 20%;", if your intention is to have 5 items per row
2. No idea what you're asking, would need to see it myself

 

[SixNine]

1. If I understand it correctly, then just use "flex: 20%;", if your intention is to have 5 items per row
2. No idea what you're asking, would need to see it myself

If he uses flex: 20% image size will change too

 

[Lopaskurwa]

If he uses flex: 20% image size will change too

No its fine i can adjust

.vocation-label__img {
max-width: 200%;
}

1. If I understand it correctly, then just use "flex: 20%;", if your intention is to have 5 items per row
2. No idea what you're asking, would need to see it myself

2. This is what i mean. When images should be below text "SELECT YOUR CHARACTER" as you can see they are on the same line


EDIT: FIXED IT WAS ISSUE WITH TD