Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: [chrisB] on January 27, 2023, 11:24:33 AM

Title: CSS Help
Post by: [chrisB] on January 27, 2023, 11:24:33 AM
I'm a tinkerer when it comes to CSS, my knowledge is very limited but I can do the basics and even that can be somewhat of a stretch at times [I'm trying to get better at it - I don't find it easy though]. 😊

I am using Tiny Portal as my sites front.

I have enabled ".roundframe" for the right panel.

I like the contrast that it gives between my bodies content and blocks to the right of it. However, I do not like the appearance of it inside the forum board index. It makes things seem a bit sloppy and lob sided. With this in mind, I have tried to find ways in removing it.

Today whilst tinkering, I realised I could do it.
.action_forum .roundframe {
    margin: 1px 0px 0px 0px;
    padding: 0;
    background: 0;
    border: 0;
    border-radius: 0;
    box-shadow: 0;
    overflow: 0;
}

This does the trick, but it comes with me needing re-add the roundframe CSS to the info center's CSS.

That's fine, but do I really need all the '0' values in the above example?

I'm also trying to find a way to override this;
<div id="tprightbarContainer" style="width:305px;">
I would prefer it to be 270 in width just for the forum, but I cannot figure out how to make this happen.

Site: https://poetryartonline.com/forum/

I'd really appreciate someone who is more knowledgable to help me out here.

Thanks 😊
Title: Re: CSS Help
Post by: Diego Andrés on January 27, 2023, 11:31:46 AM
You'd have to target the TP block, along with the action
.action_forum .tp_rightblock_body .roundframe

Also in your forum it looks like the entire column is a roundframe instead of each block?
You could also use #tprightbarContainer
Title: Re: CSS Help
Post by: [chrisB] on January 27, 2023, 12:06:10 PM
Quote from: Diego Andrés on January 27, 2023, 11:31:46 AMYou'd have to target the TP block, along with the action
.action_forum .tp_rightblock_body .roundframe
.action_forum .tp_rightblock_body .roundframe {
  width: 270px;
}

I've tried this and other ways I thought might target the width.

Quote from: Diego Andrés on January 27, 2023, 11:31:46 AMAlso in your forum it looks like the entire column is a roundframe instead of each block?
You could also use #tprightbarContainer
It's set to show different styles per block, I have removed the full roundframe as I prefer this look for the forum area. Top part of the attached screenshot is my home page in comparison to the forum.
(https://i.imgur.com/LiuZorV.png)

All I'm trying to figure out now is if there's a cleaner way to remove the '0' values from the CSS I originally posted and targeting the width of the panel in the forum.

Thanks.
Title: Re: CSS Help
Post by: Diego Andrés on January 27, 2023, 04:29:44 PM
Did you solve it? Shows marked as solved.

Quote from: [chrisB] on January 27, 2023, 12:06:10 PMAll I'm trying to figure out now is if there's a cleaner way to remove the '0' values from the CSS I originally posted and targeting the width of the panel in the forum.
You can just overwrite them like you were attempting to do.
Title: Re: CSS Help
Post by: [chrisB] on January 27, 2023, 05:17:15 PM
Yes, thank you Diego. I got there in the end thanks to help from rjen. :)