Adventure Journal sticky post colour code

• 

  thosnevin · Member · Dec 22, 2013 at 12:57 am

  • Copy link
  • Add topic to favorites

  Hi CSS coder
  I can customise the CSS code of my blog so I would like to know how to change the colour of the sticky post crumpled paper background in the Adventure Journal theme. It’s a tad too yellow – I would like a whiter colour that still shows the crumples.

  The blog I need help with is: (visible only to logged in users)

• 

  thosnevin · Member · Dec 22, 2013 at 1:45 am

  • Copy link

  After some searching, at:
  https://wpcom-themes.svn.automattic.com/adventure-journal/style.css

  – I found that the crumpled paper is a jpg – does this mean I have to download the jpg, whiten it myself, and then somehow reload via CSS in Custom styling – or can you fix this for me? How could I replace a jpg with a modified jpg of the same URL? What is the filter opacity applied to the tape gif? Can it be used on the paper-crumpled jpg to alter or lighten the jpg colour?

  —————————————————————————————–
  /* =Sticky Posts
  ———————————————– */

  .sticky {
  margin-bottom: 20px;
  position: relative;
  }
  .sticky,
  .bypostauthor {
  background: #fae8d4 url(images/paper-crumpled-sm.jpg);
  border-bottom: 1px solid #bcb19c;
  border-left: 1px solid #f5f7f2;
  border-right: 1px solid #c6bba6;
  border-top: 1px solid #f5f7f2;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  padding: 10px;
  }
  .sticky .entry-utility {
  background: rgba(198,180,153,.5);
  }
  .sticky .tape,
  .bypostauthor .tape {
  background: url(images/tape.gif) no-repeat;
  opacity: .7;
  filter: alpha(opacity=70);
  width: 59px;
  height: 69px;
  position: absolute;
  z-index: 13;
  }
  .sticky .tape.tr,
  .bypostauthor .tape.tr {
  right: -18px;
  top: -20px;
  }
  .sticky .tape.bl,
  .bypostauthor .tape.bl {
  bottom: -30px;
  left: -20px;
  }
  .sticky {
  }
  .bypostauthor {
  background: #fae8d4 url(images/paper-crumpled.jpg);
  border: 1px solid #dacfba;
  border-radius: 2px;
  box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
  padding: 10px;
  }
  /*width correction for featured images in sticky styling*/
  .sticky .attachment-post-thumbnail {
  width: 99% !important;
  }
  ——————————————————————————————-

• 

  thosnevin · Member · Dec 22, 2013 at 4:18 am

  • Copy link

  Well, I might have created a problem but I uploaded my modified jpgs for the background of the sticky post to media library , and put the full http: URL in the CSS code.
  eg.
  http://thomasnevin.files.wordpress.com/2013/12/mypaper-crumpled.jpg

  Seems to work, but I dunno … should the full URL go into CSS code?

• 

  thosnevin · Member · Dec 22, 2013 at 4:19 am

  • Copy link

  yep, I’ve lost the tape gifs! Help!

• 

  thosnevin · Member · Dec 22, 2013 at 7:32 am

  • Copy link

  Got tape gifs included now. Question is – should the full URL from my media library go into the CSS code without breaking something?

• 

  thosnevin · Member · Dec 30, 2013 at 10:40 pm

  • Copy link

  Is there an answer to this question,

  ” should the full URL from my media library go into the CSS code without breaking something?”

  i.e. is it possible to omit the complete blog’s url but keep the media file name in the CSS? I only ask this because I have never seen full URLS in CSS code before. BTW, the full url above is not now in the my CSS – I have changed the file name of the img just in case.

• 

  timethief · Member · Dec 30, 2013 at 10:53 pm

  • Copy link

  Hi there,
  This is a link for you so you click it and then copy and paste into a new thread in the CSS Forum https://en.forums.wordpress.com/forum/css-customization#postform

• 

  thosnevin · Member · Dec 31, 2013 at 7:28 am

  • Copy link

  Thanks timethief, have now posted same query in css forum.