CSS with Wordpress Builder

Posted on 2011-10-26
Last Modified: 2012-05-12
First, I am not a designer or a programmer. This is a project that fell into my lap.

So I am making a Wordpress theme, using the Builder framework (from

The site I am working on is (temporarily) at

They have a built in CSS editor in the theme, which is supposed to make things easier, but actually has the opposite effect.

I can't figure out why my text on the page is flush left against the "container." I know it all needs to be moved to the right, but I am having trouble using the CSS editor.

Thank you in advance!
Question by:mellijae
    LVL 70

    Expert Comment

    by:Jason C. Levine
    Good lord, what a mess.

    Why are you using Builder at all?

    Author Comment

    Because my skill set in this department is more along the lines of MS Frontpage. I haven't done this in 15 years. I got roped into the project.

    Got any tips?
    LVL 70

    Expert Comment

    by:Jason C. Levine
    If your skill set is down there, I suggest browsing for a theme that comes close to what you have in your head and use that. Trying to build a theme with little to no knowledge of CSS is just going to bring you heartache and frustration.  WordPress is a great solution for a non-web designer precisely because the theme ecosystem is so vast and it allows you to pick one, deploy, and get to the content.  If you want to build a site from the ground up code first, switch back to FrontPage or ExpressionWeb or Dreamweaver...

    Check out the offerings at or for ideas.  We can discuss further if you want to take this path.

    If you want to try to use builder, you have to understand how it structures things.  Each section of that page consists of four or more divs (I have no idea why, though) and all of these divs are set to 900 pixels in width.  The innermost div holds the text and that div needs to have the margin and padding properties set to move the text inside of the main content area the way you want it.  But honestly, the code is terrible.  It's a mix of declared and inline styles and a rat's nest of divs that don't serve any other purpose but to bind you to the software.  Dump it, start over.

    Author Comment

    At this point, switching to something else is not an option. There are many reasons, but to detail them would be... fruitless.

    I appreciate what you are saying, believe me. I would rather take my time and learn this whole thing correctly. I intend on going back in a couple of weeks and going from PSD to my own theme. But for now, I am stuck.

    You wrote that the innermost div needs to have the margin and padding properties set...

    I can go into the raw CSS without using the stupid editor of course. What should I look for and what do I change exactly?
    LVL 31

    Accepted Solution

    I see you have

    style="width:900px; padding:0; margin:0 auto; display:block; clear:both; overflow:hidden;"

    hardcoded into

    <div class="builder-module-outer-wrapper builder-module-image-outer-wrapper"

    change the width and padding to

     width:850px; padding:0 25px;

    that gives you 0 top and bottom padding and 25px left and 25px right.  

    Whatever left and right padding you give gets added to the width.  So the extra 50px of padding needed to be taken off the 900px width.

    fyi: hardcoding styles into the html will override anything in css stylesheet which typically causes problems.

    Author Closing Comment

    Thank you very much!

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Join & Write a Comment

    I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
    The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…

    729 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

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now