Can I add a paper clip to Adventure Journal?

  • Author
  • #791445


    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


    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.



    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.




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


    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.



    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.


    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.


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


    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.


    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( no-repeat 0px -50px;

    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.


    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.


    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( right -226px no-repeat;

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



    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.



    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.

The topic ‘Can I add a paper clip to Adventure Journal?’ is closed to new replies.