WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] align title below image in blog's front page (11 posts)

  1. florenciacazaban
    Member
    Posted 2 years ago #

    hi!

    i've recently uploaded the following blog:

    http://www.thefactoryofthoughts.com/

    i don't have much knowledge about coding, but i have managed to make a few changes on some php files:
    i was able to insert an image on top of the blog's title (up in the front page). but now i get the title a bit off -i mean, the title is in the same position as it had always been at though it's not aligned with the text in the title-. i want it still on the left of the page, but centered and in line with the logo.

    could you please give me a hand with this matter?
    thank you!!

  2. patv
    Member
    Posted 2 years ago #

    For a quick fix - line 30 of style.css, add:

    position:relative; left:15px

    Although your site title should really be in a h1 or h2 tag, I strongly you suggest you modify your HTML to insert the text in a header tag and work from there.

  3. florenciacazaban
    Member
    Posted 2 years ago #

    thanks for the quick response.
    sorry about my next questions, i'm just a newbie!

    please confirm content of line 30 in style.css.
    is it line:
    .menu ul { list-style-type: none; }

    ????

    so do i just put the line you gave me between the brackets?

    also, i didn't get your last statement... i've read about h1 tags but i wouldn't know where to insert it. please walk me into the procedure.

  4. patv
    Member
    Posted 2 years ago #

    Sorry, line 30 is coming as a different line in my firebug. Make the modifications at the CSS rule using this selector: #site-title a. Yeah just add them as new styles to your CSS rule.

    About the headers, they are used for search engine bots and visual readers to better detect what is the big headings of your website. So usually you want h1 to be for your website title, h2 to be your page title, etc. etc... In your case your anchor is holding your logo image and your site title. If I were you I'd fix it by removing the image from the anchor and placing the anchor inside a h1. Then reconfigure your CSS to reposition your elements as you want it.

  5. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    adding text-align: center; to the style of #site-title might also work ...

    #site-title { float: left; width: 210px; padding-right: 40px; overflow: hidden; line-height: 27px; font-size: 23px; text-align: center; }

  6. florenciacazaban
    Member
    Posted 2 years ago #

    did the style.css change but it didn't work...

    here is what my line looks like:

    #site-title { float: left; width: 210px; padding-right: 40px; overflow: hidden; line-height: 27px; font-size: 23px; position:relative; left:15px }

    i'm still not following you on the h1 thing...
    i should remove the image, then what?

    thanks for your patience :)

  7. patv
    Member
    Posted 2 years ago #

    If you're just starting with HTML and CSS, forget what I said about using a header for now :)

    And for the css, this is the line you want to change:

    #site-title a { color: #333; font-weight: bold; text-decoration: none; position:relative; left:15px; }

  8. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    if you don't see the changes after an edit to style.css, you might need to clear the browser cache, by pressing 'CTRL F5' or 'reload' or whatever your browser needs...

  9. florenciacazaban
    Member
    Posted 2 years ago #

    tried:
    #site-title a { color: #333; font-weight: bold; text-decoration: none; position:relative; left:15px; }

    and

    #site-title { float: left; width: 210px; padding-right: 40px; overflow: hidden; line-height: 27px; font-size: 23px; text-align: center; }

    but still no go.

    i did refresh the page, though nothing changed. i also tried opening the blog with firefox and internet explorer unsucessfuly.

    maybe the problem has to do with the way i set the logo in the first place. i did it at header.php

    this was the original line:

    <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a>

    which i replaced with:

    <a href="<?php echo home_url( '/' ); ?>"><img src="http://www.thefactoryofthoughts.com/blog/wp-content/uploads/2012/07/Untitled-1_2.jpg" alt="<?php bloginfo( 'description' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"align="left" /><?php bloginfo( 'name' ); ?><br><br><?php bloginfo( 'description' ); ?></a>

    just wondering...

  10. florenciacazaban
    Member
    Posted 2 years ago #

    hey there!

    i finally got to do it right!

    i actually used a whole different solution, which was editing my logo with the title right inside it. that way i don't have to trouble with the alignment.

    thank you for your time and assistance.

  11. zcamine
    Member
    Posted 1 year ago #

    Hi guys

    I noticed you managed to reach somewhere I need to edit too.
    what i would like to do is, I want to put some social network small icons right beneath the site title.

    can someone help me?

Topic Closed

This topic has been closed to new replies.

About this Topic