Joomla Templates Club 406,261 posts

[microvation Friend microvationJoin date: March 2011Posts: 75Downloads:0Uploads:19 Thanks: 32 Thanked: 3 times in 1 posts]

#162581

Featured articles on home page have thumbnails right-justified. This is nice. On my site, I use blog category menu items. On the blog layout pages, the pictures is standard layout, but I’d like the custom ja-rave featured articles layout used on the home page … how can I do this?

site is http://www.microvation.org. Attached screenshot illustrates. I am on Joomla 1.6. Thanks

---

Attachments:

1. 

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#385581

Try add this at end of template.css file::

.blog img.left{float:right;}

1 user says Thank You to aman204 for this useful post

1. microvation

[microvation Friend microvationJoin date: March 2011Posts: 75Downloads:0Uploads:19 Thanks: 32 Thanked: 3 times in 1 posts]

#385678

Thanks for responding. Unfortunatly, this is a bit more complex. I have spent a good half-day trying to make your solution work, but I have not been able to. The attached annotated screenshot shows what happens when I add:

.blog img.left{float:right;}

Then the image is still not position all the way right, short by about 5 px. Also, the image is not positioned at the top.

If I instead add:

.blog img.left { top: -5px; position: absolute; right: 0px; }
.blog div.haveimage { padding-right: 140px; position: relative; }

Then I have the same problems. I have updated the annotated screenshot to illustrate this more clearly. Much appreciate the help and any advice on this. Thanks.

---

Attachments:

1. 

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#385707

How about changing this::

.blog img.left{float:right;}

to

.blog img.left{float:right;margin-top:-70px;}

1 user says Thank You to aman204 for this useful post

1. microvation

[microvation Friend microvationJoin date: March 2011Posts: 75Downloads:0Uploads:19 Thanks: 32 Thanked: 3 times in 1 posts]

#385781

Thanks, that helps, the pic is at the top now! However, two differences from the home/feature page remains. First, text does not wrap as it does in the featured layout. Second, there is a right margin–the pic does not go flush right as it does in featured. Attached thumbnail show the difference more clearly.

---

Attachments:

1. 

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#386469

<em>@microvation 233470 wrote:</em><blockquote>Thanks, that helps, the pic is at the top now! However, two differences from the home/feature page remains. First, text does not wrap as it does in the featured layout. Second, there is a right margin–the pic does not go flush right as it does in featured. Attached thumbnail show the difference more clearly.</blockquote>

hi microvation,

Back the file templatesja_ravehtmlcom_contentcategoryblog_item.php,replace it by my attachment file
Then open the file templatesja_ravecsstemplate.css and add this css
.items-row .contentpaneopen { padding-right: 140px; position: relative; }
.items-row .contentpaneopen img.img { margin: 0px !important;width:120px;height:120px; }

1 user says Thank You to Sherlock for this useful post

1. microvation

[microvation Friend microvationJoin date: March 2011Posts: 75Downloads:0Uploads:19 Thanks: 32 Thanked: 3 times in 1 posts]

#386764

Yes, this is working! The final solution was to use the new blog_item file you provided and add teh following 4 lines to the template.css

.items-row .contentpaneopen { padding-right: 140px; position: relative; }
.items-row .contentpaneopen img.img { margin: 0px !important;width:120px;height:120px; }
.blog img.left { top: -5px; position: absolute; right: 0px; }
.blog div.haveimage { padding-right: 140px; position: relative; }


Many thanks!
-billb

[Author]

Posts