XF 2.1 Make ads look like the other containers

[Jens1986]

Hi,

Is there an easy way to make the ads look like the rest of the containers on the forum? So that it has rounded corners, has the same width etc?

This is what it looks like today:



This is how I would like it to look:


Any ideas?

 

[bzcomputers]

You can use a border radius (4px is pretty standard around XenForo) with a background color and padding to make it blend in a little more. See code below:

<div style="border-radius:4px; background-color:#ffffff; padding:10px;">
  YOUR AD CODE HERE
<div>

Adjust above as necessary to get the look you want. As for matching width of surrounding elements that will be nearly impossible. Most sites and ads now are responsive. Meaning, depending on screen size, the ad displayed will also change in size (height and width).

 

[Jens1986]

You can use a border radius (4px is pretty standard around XenForo) with a background color and padding to make it blend in a little more. See code below:

<div style="border-radius:4px; background-color:#ffffff; padding:10px;">
  YOUR AD CODE HERE
<div>

Adjust above as necessary to get the look you want. As for matching width of surrounding elements that will be nearly impossible. Most sites and ads now are responsive. Meaning, depending on screen size, the ad displayed will also change in size (height and width).

Thank you so much! That helped a lot!

Do you know how to get the standard border like the rest of the boxes? Or how to make it full width at a low resolution?

 

[bzcomputers]

This will add the border:

<div style="border-radius:4px; background-color:#ffffff; padding:10px;border: 1px solid #d8d8d8">
  YOUR AD CODE HERE
<div>

Not sure I know what you are asking about width.

 

[Lukas W.]

<div class="block">
    <div class="block-container">
        <div class="block-body">
            <div class="block-row">
                <!-- Ad Code Here -->
            </div>
        </div>
    </div>
</div>