WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Center Align (16 posts)

  1. Pianist787
    Member
    Posted 1 year ago #

    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

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  3. Pianist787
    Member
    Posted 1 year ago #

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

  4. Pianist787
    Member
    Posted 1 year ago #

    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...

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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 .

  6. Pianist787
    Member
    Posted 1 year ago #

    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

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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

  8. Pianist787
    Member
    Posted 1 year ago #

    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.

  9. Pianist787
    Member
    Posted 1 year ago #

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

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    Alternatively, use this CSS;

    #mainmenu {
        margin: 35px auto 0;
        display: table;
    }
  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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
  12. Pianist787
    Member
    Posted 1 year ago #

    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?

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  14. Pianist787
    Member
    Posted 1 year ago #

    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!

  15. Pianist787
    Member
    Posted 1 year ago #

    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.

  16. Pianist787
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic