Need help? Check out our Support site, then


Customizing Site Title to include an image

  1. I would like to include an image just to the left of the site title text on my website.
    I have the custom upgrade and was wondering if this was something that needed or could be done in the CSS?
    Don't have too much experience with CSS, so wondering if anybody else has done this? I'm using the Academica theme.

    I've tried uploading a header image that layouts out the way that I would want, but it leaves a big gap between the menus and the top of the page and where that banner displays.

    Any help would be appreciated!

    http://www.newcastlebaseball.wordpress.com

    The blog I need help with is jeffmwarren.wordpress.com.

  2. I have the custom upgrade and was wondering if this was something that needed or could be done in the CSS?

    yes it can be done. This thread will be moved to the CSS Forum for you where you will get the help you need.

  3. High Jeff. I am by no means an expert. I am like you fumbling my way through and relying on different people to help me. For a completely different reason, I had the same problem. So someone gave me the following code to experiment with which moved up different parts of the page. Some apply to the home page, others to posts page, etc. You can try it out by adjusting the TOP value, usually a negative number works.

    If it doesn't work for you, you can always move it.

    This should get rid of the space using the banner image.

    .column-narrow {
    position: relative;
    top: -45px;
    }

    .home .column-narrow {
    position: relative;
    top: 0;
    }

    .blog .column-narrow {
    position: relative;
    top: 0;
    }

    .archive .column-narrow {
    position: relative;
    top: -60px;
    }

    .page .column-narrow {
    position: relative;
    top: 10px;
    }

  4. Thanks! I think that code will help me with some other issues I'm trying to resolve.
    Ultimately, what I did was find a thread in the forum that gave me some code to put in the header. That specific suggestion didn't work directly on my style sheet (Theme: Academica), but I did find some of the CSS in my existing stylesheet that had a marking of #logo in the header section. To make it work I did the following:
    #logo {
    background: url('http://newcastlebaseball.files.wordpress.com/2013/10/cropped-ponyheadlogo2.jpg') no-repeat scroll 0 transparent;
    display: inline;
    float: Left;
    line-height: 1.2;
    text-transform: capitalize;
    }

    #site-title {
    font-style: Italic;
    font-size: 30pt;
    letter-spacing: inherit;
    margin: 0;
    padding-left: 120px;
    }

    #site-description {
    font-style: Italic;
    color: #7F868D;
    font-size: 16pt;
    margin: 0;
    padding-left: 120px;
    }
    Under the #logo section I added the "Background:" with the url for the image I wanted to display.
    In the #Site-Tite and #Site-description I added the padding-left designation to push the title and description far enough to make room for the image.

  5. Wow. Thanks I am going to use that on my website. Is there anyway to add a link to the image?

  6. @parishconnections, I see you have the image in already. to get it to link to the main page, as the text title does, add the following to your #logo rule.

    width: 700px;

    The add the following two rules to the end of your existing custom CSS.

    #site-title {
        padding-left: 0;
        text-align: right;
    }
    
    #site-title a {
        display: block;
    }
  7. Very nice. Thanks. This will work indeed, but let me ask you if there is a way to change the link page from home to another page. If not, that is okay because I am very satisfied with the way you just set it up, too.

  8. You are welcome. To make it link to a different page, it requires creation of a blank, transparent PNG image that is then put into a text widget and linked to the page you want it to go to, and then the text widget has to be moved up and out of the sidebar and positioned over the header image. If you wish to do that, create the image and put it into a text widget in the sidebar and then we can move it up.

  9. HAVING PROBLEMS. I created a text widget and a PNG image. Then i did a search and came up with this code: I used inspector to find the .text number which was 38. THIS DID NOT WORK. So I am here to ask you for your help. I moved the text widget to the bottom of the column. I had it as the first one.

    #sidebar {
    position: relative;
    }
    #sidebar .text-38 {
    position: absolute;
    top: -135px;
    left: -771px;
    }

  10. thesacredpath
    Staff

    First of all, remove these from your custom CSS as they are interfering with moving the text widget up into the header area

    .column-narrow {
        position: relative;
        top: -45px;
    }
    .home .column-narrow {
        position: relative;
        top: 0;
    }
    
    .blog .column-narrow {
        position: relative;
        top: 0;
    }
    
    .archive .column-narrow {
        position: relative;
        top: -60px;
    }
    
    .page .column-narrow {
        position: relative;
        top: 10px;
    }

    and replace them with these three.

    .column-narrow {
    	margin-top: 0;
    }
    
    .single .column-narrow, .archive .column-narrow {
    	margin-top: -45px;
    }
    
    .page .column-narrow {
    	margin-top: 10px;
    }

    Then add the following to move the text widget up and over the image at left in the header area. I've put a red background to the text widget for positioning visibility purposes. Remove that once you are satisfied it is where it should be and working. (A caveat below the code.)

    #wrap {
        position: relative;
    }
    
    #text-38 {
        background: none repeat scroll 0 0 #FF0000;
        height: 48px;
        position: absolute;
        top: 60px;
        width: 174px;
    }

    That text widget does not show on all sidebars on the site, so the link will only work on the pages where it shows. What you can do is to copy that code into another text widget and put it into the main left sidebar and then copy the #text-38 rule and renumber it for the other text widget.

  11. That must have taken some time to figure out. I mean my messed up "gradual buildup--duct tape" code. At first, I was hesitant to follow your directions (because of all the trouble I add adjusting the columns and moving them up "just right" with the code you wanted to delete), but I also knew that you have never let me down before, so I trusted...the results are PERFECT!!!!!!!!!!

    Just to let you know, I could never have come so far without your help at critical steps along the way. Just because of you and the support from the WordPress team, I kicked in another 30 bucks to buy the no ad upgrade. WordPress is the best!

    Thanks.

  12. thesacredpath
    Staff

    You are very welcome and thank you for the kind words, but you did a awesome job, and the site is pleasant, inviting and easy to get around.

    And even I keep a roll of digital duct tape around, so you have company there. :)

  13. Would like to echo the thanks for your support!

  14. One more quick question.... On pages where there isn't a sidebar is there a way to do this? All of my pages have a left sidebar except for one....
    If all else fails I can just change the page layout of that one page. :-)

  15. thesacredpath
    Staff

    @jeffmwarren, the default page template is the two-sidebar template. If you want two sidebars on a page, such as on Sponsors, edit that page and in the attributes module select the Default template and update the page.

  16. thesacredpath
    Staff

    And, you are welcome.

  17. Initially I wanted to use the page layout that was right side-bar only for the Sponsor page so that we had more room on the main page for promoting our sponsors.
    I did change it to the default layout. I might also try the left side-bar only layout as an option as well.

  18. thesacredpath
    Staff

    If there are different widgets you want to appear on that page, that isn't in one or the other sidebar, check out the widget visibility feature where you can set widgets to display or not display on pages and such.

  19. One thing I noticed when following the instruction to put the "link to an external site into the header image" was the overall ability to shrink the top margin of the sidebars so they were closer to the page heading. That worked on all pages except for the "Posts" page, where the sidebars are still down at the default height.

    I looked at the stylesheet but didn't see a part specific to the "Posts" page. Is there something that I can do to make the "Posts" page sidebars be at the same level I have set the other pages at?

  20. thesacredpath
    Staff

    For the blog page (Announcements) use the following. The title on that page goes full-width, which is what is keeping the sidebars down where they are.

    .blog .column-narrow {
        position: relative;
        top: -85px;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic