XF 2.2 Cannot seem to center using css

[MapleOne]

The element above at: https://dn.ca/market/mapledots/

It is created and customized by an extension but usually I can select it and use css to center but in this case the element has the same name as other elements and I cannot figure out how to centre it.

Can anyone offer assistance on how I would center that element?

 

[Davyc]

It's part of the class="p-body-pageContent" element and not a separate element itself. If you want to change its position, you will need to edit the template it is contained within and wrap it in a separate DIV element, and then you will be able to play with it.

 

[MapleOne]

I tried that already, maybe I did not get it quite right.

Will try that again

 

[Mr Lucky]

You could try doing it in two steps

(a) text align on the page

.p-body-content>:last-child, .p-body-pageContent>:last-child, .p-body-sideNav>:last-child, .p-body-sideNavContent>:last-child, .p-body-sidebar>:last-child
{text-align:center}

But that centers everything on page so you then need to add this

(b)

.block
{text-align:left}

It's bit clumsy and could affect other stuff you don't want centre so prob solution above may be better

 

[MapleOne]

Yeah, I'll have to experiment, for some reason a template edit using a div does not seem to work on this.

 

[Mr Lucky]

Yeah, I'll have to experiment, for some reason a template edit using a div does not seem to work on this.

It should work. Don't forget a div will need a specific width in order to centre the div itself . If the div is full width then text-align should work to centre the link inside the div (as above).

 

[MapleOne]

The addon template does not react when I add a div.

So the template in the addon looks to be the output for this button. I have to see where the button itself is because I can't see it in the addon template.

 

[Davyc]

It's probably in the page container template. It's a universal template, so any changes you make in there will affect all pages, unless you can use conditionals to only affect the pages you want those changes made in. It's probably not going to be easy to pin this down effectively, but with a bit of Sherlock Holmes digging and some creative thinking it should be doable.

 

[Davyc]

OK here's a screenshot using a DIV:



The HTML is this:

<div style="text-align:center"><a href="/market/listings/?t=2" class="button--link button"><span class="button-text">All Market Listings by: MapleDots</span></a></div>

You could do a template search for button--link button and see what that throws up.

 

[MapleOne]

OK here's a screenshot using a DIV:

View attachment 301582

The HTML is this:

<div style="text-align:center"><a href="/market/listings/?t=2" class="button--link button"><span class="button-text">All Market Listings by: MapleDots</span></a></div>

You could do a template search for button--link button and see what that throws up.

Yes I figured it was probably in a XenForo template.

The above does not work because the link changes for every member.

 

[Mr Lucky]

The above does not work because the link changes for every member.

That should not make any difference.

If the link is in a div, you either centre the div itself (but needs a fixed or max width)

{margin-left:auto;
margin-right:auto}

or else use text-alight centre for the text contents of the div

Either way it won't matter that the link changes, although I suppose in the first method you need the width to be specific.

 

[Davyc]

The above does not work because the link changes for every member.

That was raw HTML from the browser console, the actual code that you need to wrap in the DIV will be different, you just need to identify what that code is

 

[MapleOne]

you just need to identify what that code is

Working on that

 

[MapleOne]

thread_view

<center><!--[XF:content_top]--></center>


Worked

 

[Davyc]

Brilliant! Happy you got that sorted