WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] can't adjust margin-left (11 posts)

  1. ddss
    Member
    Posted 1 year ago #

    I have a twenty twelve theme and I am trying to adjust margin-left unsuccessfully.

    The theme has a 40px left and right margin to begin with which I removed because I wanted to add a jpeg background for the footer. The 40px margin didn't allow me that so I thought I will adjust the <div>s separately. Now I've adjusted some, but can't adjust all which leaves me with margin-left:0 for comments and archive names: comments site and blog archive

    Generally, the end result has to be more or less like my website.

    (Having said that, I don't know who came up with the idea using rem - total pain to modify sizes...)

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Well, first off, you should not have the entire stylesheet in your child theme. It should contain only the changes. Do that and then see where you are with making changes.

  3. ddss
    Member
    Posted 1 year ago #

    wrong website above, still running test: test website

  4. ddss
    Member
    Posted 1 year ago #

    WPyogi, thank you, but how should I adjust things then? Basically the whole thing is so complicated (for me) with million tags that I for now copied the entire thing so I can sort out what I need...

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Copying the whole thing makes it harder, not easier. You need to use a tool like Firebug to look at the active CSS in your browser and then from the browser you can copy that section to the child theme and make the changes there. You will need to learn some CSS to do this kind of work - but Firebug makes it MUCH, MUCH easier. There is lots of good info on the Firebug website. This is also a good reference site:

    http://www.w3schools.com/css/

    I know it seems horribly complicated, but if you put in a bit of time now, you will save yourself tons of time and frustration going forward :).

  6. ddss
    Member
    Posted 1 year ago #

    Well, I have a pretty decent CSS learning behind me, a few decent websites for myself and I generally have all tags memorized. Moreover, I've been putting this stylesheet together for about 9 hrs today already and I have in all honesty not found why I couldn't put a jpeg bg img over 100% of the footer and why I now can not adjust the two missing margins. I don't use firebug, maybe I should; I do use 'inspect element' in chrome, however. It also shows me which tags are active when. Problem starts when I see that the element is what they say it is and then I go to the stylesheet and either the element is not there or the adjustments don't work. For instance "0 Comments" is allegedly a h4 and font-size is 18px. When I check in style sheet, h4 is not 18px at any occasion and if I adjust margin, it won't work. I also don't get which exactly is the <div> holding the damn Disqus box. When I go to the div, id or class names I see on chrome and look for them in stylesheet, they don't exist there. good ones is #conversation or global-nav

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I'm not sure how Chrome works, but in Firebug, you can look at the ACTIVE CSS SELECTORS - and where those styles are coming from. But in many cases, it does not matter - you do not need to find where the existing style is. You just use the selectors to OVERRIDE the existing styles. That's why your method is inefficient and frustrating. So for example, the "0 comments" - I use Firebug and see that this selector is the active one:

    #global-nav h4 {
       float: left;
    }

    So I can copy that and add the styles I want in the child theme: If I don't want to change the float, I leave that out and say, just change the color:

    #global-nav h4 {
        color: red;
    }

    The key thing in CSS is how specificity and selectors work...

    The other thing about twentytwelve that you may be aware of is that it's mobile first - so styles for bigger screens have to go inside media queries...

  8. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    'm not sure how Chrome works, but in Firebug

    Would a theme that properly writes CSS for web-kit help?

  9. ddss
    Member
    Posted 1 year ago #

    Thanks for the replay, WPyogi!

    Anyways, I can edit and get the desirable results in Chrome's Inspect Element (which is the same as Firebug). However, when I copy and paste my changes in back-end editing program they don't show up after http://FTP... And these tags are also not in stylesheet...

  10. ddss
    Member
    Posted 1 year ago #

    Problem solved: the problem was that the whole thing was a Disqus thread. Found something here on forum: WP forum solved

  11. ddss
    Member
    Posted 1 year ago #

    -

Topic Closed

This topic has been closed to new replies.

About this Topic