Can I add a paper clip to Adventure Journal?

• 

  markjwallis · Member · Jan 5, 2012 at 8:15 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 5, 2012 at 9:15 pm

  • Copy link

  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.

• 

  markjwallis · Member · Jan 5, 2012 at 9:25 pm

  • Copy link

  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.

• 

  timethief · Member · Jan 5, 2012 at 9:28 pm

  • Copy link

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

• 

  justjennifer · Member · Jan 5, 2012 at 9:30 pm

  • Copy link

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

• 

  thesacredpath · Member · Jan 5, 2012 at 9:38 pm

  • Copy link

  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.

• 

  markjwallis · Member · Jan 5, 2012 at 9:43 pm

  • Copy link

  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.

• 

  thesacredpath · Member · Jan 5, 2012 at 9:55 pm

  • Copy link

  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.

• 

  thesacredpath · Member · Jan 5, 2012 at 9:56 pm

  • Copy link

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

  

• 

  thesacredpath · Member · Jan 5, 2012 at 10:00 pm

  • Copy link

  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.

• 

  designsimply · Member · Jan 5, 2012 at 10:21 pm

  • Copy link

  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;
  }

• 

  designsimply · Member · Jan 5, 2012 at 10:23 pm

  • Copy link

  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.

  

• 

  thesacredpath · Member · Jan 5, 2012 at 10:27 pm

  • Copy link

  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.

• 

  designsimply · Member · Jan 5, 2012 at 11:44 pm

  • Copy link

  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+.

• 

  justjennifer · Member · Jan 6, 2012 at 5:07 pm

  • Copy link

  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.

• 

  markjwallis · Member · Jan 6, 2012 at 5:43 pm

  • Copy link

  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.