• 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?

CritiKiL

Active member
#1
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:
 

CritiKiL

Active member
#3
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
}

http://www.w3.org/Style/Examples/007/center.en.html

A div might work for you as well

<div align="center"><img src="bla.png" alt="bla" /></div>
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'...
 

mrGTB

Well-known member
#4
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?
 

CritiKiL

Active member
#5
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 ;-)
 

CritiKiL

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

http://xenforo.com/community/resources/add-trophy-icons.347/.

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>
</xen:if>
<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>
</div>
</div>
And thanks Brogan, it wasn't 'how' to put it, it was more like 'where' ;)