Joomla Templates Club 406,261 posts

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#201932

Hi,
Is there a way to replicate the “Shop – All Categories” page layout without using JoomShopping? I would like to have similar “image-&-description-rectangles” but link them to different parts of the website (preferably with a url, or connecting to articles that are not shopping related)

[Eragon H Friend Eragon HJoin date: July 2014Posts: 468Downloads:1Uploads:39 Thanks: 5 Thanked: 156 times in 149 posts]

#552507

Is this the one you need: http://prntscr.com/4ur7gq

You can use Custom HTML module to do that. Kindly follow the below steps

1. Create a layout without “content” and add two new spot-light position
Extract and copy the layout “customized.php” to folder root/templates/ja_fixel/tpls/

2. Add 2 new positions “extra-1” and “extra-2”
Edit file root/templates/ja_fixel/templateDetails.xml >> http://prntscr.com/4ura5v

3. Create a style using the new layout and assign to the Menu items that you want to display
a. http://prntscr.com/4ur9o3
b. http://prntscr.com/4ural7
c. http://prntscr.com/4uraxe

4. Create module Custom HTML as below and assign to position”extra-1″ and “extra-2”

<div class="customized-category" style="padding-top: 10px;">
<div class="width50" style="padding: 10px;height: 296px;border-style: solid; border-width: 2px">
<div class = "customized-image" style = "float: left; width=50%;">
<a href = "http://localhost/demo/j30/jatc_fixel/index.php/shop/all-categories">
<img src="http://localhost/demo/j30/jatc_fixel/components/com_jshopping/files/img_categories/category1.jpg" alt="Women" title="Women">
</a>
</div>

<div class = "customized-content" style = "margin: 10px;float: right;width: 40%;overflow: hidden;">
<a class = "customized-title" style="font-size=18px; font-weight: 500;" href="http://localhost/demo/j30/jatc_fixel/index.php/shop/all-categories">Women</a>
<p> </p>
<p> Sem morbi dictumst ipsum nascetur id Morbi Mauris eros libero Vivamus. Felis quis Vestibulum lobortis eu commodo arcu quis Morbi Aenean turpis </p>
</div>
</div>
</div>

5. Add this code to root/templates/ja_fixel/css/custom.css

.t3-spotlight.t3-spotlight-2.row {
background-color: black;
}

You may need clear cache to see the change

If you face problems, kindly PM your site URL and temporary admin account. I can have a look
If your need is different, kindly share me the illustrated screenshot with description

---

Attachments:

1. Customize.zip

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#553089

Hi Eragon,
Thanks for your help. I did exactly what you said and got the same rectangles you did. Unfortunately, these look different from the “All Categories” rectangles in the demo. Your version seems to have some padding around the images; plus, the images don’t interact (zoom-in) as they do in the “All Categories” layout.

Is there a way to make it look exactly as it does on “All Categories” ?

[Eragon H Friend Eragon HJoin date: July 2014Posts: 468Downloads:1Uploads:39 Thanks: 5 Thanked: 156 times in 149 posts]

#553152

I did this as your initial need is “image-&-description-rectangles but link them to different parts of the website”. If you want to be look exactly as the page “All Categories”, it will be more complicated.

Also, I would like to inform that this such customization is out of our support scope. So, if you really need that, you should hire a developer for this work

[Author]

Posts