[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 399
  • Last Modified:

CSS with Wordpress Builder

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 iThemes.com)

The site I am working on is (temporarily) at syked.com

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!
0
mellijae
Asked:
mellijae
  • 3
  • 2
1 Solution
 
Jason C. LevineNo oneCommented:
Good lord, what a mess.

Why are you using Builder at all?
0
 
mellijaeAuthor Commented:
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?
0
 
Jason C. LevineNo oneCommented:
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 woothemes.com or elegantthemes.com 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.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
mellijaeAuthor Commented:
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?
0
 
gwkgCommented:
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.
0
 
mellijaeAuthor Commented:
Thank you very much!
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now