How would I change the bottom of each main column?

• 

  chrismhmoore · Member · Jul 4, 2013 at 4:11 pm

  • Copy link
  • Add topic to favorites

  Id simply like to make the bottom of each main column to have a sort of cut ribbon effect, for example- l/l, but only shallower.

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

• 

  miguelcsf · Staff · Jul 4, 2013 at 11:09 pm

  • Copy link

  Hey Chris,

  Could you sketch that up and send us an image? It would make it easier for us to get a mental picture.

• 

  designsimply · Member · Jul 8, 2013 at 5:58 pm

  • Copy link

  If you created an image with the cut ribbon effect and then uploaded it to your media library, you could tile it along the bottom of posts using CSS like this:

  .site-content article {
  	background: rgba(255,255,255,0.95) url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png) bottom repeat-x;
  }

  I used a WordPress logo image in this example. You would want to change the url() value to your own image.

• 

  chrismhmoore · Member · Jul 9, 2013 at 8:30 pm

  • Copy link

  Okay i think that will work great. So how do i find out how wide and how transparent to make the ribbon end graphic?

  Thanks for your support.

• 

  chrismhmoore · Member · Jul 9, 2013 at 9:23 pm

  • Copy link

  I have tried doing your suggestion and originally it worked with the logo you supplied but when i add in my image (ribbon1.png), it doesn’t show up. I have entered the following:

  .site-content article {
  background: rgba(255,255,255,0.95) url(http://chrismhmoore.files.wordpress.com/2013/07/ribbon1.png) bottom repeat-x;
  }

• 

  designsimply · Member · Jul 9, 2013 at 9:25 pm

  • Copy link

  That’s up to you! You might set the transparency to match whatever transparency is used on the posts themselves. I see your posts at http://chrismhmoore.com/ currently aren’t using any.

  As for width, you could make something very small and set it up to repeat along the bottom. The image in the logo example above, for example, is 32 x 32 pixels.

• 

  chrismhmoore · Member · Jul 9, 2013 at 9:36 pm

  • Copy link

  The graphic I uploaded would stretch the entire width of the column.

• 

  designsimply · Member · Jul 9, 2013 at 9:53 pm

  • Copy link

  That’d work fine too. In that case, you probably wouldn’t need “repeat-x” at the ened of the “background” line, but it wouldn’t hurt anything either.

• 

  chrismhmoore · Member · Jul 9, 2013 at 9:59 pm

  • Copy link

  I do see it in the background of the posts columns but Id like them to only be at the bottom/end of the posts columns?

• 

  designsimply · Member · Jul 9, 2013 at 11:56 pm

  • Copy link

  This actually took a bit more work to figure out than I thought it would.

  Here’s what I came up with after some testing:

  .site-content article {
  	background-color: rgb(255,255,255);
  	background-color: rgba(255,255,255,0.9);
  	position: relative;
  	margin-bottom: 106px;
  	overflow: visible;
  }
  .site-content article:after {
  	background: transparent url('http://chrismhmoore.files.wordpress.com/2013/07/ribbon1.png?w=618') center bottom repeat-x;
  	bottom: -56px;
  	content: " ";
  	display: block;
  	height: 56px;
  	overflow: visible;
  	position: absolute;
  	width: 618px;
  }

• 

  chrismhmoore · Member · Jul 10, 2013 at 12:04 am

  • Copy link

  This is looking like it should be working but i just don’t see the ribbon graphic, tho i think there is enough space for it now???

• 

  designsimply · Member · Jul 10, 2013 at 1:49 am

  • Copy link

  I can see the ribbon graphic working at http://chrismhmoore.com/ right now. I tested it with Chrome 27 on a Mac.

  Try force refreshing the page maybe?

• 

  chrismhmoore · Member · Jul 10, 2013 at 5:14 pm

  • Copy link

  Oh duh.. looks wonderful thank you. I do see at the bottom of the Church street murals page the ribbon is colliding with the comment bar?

• 

  designsimply · Member · Jul 10, 2013 at 5:48 pm

  • Copy link

  I’m not seeing the collision! Can you check it again and reply back if it’s still happening?

• 

  chrismhmoore · Member · Jul 10, 2013 at 6:16 pm

  • Copy link

  Yea i see it on – http://chrismhmoore.com/portfolio/church-st-murals/ – at the bottom the ribbon runs over the comment sections’ background.

• 

  designsimply · Member · Jul 10, 2013 at 7:31 pm

  • Copy link

  It always helps to have a link!

  The following custom CSS rule you’ve saved in your blog is causing that issue:

  body.page-id-94 #content, body.page-id-94 article, body.page-id-94 article .entry-header, body.page-id-94 article .entry-content, body.page-id-94 article img {
  	padding-top: 0;
  	margin-top:0;
  	margin-bottom:0
  }

  Remove the “margin-bottom:0” part from that block of CSS and it should go back to working like the other pages.