Joomla Templates Club 406,261 posts

[bvk1987 Friend bvk1987Join date: October 2012Posts: 187Downloads:10Uploads:31 Thanks: 66 Thanked: 6 times in 1 posts]

#198484

Hi,

I am working on this brandnew template, which I really like, and now I am a bit stuck in the “department” module on the homepage. I would like to have 3 column displayed.

When I go to tab “Advanced” and change “alternative layout” to anything different than the standard “five-columns”, the module will not appear on the website.

Thanks in advance for the help!

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#537874

Hi,

In this case, you can use default 5 columns layout and add these CSS declarations to root_foldertemplatesja_medicarecsscustom.css (just create a new one if you don’t have) :

.category-module.five-columns .category-module-item {
width: 33.3%;
border-top: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.category-module.five-columns .category-module-item:nth-child(3n+3) {
border-right: none;
}

Save your file and recheck.

[bvk1987 Friend bvk1987Join date: October 2012Posts: 187Downloads:10Uploads:31 Thanks: 66 Thanked: 6 times in 1 posts]

#537946

There is no other solution other than making a custom.css file? Nothing that can be changed in the current files?

[MoonSailor Friend MoonSailorJoin date: November 2011Posts: 1106Downloads:0Uploads:245 Thanks: 89 Thanked: 248 times in 223 posts]

#537993

@bvk1987: Please try this tweak.
First, still create a new file “custom.css” into folder “templates/ja_medicare/css” (if it does not exist) and add this css rule:


.category-module.five-columns .category-module-item{
width : 33.33%;
}

Then, open the file “templates/ja_medicare/html/mod_articles_category/five-columns.php”, find


<?php if($count > 5): echo "border-top"; endif; ?> <?php if($count % 5 != 0): echo "border-right"; endif; ?>


then change it to:


<?php if($count > 3): echo "border-top"; endif; ?> <?php if($count % 3 != 0): echo "border-right"; endif; ?>


1 user says Thank You to MoonSailor for this useful post

1. bvk1987

[GTR Webdesign Friend GTR WebdesignJoin date: August 2014Posts: 45Downloads:26Uploads:5 Thanks: 6 Thanked: 13 times in 5 posts]

#549945

Hello support team, can you please give me the code for four (4) columns?

[bvk1987 Friend bvk1987Join date: October 2012Posts: 187Downloads:10Uploads:31 Thanks: 66 Thanked: 6 times in 1 posts]

#549947

Go to template.css line 2493 and change width to 25% instead of 20%. Save and refresh!

[GTR Webdesign Friend GTR WebdesignJoin date: August 2014Posts: 45Downloads:26Uploads:5 Thanks: 6 Thanked: 13 times in 5 posts]

#549949

Thanks for your reply, @bvk1987 … but this only works for the big screen resolutions.
When you look at it on a phone, it stil displays 4 rows (much to small), but this needs to change in 2 x 2 rows.

[bvk1987 Friend bvk1987Join date: October 2012Posts: 187Downloads:10Uploads:31 Thanks: 66 Thanked: 6 times in 1 posts]

#549956

My website displays 2×2 with the fix I told you about. This is on a Sony Xperia Z though, I have no idea about other phones.

Your company website looks very professional btw!

[GTR Webdesign Friend GTR WebdesignJoin date: August 2014Posts: 45Downloads:26Uploads:5 Thanks: 6 Thanked: 13 times in 5 posts]

#549958

Thanx for the compliment 🙂

When I go to the template.css line 2493 it doesn’t show 20%
So I coded “.category-module.five-columns .category-module-item{width : 25%;}” into my custom.css … but this is also not working.

[bvk1987 Friend bvk1987Join date: October 2012Posts: 187Downloads:10Uploads:31 Thanks: 66 Thanked: 6 times in 1 posts]

#549961

How about line 2481? Check for the information below:
@media (min-width: 768px)
.category-module.five-columns .category-module-item {
border: none;
width: 25%;
min-height: 200px;
padding-top: 50px;
padding-bottom: 0;

1 user says Thank You to bvk1987 for this useful post

1. Ninja Lead

[GTR Webdesign Friend GTR WebdesignJoin date: August 2014Posts: 45Downloads:26Uploads:5 Thanks: 6 Thanked: 13 times in 5 posts]

#550044

Thanks for the reply @bvk1987,

I’ve already solved the problem by copying all the five-columns code into the custom.css and altering it to 25%.

[Author]

Posts