Support » Fixing WordPress » required css style

required css style

  • Resolved nzlgl

    (@nzlgl)


    2 years, 6 months ago

    Hello, on my website, I will have lots of people who I award with badges. But since avatar style of who earned this badge is so big, how can I make it smaller and align in a row?
    my site looks like: https://ibb.co/Qm4QrX6
    what I want to achive:https://ibb.co/N1h0d23

    Plus, who earn this column? why does it go to bottom, why there is a space between the title and this column (the red marked part on image above)

    The blog I need help with is [ redundant link removed ]

    • This topic was modified 2 years, 6 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • willem0

    (@willem0)

    2 years, 6 months ago

    Did you try to search for solutions by the plugin-settings? Or ask for support for your Gamipress-plugin?
    See https://wordpress.org/support/plugin/gamipress/

    There I could read for example:

    By default, GamiPress sets as image for achievement a 100×100, but you can change it at any moment on GamiPress -> Settings -> General -> Achievements Image Size
    Note: After change the image size setting, you will require to reupload your image or use a plugin like Regenerate Thumbnails to get your old images resized to the new sizes

    • This reply was modified 2 years, 6 months ago by willem0.
    Thread Starter nzlgl

    (@nzlgl)

    2 years, 6 months ago

    I asked them, they told me to add css and overwrite the theme settings. I know a bit about css but this css customization is out og my league, thats why I asked here.

    willem0

    (@willem0)

    2 years, 6 months ago

    Yes, I was also trying, but thought it was too difficult for me.
    Maybe this new trial may help. You can experiment with the pixel-sizes:

    .gamipress-achievement:not(.gamipress-layout-none) ul.gamipress-achievement-earners-list li,
    .gamipress-achievement:not(.gamipress-layout-none) ul.gamipress-achievement-rank-earners-list li
    {
    width: 30px;
    height: 30px;
    margin: 1px;
    padding: 0;
    }

    .gamipress-achievement:not(.gamipress-layout-none) ul.gamipress-achievement-earners-list li img.avatar,
    .gamipress-achievement:not(.gamipress-layout-none) ul.gamipress-rank-earners-list li img.avatar {
    margin: 4px;
    width: 20px;
    height: 20px;
    max-width: 30px;
    }

    willem0

    (@willem0)

    2 years, 6 months ago

    (Small error) >>

    .gamipress-achievement:not(.gamipress-layout-none) ul.gamipress-achievement-earners-list li,
    .gamipress-achievement:not(.gamipress-layout-none) ul.gamipress-achievement-rank-earners-list li
    {
    width: 30px;
    height: 30px;
    margin: 1px;
    padding: 0;
    }

    .gamipress-achievement:not(.gamipress-layout-none) ul.gamipress-achievement-earners-list li img.avatar,
    .gamipress-achievement:not(.gamipress-layout-none) ul.gamipress-achievement-rank-earners-list li img.avatar {
    margin: 4px;
    width: 20px;
    height: 20px;
    max-width: 30px;
    }

    Thread Starter nzlgl

    (@nzlgl)

    2 years, 6 months ago

    Wow! That really worked! thanks a lot!

    willem0

    (@willem0)

    2 years, 6 months ago

    You’re welcome.
    It was an educational puzzle to me.
    Maybe the “max-width” is unnecessary.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘required css style’ is closed to new replies.

Views