WordPress.com

1. curiousemily
   Member
   Mar 19, 2013, 2:05 PM

   Hello,

   I'm currently re-doing my blog. It's currently a bit of a mess as I haven't re-added all the featured images, but I have some button images I want to put in the top right hand side, links to Twitter, Bloglovin' and so on. The space is supposed to be used for a slogan - anyone have any idea how I can add more than one image with CSS that links out?

   Alternatively, how can I add navigational buttons (as JPEGs or PNGs) to the left hand sidebar?

   Thanks!

   The blog I need help with is incurablycurious.com.

2. thesacredpath
   Member
   Mar 19, 2013, 3:44 PM

   CSS can't be used for html links. The way this has been done in the past is to use CSS positioning to move a text widget up into the top right area. You would have to put the images into a text widget and then put it into one of the four bottom widget areas and we could then move it up and into the header area.

3. curiousemily
   Member
   Mar 19, 2013, 4:12 PM

   Okay, amazing. That's fine. I'm a total newbie to CSS - would you mind walking me through how to reposition the widget?

   As the button is a hyperlinked image, wouldn't I be better off using the image widget?

   Thanks!

4. thesacredpath
   Member
   Mar 19, 2013, 4:15 PM

   An image widget does a single image and only offers one link. Are you only wanting one image up there?

5. curiousemily
   Member
   Mar 19, 2013, 4:27 PM

   There are three or four I'd like to add if that's doable?

6. thesacredpath
   Member
   Mar 19, 2013, 4:29 PM

   In this case, you have to set a position relative declaration in #wrapper. You then have to get the CSS ID of the text widget you want to move from within the page source and then create a rule that will move it up to where you want it using position absolute. Sample (from out of my head)

   #wrapper {
   position: relative;
   }
   
   #text-2 {
   position: absolute;
   right: 0;
   top: 75px;
   }

   All the above would need to be adjusted, but gives you something to go on. Once you get the images and links into the text widget, then we can help you move it up into the header area.

7. curiousemily
   Member
   Mar 19, 2013, 4:50 PM

   Okay, I've put four placeholder images in a text widget which is now on a side bar (see http://incurablycurious.com/2013/02/26/public-transport-the-rules/ just for testing). I can easily edit the images (they're all the same dimensions etc) and links afterwards.

   One question I have is that in the text widget they go one after the other vertically, when in the header I need them to go across the page.

   Thanks for all your help!

8. thesacredpath
   Member
   Mar 19, 2013, 7:32 PM

   This will have to be adjusted for final positioning, but you can see the idea. To get the images to be in line horizontally, you need to edit in the "text" tab and make sure that the code is places one right after another rather than as separate paragraphs or lines. I would suggest putting a single space between each chunk of image/link code. Once you get the actual images in the text widget we can work on spacing and final placement.

   #wrapper {
       position: relative;
   }
   #text-5 {
       position: absolute;
       top: 0;
       width: 350px;
       right: 75px;
   }

9. curiousemily
   Member
   Mar 19, 2013, 10:04 PM

   Okay, I've done that, but the icons are still positioned too low. What do I need to change?

   This is the CSS:

   #wrapper{position:relative}#text-5 {position:absolute;top:0px;width:320px;right:0px}

10. thesacredpath
    Member
    Mar 19, 2013, 11:11 PM

    Do this for the "text-5" and then you can adjust and play with the "top" and "right" values as you desire.

    #text-5 {
        position: absolute;
        width: 350px;
        top: -20px;
        right: 75px;
    }

Topic Closed

This topic has been closed to new replies.