Tweaking a Vertical Banner content Joomla 4 Topic is solved

[Lizbit]

Years ago I built a website with Joomla 2.5. The site had a vertical banner in which I used to display random business cards of our members. I don't recall how I did it, but following someone's instructions, I was able to add space between the business cards so they were not touching each other.

Now, with Joomla 4, I am completely rebuilding my site. Once again, I have a vertical banner for the cards to randomly display, but they are touching.

Received a suggestion to use the F12 key to locate the files/templates.

Then,from Joomla back end: system -> templates -> then to modules, and clicked on "create overrides." It gave me the path, then I entered this code I found online in another forum - "vspace="10px" and added this after the <img> tag. That gave me space between the images.

Now, I would like to put a thin line between them since they all have white borders - they run on. However, I am not sure how to do this.....

my live site: https://www.mancelonachamber.org and the vertical banner on the right, with featured members, is what I'd like to do in my beta location - a little space between, and perhaps a line between to break them up a bit.

I appreciate any suggetions. Thank you!

[Mr. Wimpy]

It's a bit difficult to tell without the actual code.
The link is a J3 website...

Add this into your css:

Code: Select all

.banneritem + .banneritem {
   border-top: 1px solid #f00;
}

Change the thickness, style and color to what you like.
This will add a top-border on all boxes with images, except the first one.
I don't know your template, so I can't tell you if you add it in template.css, user.css or custom.css or any other place where you add css.

Tip:
Add this to your css instead of vspace:

Code: Select all

.banneritem {
   padding: 10px 0;
}

Regards,
Wim

[Lizbit]

This worked beautifully.

At first, I had difficulty locating exactly where the code needed to be added. I was working on getting you screen shots so we could figure it out. In the meantime, I saw an area to add custom css in the template program (I was using NicePage). I added your code and voila - worked like a charm.

Thank you!