Rounded Corners For vB6?

[Learning]

I would like rounded corners on my forum list and threads. Basically, like what they have on Facebook. I have already done the widgets, but I don't know how to do that for the rest of the forum. The square corners look really dated in my opinion. I'm on Cloud, so I have the feeling I can't change, but I think this would be a good mod for the rest.

[flohse]

You may take a look at this thread https://vbmods.rocks/forum/vbulletin...orners#post996. It is css so it should also work on Cloud.

[Learning]

You may take a look at this thread https://vbmods.rocks/forum/vbulletin...orners#post996. It is css so it should also work on Cloud.

Thanks. I tried it, but I couldn't get it to work.

[flohse]

Which approach did you try? This one?

.canvas-layout-container .canvas-widget {
    border-radius:10px;
}
.canvas-layout-container .widget-header {
    border-radius: 10px 10px 0 0;
}​

This worked for me. My vBulletin is self-hosted, but I don't see why this shouldn't work on Cloud.

Did you properly add this css code snippet to css_additional.css?

[Learning]

Thanks for the reply. That's what I did, but I'll try it again. Maybe I screwed something up. What corners does that round? I already have my widgets rounded.

[glennrocksvb]

What exactly do you want to have rounded corners?

[Learning]

I'd like rounded corners on pretty much everything (see the red arrows). Like the widgets where the green arrows point to. I was able to find them in the stylvars. The square corners look dated - when did vB5 come out - 2012?



I think this would look better and more modern if the topics were separated and the corners were rounded.
The other corners, too, would look nicer.



Same for the posts. Rounded corners AND background color between posts. Can any of this stuff be changed through the stylvars on a Cloud site (I know, unlikely)? I think they would be a nice update over the 2012 vB5 themes vb6 is shipped with.

Thanks for looking.

[Learning]

Which approach did you try? This one?

.canvas-layout-container .canvas-widget {
border-radius:10px;
}
.canvas-layout-container .widget-header {
border-radius: 10px 10px 0 0;
}​

This worked for me. My vBulletin is self-hosted, but I don't see why this shouldn't work on Cloud.

Did you properly add this css code snippet to css_additional.css?

Thanks, I tried this again and did get some elements to round their corners. Still, I'd like more, as posted above.

[glennrocksvb]

Based on your screenshots, there are quite a few elements that would need rounded corners. Achieving this would require inspecting each element individually using the browser DevTools, identifying the appropriate CSS selectors, and then applying the border-radius property to each one accordingly.