Help with enlarging the featured listings Images and layout
Hi
I have tried to implement the changes I found on the forum post quoted below into my own site in order to enlarge the images in the top featured listings section.
I have managed to make the images larger but for some reason the text is appearing to the right of the image instead of below the image.
Can someone please have a look at it and give me so ideas as to what I've done wrong and how I can fix it?
I'll add the link to my website in the post directly below this one.
Many thanks in advance!
Originally Posted by
resellgalore
Well after going through a lot of posts I figured out the solution.I am a novice for php and css but since it worked for me I thought it might help you who are having trouble with the same thing in the latest version of classipress
Edit the file featured.php
Replace this
PHP Code:
<?php if(get_option('cp_ad_images') == 'yes') cp_ad_featured_thumbnail(); ?>
with this
PHP Code:
<a rel="nofollow" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" <?php if ((get_option('cp_ad_image_preview') == 'yes') && (cp_get_image_url_raw($post->ID, 'large', 1) == true)) { ?>class="preview" rel="<?php echo cp_get_image_url_raw($post->ID, 'large', 1); ?>" <?php } ?>><?php if(get_post_meta($post->ID, 'images', true)) cp_single_image_legacy($post->ID, get_option('thumbnail_size_w'), get_option('thumbnail_size_h'), 'preview'); else cp_get_image_url_feat($post->ID, 'thumbnail', 'preview', 1); ?></a>
Now editing the style.css (classipress/style.css)
Replace this
PHP Code:
/* featured listings homepage carousel */
#list { width:907px; margin:0 auto; height:85px;}
.slider { float:left; left:-5000px; margin-left:15px; position:relative; height: 88px; /* visibility:hidden; */}
.slider ul { height:70px; width:600px}
.slider ul li { padding:5px 15px; height:70px; width:140px}
.slider ul li a {text-decoration:none; font-weight:bold;}
.slider ul li a:hover {text-decoration:underline}
.slider ul li:hover { background-color:#F2F2F2; -khtml-border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; text-shadow:0 1px 0 #fff;}
.slider ul li img { cursor:pointer;}
span.price_sm { font-size:11px; font-style:italic; color:#666}
span.feat_left { float:left; text-align:center; width:55px; }
span.feat_left a.preview img:hover {opacity:0.6;}
#list li p {display:block; margin:0 0 0 62px; text-shadow:0 1px 0 #fff;white-space: pre-wrap; white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */}
span.feat_left img.preview { border:1px solid #CCC; float:left; margin:3px 10px 0 0; padding:2px; -moz-box-shadow: 1px 1px 4px #dbdbdb; -webkit-box-shadow: 1px 1px 4px #b7b7b7; box-shadow: 1px 1px 4px #b7b7b7; -khtml-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}
.prev { cursor:pointer; float:left; padding-top:25px}
div.prev img:hover, div.next img:hover {opacity:0.6;}
.next { cursor:pointer; float:right; padding-top:25px}
/* home page directory category listing */
With this:
PHP Code:
/* featured listings homepage carousel */
#list { width:907px; margin:0 auto}
.slider { float:left; left:-5000px; margin-left:10px; position:relative; /* visibility:hidden; */}
.slider ul { height:140px; width:600px; text-align:center;}
.slider ul li { padding:5px 15px; height:140px; width:140px;}
.slider ul li a {text-decoration:none; font-weight:bold; text-align:center;}
.slider ul li a:hover {text-decoration:underline}
.slider ul li:hover { background-color:#F2F2F2}
.slider ul li img { cursor:pointer; margin: 0 auto; display:block;}
span.price_sm { font-size:13px; color:#000000; font-weight:bold;}
span.feat_left { text-align:center; width:140px;}
span.feat_left a {width:110px; height: 110px; float:left; display: block; margin: 0 auto; }
#list li p {display:block; margin:0px; text-align: center; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */}
.captify { border:1px solid #CCC; margin:0 0 0 0px; padding:2px;}
.prev { cursor:pointer; float:left; padding-top:50px}
.next { cursor:pointer; float:right; padding-top:50px}
/* home page directory category listing */
Reply With Quote
You must be an AppThemes customer and logged in to view this response. 
