adding span to wp titles

  • Started
  • Last post
  • 4 Responses
  • wwfc

    happy mondays y'all!

    wondering if anyone can put me right on something?

    i am working with a wordpress theme and all is as it should be (so far anyways) - but i am stuck on how to do something here...

    all of the titles (h1-h2-h3...) are centred... but what i want to do is to add a repeated image to the header span (basically a black and white check images) - so all the titles will have this image repeated either side of the title with a little padding either side of the actual title...

    this is the css within the theme's style.css file...

    .entry-content h1,
    .entry-content h2,
    .entry-content h3,
    .entry-content h4,
    .entry-content h5,
    .entry-content h6 {
    color: #fff;
    font-weight: 100;
    letter-spacing: 1px;
    margin-bottom:15px;
    }

    .entry-content .heading-section h1,
    .entry-content .heading-section h2,
    .entry-content .heading-section h3,
    .entry-content .heading-section h4,
    .entry-content .heading-section h5,
    .entry-content .heading-section h6 {
    background:#fff;
    display: inline;
    padding: 5px 20px;
    font-weight: 100;
    }

    i've googled it but there are so many suggestions that i don't know which would be better...

    anyone know off the top of their heads how i can do this?

    here's hoping ;-)

    wwfc
    Flag
  • fadein110

    Make the h1 sit within a div or span with a background image - then add a coloured background white or whatever to overlay the title on top of the image

    fadein11 0Permalink
    UpvoteDownvote
    Dogear
    Flag
      Show [[ numHiddenNotes ]] more notesAdd Note
      SaveCancel
    • wwfc0

      thanks for the reply fadein11 - that would be an idea - but there is a background image sitting static underneath...

      i managed to get the image in there and repeating etc... using this as custom css:
      h1, h2, h3, h4{
      background: url('image.png') center repeat-x;
      }

      ...which does what i need but now it runs underneath the actual title text itself - and i can't work out how to tell it to only show up on either side of the text - not go all the way across...

      any ideas what i need to add to that to achieve what i am after?

      wwfc 0Permalink
      UpvoteDownvote
      Dogear
      Flag
        Show [[ numHiddenNotes ]] more notesAdd Note
        SaveCancel
      • WhiteFace0

        What fadein11 said, add the background image to an outer element eg...

        .entry-content .heading-section {background: url('image.png') center repeat-x;
        }

        ...then add a solid background to the H tags...

        h1, h2, h3, h4{
        background: #fff;
        }

        WhiteFace 0Permalink
        UpvoteDownvote
        Dogear
        Flag
        • yep what I tried to say but said properly.fadein11
        • okay - will give that whirl... i've done it before in a static html/css form - but not in wp...wwfc
        Show [[ numHiddenNotes ]] more notesAdd Note
        SaveCancel
      • hereswhatidid0

        http://css-tricks.com/line-on-si…

        hereswhatidid 0Permalink
        UpvoteDownvote
        Dogear
        Flag
        • ;-) cheers hereswhatidid - i did look at that earlier today as it goes ;-)wwfc
        Show [[ numHiddenNotes ]] more notesAdd Note
        SaveCancel