Add Image to left of Title Text – Fabric Theme

Community Forums Forums Design Tips and Tricks Add Image to left of Title Text – Fabric Theme

This topic is: not resolved

Tagged: , ,

This topic contains 4 replies, has 2 voices, and was last updated by  LocalSEODude 5 months, 4 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #102934

    LocalSEODude
    Participant
    Post count: 32

    I could create an Image to fill the space, but would rather learn how to add the image to the existing Header Text.

    http://www.acornhos.com/wp-content/uploads/2014/04/Acorn-Home-Organization-Professional-Logo.png

    needs to be added to left of Title.

    Is this done by editing CSS with something like background: url(http://www.acornhos.com/wp-content/uploads/2014/04/Acorn-Home-Organization-Professional-Logo.png) no-repeat;

    Does padding and align-left come into play?

    Any changes needed in functions.php or can everything be handled in CSS?

    Thanks!!

    http://www.acornhos.com/
    #102939

    Lauren @ OnceCoupled
    Member
    Post count: 611

    Can be done pretty much as you said. In your background shorthand, add positioning to the image, something like left center. Then add padding-left: 90px to it, in order to make sure the image displays without overlap.


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #102987

    LocalSEODude
    Participant
    Post count: 32

    Thanks Lauren!

    Made some progress, but haven’t been able to get the image off the left side, although I did get it to stop repeating.

    Also, the description coding seems to be cutting image off.

    Here’s the current code (took out the align, float and padding codes as none of the ones I tried worked – even though I went through all the w3school’s tutorials I could find on image alignment):

    #title {
    font-family: ‘Pacifico’, arial, serif;
    font-size: 48px;
    line-height: 60px;
    margin: 0 0 5px;
    text-shadow: #fff 1px 1px;
    background-image:url(‘http://www.acornhos.com/wp-content/uploads/2014/04/Acorn-Home-Organization-Professional-Logo.png’);
    background-repeat:no-repeat;
    }

    #102996

    Lauren @ OnceCoupled
    Member
    Post count: 611

    Do you want it to be all the way on the left, or immediately left of the text?

    If all the way left, just increase the property line-height to 85px.

    If left of the text, use the #title a selector instead.
    :)


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #103003

    LocalSEODude
    Participant
    Post count: 32

    Tried both ways and went with your Property Line-Height Option.

    One last question – to move it slightly off left edge, what float, align or padding code is needed?

    Thanks!!

    Scott

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.