1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How Can I Center Trophy Images?

Discussion in 'Styling and Customization Questions' started by CritiKiL, Apr 14, 2012.

  1. CritiKiL

    CritiKiL Active Member

    This is starting to irritate me because the images are left-sided and they would look much better centered. I played around with a few places which I THOUGHT would correct this but those places had no affect. Does anyone know where I need to go to change the code so that these images are centered? Thanks in advance, here's the link to where I'm having this difficulty:

    Click Here:
  2. mrGTB

    mrGTB Well-Known Member

    What can work at times with images, is to include a class in the IMG itself to align center.

    <img src="bla.png" class="whatever" alt="bla" />

    .whatever {
    display: block;
    margin-left: auto;
    margin-right: auto


    A div might work for you as well

    <div align="center"><img src="bla.png" alt="bla" /></div>
    CritiKiL likes this.
  3. CritiKiL

    CritiKiL Active Member

    Yes, but that would mean having to center 'each' image. I'm looking to where I can locate the setting in the .css or something for all of the images in the trophies area to be centered at once with just one code change. I'm sure there's somewhere in the xenforo where the image is being told to left-center, right? So all I want to do is change that to be 'centered'...
  4. mrGTB

    mrGTB Well-Known Member

    I get you, different Trophy images are pulled so you need to edit something in the core itself to do with each different one displayed. Hmm, no idea?
  5. CritiKiL

    CritiKiL Active Member

    Well, I'm going to go take another look at it soon. Just thought someone would know right away but even if I have to do it individually I'm going to show in this thread, what I did once it's done ;-)
  6. Brogan

    Brogan XenForo Moderator Staff Member

  7. CritiKiL

    CritiKiL Active Member

    Whala! Found it. I had originally used this 'Trophy Images' edit to give a different trophy icon for each trophy:


    So then, in the 'trophy' template I simply just added the blue code in addition to the red code for the modification above so that everything looks like this:

    <xen:require css="trophy.css" />
    <div align='center'><div class="trophy" id="trophy-{$trophy.trophy_id}"></div>
    <div class="points"><img title="{$trophy.title}" alt="{$trophy.title}" src="styles/default/trophies/trophy_{$trophy.trophy_id}.png"></div>
    <xen:if is="{$trophy.award_date}">
    <div class="awarded">{xen: phrase awarded}: <xen:datetime time="$trophy.award_date" /></div>
    <div class="info">
    <h3 class="title">{$trophy.title}</h3>
    <p class="description"><font color='#FFFFFF'><b>{xen: phrase points}: </font><font color='#FFFF00'>{$trophy.trophy_points}</b></font></p>
    <p class="description"><font color='#60a7ec'><b>{xen:raw $trophy.description}</b></font></p>
    And thanks Brogan, it wasn't 'how' to put it, it was more like 'where' ;)

Share This Page