WordPress.org

Ready to get started?Download WordPress

Forums

Customizing Image caption background (3 posts)

  1. bitsybride
    Member
    Posted 1 year ago #

    I want to add a ribbon image I made to the bottom of the small "featured" images that appear on my homepage. I'm not an expert, but generally I can stumble upon a solution. This time I'm stuck.

    This is my homepage: http://bitsybride.com

    and this is what I'm going for: http://bitsybride.com/Image8.png

    I'm pretty sure I need to put it somewhere in here in my CSS file. I am using the "smallpost" option:

    /* indexpost - types
    ********************************************************************************************
    ********************************************************************************************/
    
    .smallpost .date,
    .bigpost .date,
    .post .date{
    overflow:hidden;
    position:absolute;
    padding:7px;
    line-height:1;
    top:0;
    left:0;
    }
    
    .smallpost .more,
    .bigpost .more{
    overflow:hidden;
    position:absolute;
    padding:0;
    line-height:1;
    right:0;
    bottom:0;
    width:32px;
    height:30px;
    }
    
    .more a{
    position:absolute;
    right:0;
    bottom:0;
    padding:7px 8px;
    line-height:1;
    width:15px;
    height:15px;
    }
    
    ul.bigpost li {
    width:600px;
    margin:0 40px 40px 0;
    padding:20px 20px 30px 20px;
    position:relative;
    float:left; }
    
    	ul.bigpost li a img {
    	margin:-20px 0 15px -20px;
    	width:640px;
    	height:auto;
    	overflow:hidden;}
    
    	ul.bigpost li iframe{
    	margin:-20px -20px 15px -20px;
    	width: 640px;}
    
    .smallpost {
    	overflow:hidden;
    	width:730px;
    	padding-bottom:0;
    }
    
    ul.smallpost li {
    	width:280px;
    	height:150px;
    	margin:0 40px 60px 0;
    	padding:0px 0px 0px 0px;
    	position:relative;
    	float:left;
    	background:transparent
    }
    
    ul.smallpost h2 {
    	font-size: 12pt;
    	line-height: 0pt;
    	margin: 0 0 0px 0;
    	padding:10px 0px 0px 0px;
    	letter-spacing: -1px;
    } 
    
    ul.smallpost li img {
    	margin:-20px 0 15px -20px;
    	width:280px;
    	height:150px;
    	overflow:hidden;
    padding: 4px;
    	margin: 1px 1px 4px 1px;
    	overflow: hidden;
    	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /*-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;*/
    	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    	-o-linear-gradient(#2F2727, #1a82f7);
    	background:
    	-moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent
    	;
    	background: -webkit-gradient(linear, left top, left bottom,
    	from(#fff),
    	color-stop(0.5, #fff),
    	to(#EFEFEF)
    	);
    	filter: progid: DXImageTransform.Microsoft.Gradient(StartColorStr='#ffffffff', EndColorStr='#EFEFEFEF');
    	-ms-filter: \"progid: DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#EFEFEFEF)";
    	-o-linear-gradient(top, #dcdcdc, #c6c6c6);
    	border: 1px solid #FFFFFF;
    	z-index: 5;
    }
  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    You'll receive CSS specific help on http://csscreator.com/forum

  3. bitsybride
    Member
    Posted 1 year ago #

    No thanks. I'm happy here and can wait for a response.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags