Support » Fixing WordPress » Center Align

  • Resolved Pianist787

    (@pianist787)


    Hey, I’m working with the theme Pitch. So I’ve created a child theme for this and am ready to do some of my own styling with it. What I’d like to do for starters is center-align most of the front page stuff like the header/footer/projects. I was wondering how I’d go about doing that.

    Here’s my page: allencinemas.free-hoster.net

    Thanks!
    Noah

Viewing 15 replies - 1 through 15 (of 15 total)
  • Moderator Andrew Nevins

    (@anevins)

    Consider this article on centring things
    http://www.w3.org/Style/Examples/007/center.en.html

    Thanks! I’ll attempt to mess around with it and see what I can do.

    So the things I did last evening: I introduced myself to HTML, php, and CSS. Then I returned and looked through the specific part I wanted to change (the navigation bar). But I couldn’t find anything in that specific code that mentioned anything about size and position. I also looked on the home template, but didn’t see anything there either. I accessed the site using the latest version of safari, opened the window where you can see the code of the page, and inspected the navigation bar element (I think it was called the menu bar) and it told me how tall it was, how wide, all that stuff, but I couldn’t find it back in the editor in word press. If anyone wants, I can post the code for the menu (whatever it is! the bar under the logo!) bar here later…

    WPyogi

    (@wpyogi)

    Forum Moderator

    You happened to land on an element that’s not that simple to center – at least not in a way that automatically works when you add/subtract menu items. This is what you need to add to the new style.css file:

    #mainmenu {
        margin: 35px auto 0;
        width: 400px;
    }

    You will need to adjust the width when you add menu items – so that the width fits the menu.

    Also, the best tool for working with CSS is Firebug — http://getfirebug.com .

    So what I would do is create a style.css in the child theme of pitch. Then I would copy/paste above code into that file. As I add menus I just need to adjust width.
    Right?
    Thanks

    WPyogi

    (@wpyogi)

    Forum Moderator

    Yes, although since you said in your OP that you already had a child theme, I assumed it was actually done :). See this for particulars:

    http://codex.wordpress.org/Child_Themes

    Hmm… I did I use a plugin called one click child theme (or something like that) that did everything for me. So there were like two files in the editor… I’ll check out that page.

    Actually, after reading a paragraph, I may ready have one!! I really should have looked first… Stupid me. Lol

    Moderator Andrew Nevins

    (@anevins)

    Alternatively, use this CSS;

    #mainmenu {
        margin: 35px auto 0;
        display: table;
    }

    WPyogi

    (@wpyogi)

    Forum Moderator

    No, you definitely don’t have a child theme active on that site – it would show here:

    href='http://allencinemas.free-hoster.net/wp-content/themes/pitch/style.css?ver=1.3

    Yes, it isn’t active right now… Being the newbie that I am, the only way I found to look at the code of another file was by changing the theme. Of course I immediately noticed the little bar the lets you select which theme to edit. Lol

    So my child theme already has the import style.css of pitch. So if I copy/paste the code bellow that, will it negate the previous alignment? I wasn’t completely sure after reading that page.

    Andrew: what does the display: table; do?

    Moderator Andrew Nevins

    (@anevins)

    Removes the necessity of specifying a width. Ideal for navigation menus that may expand/ contract when adding/ editing/ removing menu items.

    So basically it displays in a ‘table’ whatever menus items there might be. And the previous statement, of course, says it aligns to center.
    Thanks guys! I’ll try this out on my site ASAP!

    So I tried it. I activated the child theme, am editing the child theme. It didn’t change anything. I tried both versions of code. Here’s all the code in my stylesheet.

    /*
    Theme Name:     Child of Pitch
    Description:
    Author:         admin
    Template:       pitch
    
    (optional values you can add: Theme URI, Author URI, Version)
    */
    
    @import url("../pitch/style.css");
    
    #mainmenu {
        margin: 35px auto 0;
        width: 400px;
    }

    With the one menu tweak.

    Wait!! Guys, it’s working. I’m on a different device now, so it must’ve been the cache. Thanks to you both!

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Center Align’ is closed to new replies.