Centering site content changing place of post title/author/tags on UBUD theme

  • Unknown's avatar
    iriamaria · Member ·

    Is there a way to center all the site content (incl. comments box)? The page content and the image seem to be aligned to the left. I’ve been trying to tweak the CSS with Firebug with no luck. I have the custom CSS upgrade.

    I’d also like to change the place of the post title/author/tags section, so it would be placed below the image instead of on the right side like here.

    Any advice is appreciated. Thanks.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    The main container is actually centered. The area to the right of the featured image/post content with the title and other metadata is set to a width of around 25% to accommodate longer site titles without unnecessary wrapping into additional lines. If you visit this page on the demo site, it will become more apparent. You can then also narrow down the browser window to see what happens on narrower screens/browser windows.

    Although the title and meta data can be moved down below the content, unless you have the No-Ads upgrade, the title and metadata may end up being hidden by the ads that are occasionally shown on sites here to help pay the bills and keep all the free features free. You can see what I’m talking about from this screenshot of the site you referenced: https://i.cloudup.com/K9AmxMsQMQ-3000×3000.png

  • Unknown's avatar
    iriamaria · Member ·

    Thanks so much for your answer, I see what you mean. I got it working now pretty much the way I wanted to (considering the ads and everything).

    Additional question though, I’d like to move the previous/next post link below the title/author/tags. Now it’s above the title.

  • Unknown's avatar
    thesacredpath · Member ·

    This is challenging since position absolute has to be used to move them, and the title is not something that is fixed in length. A post title can be one, or two or more lines and with position absolute, the next/previous links lose their relationship to the other elements in the parent div, so if the title were two or three lines, the next/previous links could overlay the title.

    You can give the following a try and see what you think. It is adjusted for a single line title only. 

    .entry-header {
    position: relative;
}
#nav-single {
    position: absolute;
    top: 40px;
}
.single-post .entry-details {
    margin-top: 45px;
}
  • Unknown's avatar
    iriamaria · Member ·

    Thanks a lot, it worked perfectly! I just moved it a little bit downwards.

    One more thing, how can I replace the Twitter link in the menu, with an icon? I’ve tried several different ways including adding the CSS class to the custom menu link and made the equivalent changes to the CSS (linking the image from the media library), but it didn’t work. Any suggestions?

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, I’m not seeing a twitter link in the menu on http://thecosmictraveler.com/ . Did you remove it?

    I also don’t see a twitter icon in your media library. Do you have one you wish to use? If so, upload it to your media library and we can help you get the image into your twitter menu item. I would suggest an icon that is around 40px tall, maximum. The menu bar is about 45px tall.

  • Unknown's avatar
    designsimply · Member ·

    Here is an example that will replace text “Random” in the last menu item on the main menu of the Ubud demo site at http://ubuddemo.wordpress.com/ with an image:

    #site-nav ul .menu-item-391 a,
#site-nav ul .menu-item-391 a:hover {
	background: url( http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png) center center no-repeat;
	width: 32px;
	text-align: left;
	text-indent: -9999px;
}

    I used a WordPress logo in this example, you can change that to another image by changing the url() value and adjusting the width value to match your image size.

    You will also need to make sure to get the right menu class name. In the Ubud demo site, the “Random” menu item has a class name of “menu-item-391” and you will need to use your built in browser tools to examine the HTML in the site you’re working on to find out what class name to use for the menu item you want to change. This help page shows how to use browser tools to look through HTML:
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

  • The topic ‘Centering site content changing place of post title/author/tags on UBUD theme’ is closed to new replies.