This border issue is driving me nutz!

[cannabis ape]

I got a border issue. On the default theme this doesnt seem to be a problem so it's either due a custom CSS or this theme.

Anyway, I try to wrap the block with a bother left,right,bottom and top.

When I achieve this with "Block border framework" left,right,top,bottom it wraps the blocks separately without problems but then the bottom block (where you reply in) doesn't have borders.

I found out I can achieve that by setting the borders in "Block body" but then comes the issue which is driving me crazy thanks to my ADD, it connects the other blocks left and right as seen in the photo. I know it's a small thing on the eye but I can't keep my eye of it.

How can I get this working normally?

 

[Russ]

So did you add a border to our property: Block Body?

Have you tried searching for just the class:

.block-body

This is popping up:

.block-body {
    border-right: 2px solid #000;
}

 

[cannabis ape]

So did you add a border to our property: Block Body?

Have you tried searching for just the class:

.block-body

This is popping up:

.block-body {
    border-right: 2px solid #000;
}

Yes naturally because I added it in block body to show what happens.
It also creates an out of place line in the footer.

Now I will fill in the "block border framework"

Now you see it looks like what it suppose to but now I cant border the editor part.

 

[Russ]

So the footer block is due to how the widgets load. They all use the block-body class by default, you can target the block-body of the footer block to remove it via:

.p-footer-custom .xb-footer-block .block-container .block-body {
    border-width: 0px;
}

For the editor just target it via:

.js-quickReply .block-body {
    border: 1px solid #000;
}

 

[cannabis ape]

Thank you very much, it's kinda stupid I spend well over an hour to get all the borders right and you fix it in 5 seconds..

 

[Russ]

Thank you very much, it's kinda stupid I spend well over an hour to get all the borders right and you fix it in 5 seconds..

It'll take getting use too . XF2 reuses classes a lot so sometimes you just need to target specific things or approach it in a different way.

 

[cannabis ape]

Starting to think I should have gone with everything default but then it will look like the rest. You don't see it as my frontpage is under construction but my WP theme is exactly styled like the forum, same header, colors, background that's why I'm focused on the CSS as it is.

 

[Russ]

Starting to think I should have gone with everything default but then it will look like the rest. You don't see it as my frontpage is under construction but my WP theme is exactly styled like the forum, same header, colors, background that's why I'm focused on the CSS as it is.

Customizing is the fun part , once it's all done you'll be happy. Let me know if I can be of any further assistance.

 

[cannabis ape]

Customizing is the fun part , once it's all done you'll be happy. Let me know if I can be of any further assistance.

Yeah, so much fun.. IF you are a XenForo developer

Anyway, didn't know we were done yet in the PM because I wasn't

 

[cannabis ape]

I pretty much have borders covered but I have one side effect that doesn't need to be there and it's in the bottom right 2 blocks.

 

[cannabis ape]

NVM seems I fixed it.

 

[Russ]

We have some basic CSS to remove borders+box-shadows + padding from those blocks, if you've added an important on any border/box-shadow it may be overwriting our CSS.

 

[cannabis ape]

We have some basic CSS to remove borders+box-shadows + padding from those blocks, if you've added an important on any border/box-shadow it may be overwriting our CSS.

I will be needing that CSS. I got all the borders of all content as I want but it shows again the borders around these 2 footer boxes.

Thanks

 

[Russ]

We have this in there by default:

.p-footer-custom .xb-footer-block .block-container {
    background-color: transparent;
    border-width: 0;
    box-shadow: none;
}

I suppose you could try:

.p-footer-custom .xb-footer-block .block-container {
    background-color: transparent !important;
    border-width: 0 !important;
    box-shadow: none !important;
}

 

[cannabis ape]

We have this in there by default:

.p-footer-custom .xb-footer-block .block-container {
    background-color: transparent;
    border-width: 0;
    box-shadow: none;
}

I suppose you could try:

.p-footer-custom .xb-footer-block .block-container {
    background-color: transparent !important;
    border-width: 0 !important;
    box-shadow: none !important;
}

In xb_footer.less?

Changed it but no effect.

 

[Russ]

In xb_footer.less?

Changed it but no effect.

Extra.less,

if it doesn't work I'll need to stop playing the guessing game and see the live example. That code will remove the borders + background + box-shadow from the XF widgets in the footer. If you want to shoot me a message via PM / Ticket I can take a closer look, can't see your site from last message.

 

[cannabis ape]

Ugh I hate to come back to the problem all the way on top again.

I got a 1px border around everything to make things clear but the annoying part is that the block body effects everything including the borders set in message block.

So if I don't set borders in block body it looks how I want it ↓

So each message a separate block, perfect.

But around the other blocks like the forums and widget I need a border too to have the same vibe. So when I place a border around those, all other blocks look fine, forum block is nicely separated ↓

But now the message block looks like this again ↓ an extra border and connecting the message block.

Now I read that I removed the border from the block body and set it in block border framework before and that it worked then but it's doing nothing now.

off-topic: I noticed the action bar is not correctly centered, it's slightly of to the right won't ask you how to fix that cuz I actually know that one but just letting you know

 

[Russ]

Ya block-body is used in a lot of areas, in fact if you're using our property it's being removed for the next update. We had an idea to style things a certain way in the beginning but we found out it's used way too much to have a property be useful for it.


This is pretty specific CSS, but this will remove that extra border:

[data-template="thread_view"] .block--messages .block-container > .block-body {
    border-width: 0px;
}

 

[cannabis ape]

Ya block-body is used in a lot of areas, in fact if you're using our property it's being removed for the next update. We had an idea to style things a certain way in the beginning but we found out it's used way too much to have a property be useful for it.


This is pretty specific CSS, but this will remove that extra border:

[data-template="thread_view"] .block--messages .block-container > .block-body {
    border-width: 0px;
}

That seems it did the trick.

Again, thanks man.

It's getting kinda boring to repeat myself but you're the best!