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

General questions relating to Joomla! 5.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10
Post Reply
Peace Freak
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 101
Joined: Fri Aug 17, 2007 2:24 am

Removing border around a banner image...

Post by Peace Freak » Sun Apr 14, 2024 3:10 pm

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
You do not have the required permissions to view the files attached to this post.

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 31044
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Removing border around a banner image...

Post by Per Yngve Berg » Sun Apr 14, 2024 6:54 pm

Code: Select all

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

Peace Freak
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 101
Joined: Fri Aug 17, 2007 2:24 am

Re: Removing border around a banner image...

Post by Peace Freak » Mon Apr 15, 2024 2:23 am

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

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 31044
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Removing border around a banner image...

Post by Per Yngve Berg » Mon Apr 15, 2024 3:14 am

Do you see it in the Developer Tools?

User avatar
sikumbang
Joomla! Ace
Joomla! Ace
Posts: 1589
Joined: Fri Aug 19, 2005 4:37 am
Location: earth
Contact:

Re: Removing border around a banner image...

Post by sikumbang » Mon Apr 15, 2024 10:47 am

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

Code: Select all

div.grid-child.container-below-top {
padding:0px!important;
}
http://www.templateplazza.com - Joomla Templates and Extensions

Peace Freak
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 101
Joined: Fri Aug 17, 2007 2:24 am

Re: Removing border around a banner image...

Post by Peace Freak » Mon Apr 15, 2024 2:30 pm

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?

User avatar
sikumbang
Joomla! Ace
Joomla! Ace
Posts: 1589
Joined: Fri Aug 19, 2005 4:37 am
Location: earth
Contact:

Re: Removing border around a banner image...

Post by sikumbang » Mon Apr 15, 2024 11:56 pm

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.
http://www.templateplazza.com - Joomla Templates and Extensions

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1676
Joined: Tue Jun 30, 2020 12:17 pm

Re: Removing border around a banner image...

Post by Pavel-ww » Tue Apr 16, 2024 7:47 am

Peace Freak wrote:
Mon Apr 15, 2024 2:30 pm

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
You do not have the required permissions to view the files attached to this post.

Peace Freak
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 101
Joined: Fri Aug 17, 2007 2:24 am

Re: Removing border around a banner image...

Post by Peace Freak » Tue Apr 16, 2024 2:20 pm

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!

User avatar
sikumbang
Joomla! Ace
Joomla! Ace
Posts: 1589
Joined: Fri Aug 19, 2005 4:37 am
Location: earth
Contact:

Re: Removing border around a banner image...

Post by sikumbang » Tue Apr 16, 2024 2:29 pm

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;
}
http://www.templateplazza.com - Joomla Templates and Extensions

Peace Freak
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 101
Joined: Fri Aug 17, 2007 2:24 am

Re: Removing border around a banner image...

Post by Peace Freak » Tue Apr 16, 2024 4:49 pm

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!

User avatar
sikumbang
Joomla! Ace
Joomla! Ace
Posts: 1589
Joined: Fri Aug 19, 2005 4:37 am
Location: earth
Contact:

Re: Removing border around a banner image...

Post by sikumbang » Tue Apr 16, 2024 10:44 pm

You're welcome. Glad to be of help ;)
http://www.templateplazza.com - Joomla Templates and Extensions

robertwolf1
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Mon Apr 29, 2024 12:13 pm

Re: Removing border around a banner image...

Post by robertwolf1 » Mon Apr 29, 2024 12:35 pm

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 */
}


Post Reply

Return to “General Questions/New to Joomla! 5.x”