Removing border around a banner image... Topic is solved

[Peace Freak]

In Cassiopeia, I've put an image in the banner position that displays with a white border on each side. I would like to eliminate the border, so using Developer Tools in Chome, I believe I found the appropriate div:

div.grid-child.container-below-top
Color #FFFFFF
Font 16px Roboto, sans-serif
Padding 8px 32px

I've attached a screenshot.

I believe I need to set the padding to 0px by putting appropriate code in the user.css file, but I'm not sure what to actually write.

Could someone point me in the right direction?

Thanks in advance.

Banner CSS 01.jpg

[Per Yngve Berg]

Code: Select all

div.grid-child.container-below-top {
Padding 0px;
}

[Peace Freak]

Thank you Per for your response and for the code. I added to the user.css file but the border remains.

Perhaps it's not the right place to put it? I added it on a single line to:

/media/templates/site/cassiopeia/css/user.css

[Per Yngve Berg]

Do you see it in the Developer Tools?

[sikumbang]

Just to make sure the code is written correctly, how about this?

Code: Select all

div.grid-child.container-below-top {
padding:0px!important;
}

[Peace Freak]

Thank you!

The border appears in Developer Tools. I also tried
div.grid-child.container-below-top {
padding:0px!important;
}

When using Developer Tools I noticed some other divs related to the image, so I tried the following three without success:

div.below-top.card.mybanner {
Padding 0px;
}
img.mybanner {
Padding 0px;
}
div.card-body {
Padding 0px;
}

Perhaps I should try to find the div in the actual css and change it there?

Or is there a global setting for controlling the padding of images?

[sikumbang]

I'm unable to replicate your issue on my local computer. If your website is already live, it's better to provide a URL so I can see it directly. If your website is not live yet, maybe you can record a screencast showing you inspecting the div using the Chrome DevTools.

[Pavel-ww]

div.below-top.card.mybanner {
Padding 0px;
}
img.mybanner {
Padding 0px;
}
div.card-body {
Padding 0px;
}

Hi. There should not be a caps lock in the code.

1.jpg

--

And yes, the link to the site will help us to help you

[Peace Freak]

Thanks very much everyone.

Here is the URL:

[Redacted]

(There's no content at this point...)

Perhaps the problem is due to how I created the "banner"... I just want to have a narrow image with navigation below it. I found this tutorial to create it:

https://joomlachicagonorth.com/blog/joo ... navigation

(I tried what was suggested in the Change Colors section but nothing worked...)

If there's another way to put an image in that section without a border, please let me know...

Thanks!

[sikumbang]

Try this :

Code: Select all

.mybanner {
    border:none;
    box-shadow:0 0 20px rgba(0,0,0,0.2);
    border-radius:6px;
}
.mybanner .card-body {
    padding:0!important;
}
.mybanner .card-body p {
    margin:0!important;
}

[Peace Freak]

That worked! Wow! Thank you so much.

I've now compared what was suggested earlier to what finally worked... Using Developer Tools I believe now I should be able to do something similar by myself.

I hope this will help anyone else who would like to do the same thing.

Once again, thank you very much!

[sikumbang]

You're welcome. Glad to be of help

[robertwolf1]

To eliminate the white border around the banner image in Cassiopeia, you'll want to adjust the padding of the div.grid-child.container-below-top element. You can achieve this by overriding the default CSS styling in your user.css file. Here's how you can do it

/* Override padding for the specific div */
div.grid-child.container-below-top {
padding: 0 !important; /* Set padding to 0px, !important ensures it takes precedence */
}