Correct Slanted Section Dividers in Wordpress Theme

Posted on 2014-12-23
Last Modified: 2014-12-24
You can view the site in question at and see the problem between the yellow and blue sections as well as between the red and gray sections at the bottom. Specifically, the sections should flow seamlessly with the slants of the adjacent sections going in the same direction, just as it does between the blue and red sections.  

This was a purchased theme and I re-ordered the sections, which is what threw the alignment off. I have attached the CSS file. It seems like the controls for these blocks starts at line 708, but I have changed the order of the border color elements and it does not do anything to fix the problem.

Your help is greatly appreciated and will help me stop banging my head against the wall!
Question by:43homes
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
LVL 29

Accepted Solution

chilternPC earned 500 total points
ID: 40516294
this looks like it might work (I'm assuming you want to get rid of the slopes)

back up the style sheet first (main.css) and find and change the following
.section2 .bot_box, .section4 .bot_box, .section6 .bot_box, .section8 .bot_box, .section10 .bot_box, .section12 .bot_box {
border-width: 0 2880px 60px 0;
border-style: solid dashed solid solid;
.section3 .bot_box, .section5 .bot_box, .section7 .bot_box, .section9 .bot_box, .section11 .bot_box {
border-width: 60px 2880px 0 0;
border-style: solid dashed solid solid;

to the following:
.section2 .bot_box, .section4 .bot_box, .section6 .bot_box, .section8 .bot_box, .section10 .bot_box, .section12 .bot_box {
border-width: 0 0px 0px 0px;
border-style: solid dashed solid solid;

.section3 .top_box, .section5 .top_box, .section7 .top_box, .section9 .top_box, .section11 .top_box {
border-width: 40px 0 0 0px;
border-style: solid solid solid dashed;

this removes the slants all together

Author Comment

ID: 40516527
I'd like to keep the slopes, just eliminate the black and make the slopes go in the same direction between sections.
LVL 29

Expert Comment

ID: 40517174
I think you;ll probably have to play ariund with the 2 statements and change the statements:

border-width: 0 2880px 60px 0;

border-width: 60px 2880px 0 0;

the to 2 styles section 2 ad section 3

maybe swap them around?  (the slope  is not nice IMHO)

Author Comment

ID: 40517239
I tried switching them around and gave up. Thanks for the help. I was looking in the wrong place.

Author Closing Comment

ID: 40517240
Thanks again.

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Show MP4 file and close (HTA) 3 43
toggle content 12 39
ReadyAPI 1.9.0 2 44
Using jQuery colorbox in noconflict() mode in functions.php on a WordPress site ? 14 15
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question