Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Can I add a paper clip to Adventure Journal?

  1. markjwallis
    Member

    Hi, I noticed that in the old thumbnail preview for the Adventure Journal theme, there was a paper clip fixed to the title card in the header. Is there any way of adding CSS code to make this appear? I know it only existed in early demos, but it would be great to reinstall it...

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

  2. thesacredpath
    Member

    I've never seen a thumbnail or anything showing a paperclip, but yes, something like that could be added with CSS. Depending on how you want it added and such, it could require some tricky work in Photoshop.

  3. markjwallis
    Member

    It was from an old screenshot used when the theme first aired
    I can handle the Photoshop part, but wondered about the relevant code for CSS. I'm a bit rubbish at that kind of thing.

  4. timethief
    Member

    @thescaredpath
    see here > http://en.forums.wordpress.com/topic/how-do-you-get-the-paper-clip-feature-on-the-adventure-theme?replies=8#post-771550

  5. justjennifer
    Member

    (@tsp-the org version of the theme uses sprites.)

  6. thesacredpath
    Member

    That clip looks like it is in at least two pieces on two different images and they would both have to be put in and then adjusted so that they aligned properly.

  7. markjwallis
    Member

    I wondered if a png could be made to float on top of the title card? I think Contexture, the company who designed it used the clip for the .org version only.

  8. thesacredpath
    Member

    There is a clip in the .org version. It is in an image sprite (part of it) and then the other part of the clip is in another file.

    If you get PNG with a transparent background of a paper clip and hack it up then we can see about putting it in there.

    That who background for the title/description was done totally differently in the original .ORG version of the theme. It was three individual images in an image sprite that were used to create that background.

  9. thesacredpath
    Member

    Here is one of the sprites, and I have not found the other one that has the rounded part of the clip in it.

    http://flippintestblog.files.wordpress.com/2012/01/mp-sprite-master.png

  10. thesacredpath
    Member

    There aren't the necessary selectors or divs in the wordpress.COM version of the theme to put the various images, so you would have to roll your own.

  11. designsimply
    Staff

    Try just replacing the other background stuff, like this: 

    #logo {
border: none;
box-shadow: none;
padding: 35px 45px 35px 70px;
left: 8px;
top: -30px;
background: url(http://flippintestblog.files.wordpress.com/2012/01/mp-sprite-master.png) no-repeat 0px -50px;
}

  12. designsimply
    Staff

    And I would recommend downloading the image @thesacredpath saved for you, uploading a copy to your own media library, and switching out the image reference in the CSS to point to the image saved in your media library.

    http://flippintestblog.files.wordpress.com/2012/01/mp-sprite-master.png

  13. thesacredpath
    Member

    There is a second image in that sprite that acts as the right end of the background for the title/tagline. In the .ORG theme, those two images are loaded in #logo2 and #logo3 and the version here doesn't have divs with those selectors, so the right end of the background is going to look unfinished.

  14. designsimply
    Staff

    I think it looks pretty good compared to what was there before even without the bottom right page lift + shadow part, but you can add that too:

    #logo:after {
content: "";
position: absolute;
top: 0px;
right: -65px;
width: 70px;
height: 150px;
background: url(http://flippintestblog.files.wordpress.com/2012/01/mp-sprite-master.png) right -226px no-repeat;
}

    Should work for Firefox 3.5+, Safari 1.3+, All Chrome, Opera 6+, IE8+.

  15. justjennifer
    Member

    Of course, you could also create your header image with a paperclip as a part of the header image itself.

    You'd need to allow for a small border to hold the left side of the paperclip, but if you match the border color to the background of the header area, it will hardly be noticeable.

    Not as elegant as the CSS solution, but a solution.

  16. markjwallis
    Member

    Thanks for all your replies, you've been very helpful! I think I might go for your solution, Jennifer because it's the easiest for now.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags