Remove space + up categories column

xatanael

Hello,

I have an embeded forum in a wordpress theme (with the wordpress plugin).

I'd like to know if it's possible to remove the space I surrounded in green and to ascend the right column to fill the empty space in (see attached image).

Thank you for help

River

@xatanael said:
Hello,

I have an embeded forum in a wordpress theme (with the wordpress plugin).

I'd like to know if it's possible to remove the space I surrounded in green and to ascend the right column to fill the empty space in (see attached image).

Thank you for help

Possibly you may need to reduce margins or padding or possibly or hide an element. It all depends on your vanilla theme, your wordpress theme as well as their interaction.

I suggest reading these two comments

some ideas.
https://open.vanillaforums.com/discussion/comment/255024/#Comment_255024

as well as a suggested screenshot with inspector you might want to try. notice how it displays the elements.

https://open.vanillaforums.com/discussion/comment/255039/#Comment_255039

whu606

This is exactly why you were encouraged to understand how to use a web inspector.

Had you done so, you would have been able to work this out for yourself, in a matter of moments, rather than wait for someone on here to tell you what to do (if anyone does.)

It isn't just people being mean; often a CSS question is dependent on which themes, and even plugins, a user has enabled.

xatanael

In fact, I tried to edit the code myself before to post my message because I knew @whu606 would have troll me if I didn't

So I put the following code in CSSEdit

single.Vanilla, #page.error, .woocommerce #page {
background: #fff;
float: left;
width: 100%;
padding: 5px;
box-sizing: border-box;
margin-top: 5px;
box-shadow:
}

I replaced a 25px padding by a 5x padding, and a 11px margin-top by a 5px margin-top, but obviously, it doesn't work.

I also tried with "page.single", "single.page", and with ".single" alone, same result.

PCTipsGR

Well, I applied padding-top: 0px; at the beggining of the code which contained the forum and it seems like it worked.
I don't know where is that in the CSS, I tried to find it, you would have to find it yourself.

xatanael

Thank you, I think it's in "single_page", so I put the following code in CSSedit

.single_page {
padding-top: 0px;
float: left;
width: 100%;
}

But no changes.

whu606

Trying to get you to learn to do something for yourself is hardly trolling, imo.

The whole point of using a web inspector is that it allows you to identify which elements you need to change, since you can make temporary changes to the existing code and see what effect it has.

Once you find the rule and settings you need, you can then simply copy and paste that into CSSEdit.

Randomly cutting and pasting bits of code is unlikely to give you the answer you are looking for, whereas clicking on the element and choosing inspect will get you pretty close.

As an example, on this forum, I click below the menu items and choose inspect:

I can see that it is an element called .Menu, with several options.

So I play with top:auto, and set it to top:25px, and see what happens:

If I decide I want to edit the rule for top permanently, I copy the whole rule:

.Menu {
    position: absolute;
    top: 25px;
    bottom: 12px;
    right: 0;
}

to make sure I've got the correct syntax etc., then edit it to what I want

.Menu {
    top: 25px;
}

It wouldn't make any real difference if I left the other lines in, but I don't need them to make the change I'm looking for.

PCTipsGR

@xatanael said:
Thank you, I think it's in "single_page", so I put the following code in CSSedit

.single_page {
padding-top: 0px;
float: left;
width: 100%;
}

But no changes.

I think the problem is with your WP page, not the forum one. I doubt the forum is the one applying that rule so it would be useless posting it there, you would probably need to edit the CSS of your WP page, specifically that section.