I have been trying for hours, maybe days now to get borders around the main body of my site but with no luck. Keep trying within the element inspector to try and find the correct css to put into but cannot get anything to work. I have tried just doing in custom.css file but this does not work either. Is it something that I have done wrong elsewhere and caused myself a problem, or just not putting in the correct place. Any help would be appreciated.
TomC
Moderator
Can you throw together a screenshot mockup of what it is you’re trying to accomplish – for visual reference?
Might not be a perfect example. Border round the main body and also small radius on the 4 outer corners. Not sure if will need to alter them for different responsive layouts. Hoping that if can at least get them to work I can look at the different layouts afterwards to make sure they appear correctly.
This is what the site currently looks like but want to apply the border ideally around the top banner and including the footer so that it seperates the site from background image better than just the harsh straight lines.
TomC
Moderator
Got most of what (I think) you’re looking to accomplish . . . .
Within your custom.css file, paste the following CSS rules (and/or modify the ones you already have – as follows):
.t3-mainbody {
background-color: #05fb63;
border-left: 30px solid #000;
border-right: 30px solid #000;
}
.t3-footer {
background: #f7f7f7 none repeat scroll 0 0;
border-bottom: 30px solid #000;
border-left: 30px solid #000;
border-right: 30px solid #000;
color: #666666;
}
.wrap {
border-left: 30px solid #000;
border-right: 30px solid #000;
margin-left: auto;
margin-right: auto;
}
SAVE CHANGES – REFRESH PAGE
The pixel values and color codes used above are is just for EXAMPLE purposes only . . . .
You can/should, of course, modify accordingly to suit your needs.
I’m having a little difficulty trying to figure out how to “separate” the top header/logo section from the rest of the site – CSS wise. Might need to forward this onto one of my Support Team Colleagues for an assist.
Many thanks for that. Is the non seperating something that I may have done when I first started playing with the code in the .less files and lost the template padding to get them to touch rather than changing the custom.css file which I probably should have done?
TomC
Moderator
No, it’s nothing you did . . . It’s just how the code/css was written by the JA Developers.
Oh right, well I will keep fiddling with it and see what happens. Is there a way that I can get the border to work seperately on the footer and nav bar, so that I can put radius on it. Currently when I try and put a radius on footer it also puts the same footer on the nav bar as they are both in the same wrap.
Ninja Lead
Moderator
@bodders13: Kindly send me the URL of your site and the screenshot of this problem. I will help you to check it further.
@ninja Lead Sorry about the delay. Site URL](http://www.calnedivers.club)
Have been trying but still struggling to get the banner and navigation bar separated.
Thanks.
Ninja Lead
Moderator
From URL of your site above, I see the border is working fine on your site, see the screenshot
This topic contains 10 replies, has 3 voices, and was last updated by Ninja Lead 8 years, 9 months ago.
We moved to new unified forum. Please post all new support queries in our New Forum
