Joomla Templates Club 406,261 posts

[Jeancarlos Rodriguez Friend Jeancarlos RodriguezJoin date: September 2014Posts: 252Downloads:46Uploads:29 Thanks: 21 Thanked: 3 times in 1 posts]

#193432

I need to create 3 images that link to an article or an external link. I need to it to look like this. the only way i can get this look is by enabling the blog section which we dont need it for now.

please help.

I try doing it as a custom html module but doesnt look like this.

thanks.

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#517251

Even though your request is beyond the scope of our support service, however please find below workaround for the feature you mentioned.

+ Go to Admin site -> Site -> Default Editor -> set Editor – None

+ Create a custom html module and add following snippets:


<ul class="customize">
<li class="even">
<div class="inner-div">
<div class="moduleItemImage">
<a class="moduleItemImage" href="/jadev2_data/sites/auto/qs.zitej25.1388733574/index.php/blog-style/item/665-logo-design-tips-letterspacing-typefaces" title="Continue reading "Logo Design Tips: Letterspacing & Typefaces"">
<img src="/jadev2_data/sites/auto/qs.zitej25.1388733574/media/k2/items/cache/793ea701476d5db2a4fd8cf1e0bf5880_XS.jpg" alt="Logo Design Tips: Letterspacing & Typefaces">
</a>
<span class="content"> </span>
</div>
<a class="moduleItemTitle" href="/jadev2_data/sites/auto/qs.zitej25.1388733574/index.php/blog-style/item/665-logo-design-tips-letterspacing-typefaces">Logo Design Tips: Letterspacing & Typefaces</a>
<div class="moduleItemMeta">
<span class="moduleItemDateCreated">02 July 2012</span> - 1 comment</a>
</div>
<div class="moduleItemIntrotext">Elit convallis consequat quam Vestibulum ligula eros tortor urna commodo ipsum. Ut id augue pretium turpis sit Donec nibh tempor lacus laoreet. Curabitur vel turpis Nam Nulla at accumsan Morbi… </div>

<div class="clr"></div>
<div class="clr"></div>
<a class="moduleItemReadMore" href="/jadev2_data/sites/auto/qs.zitej25.1388733574/index.php/blog-style/item/665-logo-design-tips-letterspacing-typefaces">
Read more...</a>

</div>
</li>
<li class="odd">
<div class="inner-div">
<div class="moduleItemImage">
<a class="moduleItemImage" href="/jadev2_data/sites/auto/qs.zitej25.1388733574/index.php/blog-style/item/664-website-design-tips-what-to-do-and-what-not-to-do" title="Continue reading "Website design tips: what to do and what not to do"">
<img src="/jadev2_data/sites/auto/qs.zitej25.1388733574/media/k2/items/cache/5003d452a8da016f3ed02a6385cf54e8_XS.jpg" alt="Website design tips: what to do and what not to do">
</a>
<span class="content"> </span>
</div>
<a class="moduleItemTitle" href="/jadev2_data/sites/auto/qs.zitej25.1388733574/index.php/blog-style/item/664-website-design-tips-what-to-do-and-what-not-to-do">Website design tips: what to do and what not to do</a>
<div class="moduleItemMeta">
<span class="moduleItemDateCreated">02 July 2012</span> -<a class="moduleItemComments" href="/jadev2_data/sites/auto/qs.zitej25.1388733574/index.php/blog-style/item/664-website-design-tips-what-to-do-and-what-not-to-do#itemCommentsAnchor">0 Comment</a>
</div>
<div class="moduleItemIntrotext">Congue libero Aenean risus nibh nibh sed laoreet Aenean metus convallis. Quis ac Pellentesque ullamcorper odio nibh urna natoque interdum et Curabitur. Hendrerit nisl facilisi nibh penatibus ac et eu…</div>
<div class="clr"></div>
<div class="clr"></div>
<a class="moduleItemReadMore" href="/jadev2_data/sites/auto/qs.zitej25.1388733574/index.php/blog-style/item/664-website-design-tips-what-to-do-and-what-not-to-do">Read more...</a>
</div>
</li>
<li class="even lastItem">
<div class="inner-div">
<div class="moduleItemImage">
<a class="moduleItemImage" href="/jadev2_data/sites/auto/qs.zitej25.1388733574/index.php/blog-style/item/663-book-reviews-modern-art-and-death-of-a-culture" title="Continue reading "Book reviews: Modern Art and Death of a Culture"">
<img src="/jadev2_data/sites/auto/qs.zitej25.1388733574/media/k2/items/cache/6e100b693083fe7b237779ffd809d8b7_XS.jpg" alt="Book reviews: Modern Art and Death of a Culture">
</a>
<span class="content"> </span>
</div>
<a class="moduleItemTitle" href="/jadev2_data/sites/auto/qs.zitej25.1388733574/index.php/blog-style/item/663-book-reviews-modern-art-and-death-of-a-culture">Book reviews: Modern Art and Death of a Culture</a>
<div class="moduleItemMeta">
<span class="moduleItemDateCreated">02 July 2012</span> - <a class="moduleItemComments" href="/jadev2_data/sites/auto/qs.zitej25.1388733574/index.php/blog-style/item/663-book-reviews-modern-art-and-death-of-a-culture#itemCommentsAnchor">0 Comment</a>
</div>
<div class="moduleItemIntrotext">Fringilla in tempus lacus Sed euismod Curabitur elit feugiat purus interdum. Leo consequat nibh euismod elit Integer quis orci orci eget vitae. Ut Pellentesque sed hendrerit justo tincidunt…cidunt est tincidunt…</div>
<div class="clr"></div>
<div class="clr"></div>
<a class="moduleItemReadMore" href="/jadev2_data/sites/auto/qs.zitej25.1388733574/index.php/blog-style/item/663-book-reviews-modern-art-and-death-of-a-culture">Read more...</a>
</div>
</li>
<li class="clearList"></li>
</ul>

div.content-home ul li {
background: none;
border: 0;
float: left;
margin: 0 0px 15px 0px;
padding: 0;
width: 33.3%;
}

div.content-home ul li div.moduleItemIntrotext {
margin-bottom: 20px;
padding: 0 20px;
text-align: center;
}


+ Open templates/ja_zite/css/template.css file and add CSS declarations below:


div.custom ul.customize li {
background: none;
border: 0;
float: left;
margin: 0 0px 15px 0px;
padding: 0;
width: 33.3%;
}

div.custom ul.customize li div.moduleItemIntrotext {
margin-bottom: 20px;
padding: 0 20px;
text-align: center;
}

div.custom ul li a.moduleItemReadMore {
border-top: 1px solid #eee;
color: #999;
display: block;
padding: 15px 20px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-family: 'NovecentowideUltraLightBold';
}

div.custom ul li a.moduleItemReadMore:hover,
div.custom ul li div.inner-div:hover a.moduleItemReadMore {
background: #000;
color: #fff;
}

div.custom ul li div.inner-div {
background: #fff;
margin: 0 10px;
padding: 0;
}

div.custom ul li a.moduleItemTitle {
color: #333;
display: block;
font-family: sans-serif;
font-weight: bold;
font-size: 100%;
text-transform: uppercase;
margin-bottom: 10px;
padding: 0 20px;
text-align: center;
text-decoration: none;
}

div.custom ul li a.moduleItemTitle:hover,
div.custom ul li div.inner-div:hover a.moduleItemTitle {
color: #ef2a33;
}


Don’t forget to clear cache from Admin area after you make those changes.

[Author]

Posts