WordPress.org

Ready to get started?Download WordPress

Forums

left margins (17 posts)

  1. picknick99
    Member
    Posted 1 year ago #

    I've successfully set up a two column page by inserting two divs in the HTML but can't seem to get rid of the very wide left margin. I just want the content underneath to aligh with the leftmost link of the menu bar. I've tried noodling around with the CSS but don't seem to be getting anywhere

    Here's the link
    <http://www.eurofilipino.com/wordpress/?page_id=279>

    help greatly appreciated

  2. tomontoast
    Member
    Posted 1 year ago #

    Edit the rule for

    .singular .entry-header,
    .singular .entry-content,
    .singular footer.entry-meta,
    .singular #comments-title {
    	margin: 0 auto;

    to

    .singular .entry-header,
    .singular .entry-content,
    .singular footer.entry-meta,
    .singular #comments-title {
    	margin: 0;
  3. picknick99
    Member
    Posted 1 year ago #

    Thanks Tom - that's brilliant! Worked perfectly

  4. picknick99
    Member
    Posted 1 year ago #

    oops, one slight problem tho,

    the left column shifted nicely to the left as I wanted, but the right hand column is now UNDER the left column, as if the page itself is not wide enough. How would I set the width of the page to accommodate the two columns. I am quite familiar with HML/CSS but rather new to WordPress....

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @picknick - do be aware that editing theme files is a very bad idea -- especially in a WP default theme. All your change will be lost when WP is updated and you should also always have a clean copy of he default theme for troubleshooting.

    Instead use a child theme.
    http://codex.wordpress.org/Child_Themes

  6. picknick99
    Member
    Posted 1 year ago #

    Thank you. I've done that. So do I take it that when I edit the CSS in the Editor I am now editing the child theme?

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Excellent. Yes, any CSS changes should go in the new (empty) child theme style.css file. If coded properly (i.e. specific enough), they will override the parent theme styles -- child styles are loaded after the parent styles.

    But your site is not currently using a child theme (at least not the page linked to above) -- did you activate the child theme?

  8. picknick99
    Member
    Posted 1 year ago #

    So the child style.css has to be EMPTY? I assumed it would just be a copy of the original that would include adaptations. I am very CSS and HTML literate, but even so it is impossible to guess which css attributes apply to which aspects of the web page. EH. It was easy to change that left margin, but I wouldn't have had a clue if I had been tipped off. I am keen to get to grips with WordPress but must say I find everything much easier in standard web design software when I know exactly all teh XHTML tags and the CSS attributes off by heart. I have desigend several websites but this is teh first using WordPress, which I was led to believe was easier but so far seems to be much harder! Thanks for you time

  9. tomontoast
    Member
    Posted 1 year ago #

    The child style.css is not empty. Did you read http://codex.wordpress.org/Child_Themes

    I would maybe recommend modifying the CSS of a simpler theme instead of twenty eleven which is a fairly complex theme. Maybe http://wordpress.org/extend/themes/simple-catch

    Also debugging CSS is very easy if you install the firebug plugin on firefox. You can inspect CSS styles by mousing over the appropriate blocks.

  10. picknick99
    Member
    Posted 1 year ago #

    I read the child themes info and didn't see anything about it havingt o be empty. I'm happy to take your advice on any theme recommendations - I don't really care myself. It only has rto accommodate a simple magazine format for a client of mine. But I have to say, after ten years designing websites, it would have taken me no more than a minute to set up the two column page - now it's taken me hours of stress. Is wordpress really the answer?

    Ok, if I take your advicer, how do I adopt the new simple catch theme and replace the 2011. And do I still need my child theme, and if so, what should bed in it and where should it go?

    I am only doing this section of his website in wordpress - teh rest I will go back to doing in much simpler XHTML/css

    Your help is appreciate dby tehew ay and I am at least impressed by teh speed of responses on here

  11. tomontoast
    Member
    Posted 1 year ago #

    As you are experienced with CSS I would recommend that you actually ignore the info about creating a child theme. Its just recommended for users that have little experience and we don't want users to mess up their blogs in such a way they can't go back to what they had before.

    Just install the Simple catch or any other simple theme and have a play around with the style.css file using the inbuilt editor. You probably just want to play about with the Content section, themes unfortunately have to be applicable to many different site variations so the CSS files become very bloated.

  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Unless you want to lose all your changes when a theme is updated, you should use a child theme or custom option or plug-in.

    The child theme style.css file starts out with no styles -- except the @import line. Then you add changes to the CSS to the file. It's not a copy of the parent stylesheet.

  13. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The best and very easy way to identify the CSS code you need to change is to use Firebug addon in Firefox. It also allows you to make temporary changes to the CSS code -- so you can test things before making them in the actual code. Highly recommended.

  14. picknick99
    Member
    Posted 1 year ago #

    Ok, I'm sure I can adapt it to what i want anyway. This 2-column page is the only one that's proving difficult - and it's ironic because all the other pages will be a simple single column asnyway! I just wanted a 2 column page to list the magazine contributors on the left column and a wider column to the right for the content. Once that's done I can CSS all the tags myself to get the right look I'm after.

    One last thing to check tho - my website DOES reference the CSS files on MY website and not a remote wordpress website. I was just a bit puzzled by the URI cited at the top in teh CSS editor

  15. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    One last thing to check tho - my website DOES reference the CSS files on MY website and not a remote wordpress website. I was just a bit puzzled by the URI cited at the top in teh CSS editor

    Not sure what you mean??

    All CSS styles are only on your site unless you set something else up.

    The best way to get two columns will be to use a theme that has that option built in.

  16. picknick99
    Member
    Posted 1 year ago #

    Hi

    Not sure. There is only one page I want with two columns and I have done that already with a couple of DIVs. The rest are all single column. Thed only remaining problem is that my two columns only fit if they are both quite narrow, whereas I want the left to be narrow and the right to be about twice as wide. It just seem I need to fiddle with the page to make it accommodate a wider right hand column.

    PS Does this Firebug plugin only work with Firefox?

  17. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Hi, sorry for delay -- yes, Firebug only works with Firefox, but totally the best web dev tool. So you can certainly widen the page -- but do you want all the pages wider or only the one?

    Margins here are still affecting the whole width:

    .singular #content, .left-sidebar.singular #content {
        margin: 0 7.6%;
    }

    Probably width here too:

    .singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title {
        margin: 0;
        width: 68.9%;
    }

    See if those help...

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags