Grey Borders around certain elements

  • Resolved hyljeklubi

    (@hyljeklubi)


    6 years, 5 months ago

    Hello so I recently installed wordpress and a theme called theshop to my website. I am doing pretty damn well except one little issue. I just dont seem to find a way to remove these grey borders whatsoever. I have tried anything i could found from internet and couple extra things. I do believe there is a thing overwriting my solutions form somewhere but i cant get my head in to it.

    So i want to remove grey borders around sidebar, header area, footer area, and body/content area. I have tried to do this with multiple css solutions. Here is the newest solution located in my child themes style.css:

    .content-area {
	width: 75%;
	float: right;
	padding-right: 45px;
	border:none;
}
.widget-area {
	width: 25%;
	float: left;
	border:none;
}

.site-content {
	margin: -30px;
	border:none;
}
.content-wrapper {
	padding: 0px;
	background-color: #fff;
	border:none;
}

.site-footer {
	padding: 30px 0;
	background-color:   #F0F8FF;
	border:none;
	text-align:center;

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • harishkotra

    (@harishkotra)

    6 years, 5 months ago

    Try adding !important for border-none tags.

    Like this

    border:none !important;

    RossMitchell

    (@rossmitchell)

    6 years, 5 months ago

    Using your browser inspector you can find where the border code settings are coming from.
    Also where are you putting your css customizations ? Instead of “!important” it helps if your css is loaded late in the page loading process, often using the customizer (Customizer > Additional CSS) does this for you.

    Thread Starter hyljeklubi

    (@hyljeklubi)

    6 years, 5 months ago

    @harishkotra unfortunately !important did not solve my issue. Although i did read whole documentation about it and learned a lot in the process so thanks fot it anyways!

    @rossmitchell Currently My code is both combination from inspector and copying css from certain spot of main theme’s and adding all this to child theme’s style.css. The reason why i use child theme style.css is that I have understood that it is not a good routine to modify main theme’s original files most of the time. I also like to use ftp and brackets for my working routine so i have avoided customizer’s css by far. Would customizer help me to postpone loading even further than child theme?

    Thank you guys for your interest on my problem.

    E: just tried customizer way with couple versions of my code. No results. So the thing is that i must be targeting wrong things with my css, there is no other way i could be doing it wrong? Since border:none; is pretty self explanatory and child theme should overwrite main theme.

    • This reply was modified 6 years, 5 months ago by hyljeklubi.
    Thread Starter hyljeklubi

    (@hyljeklubi)

    6 years, 5 months ago

    Okay so took me hours and hours of digging in to themes code but in my case it is the following code that was needed. I add it here for future reference, although one has to realize that it is probably different for you in case of your plugin and theme. I found out that best practice is to just inspect the element closely where you want to remove your borders and find the exact element to be as specific as possible. In case you find yourself dwelling with the problem and find this post – feel free to pm me and lets try to figure out. I hereby declare this problem solved!

    code:

    
.hentry:first-of-type {
    border:none;
}

.hentry {
    border:none;
}
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Grey Borders around certain elements’ is closed to new replies.