-
Hi Guys,
thanks for the great hardwork on templates.I am working with decor to produce a tourism platform and would like to bring out my own style in front page either from articles category or just a html that looks close to twitter results just like the image attached.
my idea is to have a bigger image at the background and a thumbnail of a different picture infront of the image at either corner and then article title and intro text may be upto 30characters and just below it an icon and read more….anyone with some suggestions i will highly appreciate.
thanks alot.
muthumbiI do not understand what happened but i replied today and i can’t see my post. Anyway, I needed to tell you pank thank you for your quick reply and that i am working offline with localhost and don’t have a way to show it online. This is however something understandable because it is articles within a category that i want show in the front page in the way twitter displays when one views a major category like ‘people’. The way i want it is very clear in the attached image. Image A shows how it displays on my site and it is the default normal way to display on ja-decor. But i want it to display differently like that of twitter. the other image shows how twitter displays when one searches on peoples category. I have all the images very clear. Please check the attached image. if this does not work, we can try the custom html to display the same i do not mind to link the read mores to the articles i want to open. ANy help is highly appreciated.
The code
<div class=”row example-row example-thumbnails”><div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<img src=”/images/joomlart/demo/default.jpg”>
<div class=”caption”>
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href=”#” class=”btn btn-primary” role=”button”>Button</a> <a href=”#” class=”btn btn-default” role=”button”>Button</a></p>
</div>
</div>
</div><div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<img src=”/images/joomlart/demo/default.jpg”>
<div class=”caption”>
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href=”#” class=”btn btn-primary” role=”button”>Button</a> <a href=”#” class=”btn btn-default” role=”button”>Button</a></p>
</div>
</div>
</div><div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<img src=”/images/joomlart/demo/default.jpg”>
<div class=”caption”>
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href=”#” class=”btn btn-primary” role=”button”>Button</a> <a href=”#” class=”btn btn-default” role=”button”>Button</a></p>
</div>
</div>
</div></div>
gives me almost what i am after. However, i would like to know how to set up css for it. Also according to the image attached, i would like to the thumbnail to sort of float on top of the background image. I do not know how to code this to bring out the background also. So first give me a code that puts a background image behind the thumbnail or the small photo. The thumbnail to occupy part of the background and also have border around it.and the background should only occupy the thumbnail div. then text to come after. Please see attached image showing how the above code is appearing and the sketch on how i desire it to be like. thanks for your help.
Hi Pank, actually your code helped me alot,
I was able to do what you are suggesting here when i got your code and i have achieved my need. with this code
<div class=”row example-row example-thumbnails”>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”><img src=”images/stories/frontpage/kenya.png” alt=”” width=”348″ height=”167″ /></div>
<div class=”caption” style=”padding: 0px 0px 0px 10px;”>
<h3>The Kenya Collection</h3>
<p>From the Masai Mara to the Indian Ocean Beaches, Kenya is the original home of the Safari. We offer you award winning national parks and beaches as well as unique activities & attractions.</p>
<p><a class=”btn btn-primary” href=”#”>Read More</a></p>
</div>
</div>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”><img src=”images/stories/frontpage/tanzania.png” alt=”” width=”350″ height=”167″ /></div>
<div class=”caption” style=”padding: 0px 0px 0px 10px;”>
<h3>Tanzania & Zanzibar Collection</h3>
<p>From the breathtaking Serengeti to exotic Zanzibar Island, Tanzania offers world class wildlife viewing, breathtaking islands, rich tribal culture & Africa’s highest mountain, Mt Kilimanjaro.</p>
<p><a class=”btn btn-primary” href=”#”>Read More</a></p>
</div>
</div>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”><img src=”images/stories/frontpage/ugandarwanda.png” alt=”” width=”350″ height=”167″ /></div>
<div class=”caption” style=”padding: 0px 0px 0px 10px;”>
<h3>Uganda & Rwanda Collection</h3>
<p>Two jewels in East Africa’s crown, visit Uganda & Rwanda and meet a Mountain Gorilla, raft the world’s longest river, the Nile and explore some of the friendliest places on the planet.</p>
<p><a class=”btn btn-primary” href=”#”>Read More</a></p>
</div>
</div>
</div>it looks like the image attached.
Viewing 7 posts - 1 through 7 (of 7 total)This topic contains 7 replies, has 2 voices, and was last updated by
Pankaj Sharma 9 years, 10 months ago.We moved to new unified forum. Please post all new support queries in our New Forum
Article Category my style in frontpage or just a cutom Html
Viewing 7 posts - 1 through 7 (of 7 total)
