Joomla Templates Club 406,261 posts

[aryentain99 Friend aryentain99Join date: September 2013Posts: 82Downloads:1Uploads:26 Thanks: 35 Thanked: 4 times in 1 posts]

#197619

Hi guys, i would like to set up the k2 tools module style for the category list with the same style like the archive option (with that cool movement effect), it’s the same module, but if i select the category option, the style it’s totally different, flat and boring, i would like to change the style like the archive, how could achive that? Thanks!

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

#534617

It would be great if you can include an illustrated screenshot of what you are trying to achieve, I will give you suggestion then.

1 user says Thank You to Ninja Lead for this useful post

1. aryentain99

[aryentain99 Friend aryentain99Join date: September 2013Posts: 82Downloads:1Uploads:26 Thanks: 35 Thanked: 4 times in 1 posts]

#534786

Sure, take a look:

the left options is the k2 tools with the option “category” and the option in the right is the k2 tools with the option “archive”, same module!

---

Attachments:

1. 

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

#534813

Hope the tweak below will help to solve the issue.

Open templates/ja_mitius/css/custom.css file and add these rules:


ul.categories-module li a {
background: url(../images/bullet.png) no-repeat 5px center;
color: #666;
display: block;
padding: 5px 0 5px 17px;
transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
ul.categories-module li a:hover {
background: url(../images/bullet-hover.png) no-repeat 5px 11px;
color: #f76000;
margin-left: 10px;
text-shadow: 1px 1px 0 #fff;
}

ul.categories-module li {
border-bottom: 1px solid #f2f2f2;
padding: 0;
}

ul.categories-module {
margin: 0;
padding: 0;
list-style: none;
}


[aryentain99 Friend aryentain99Join date: September 2013Posts: 82Downloads:1Uploads:26 Thanks: 35 Thanked: 4 times in 1 posts]

#534856

Thank you very much for your reply. i’ve changed that file but it doesn’t seem to work, check it out here:
http://www.arquespalacio.com.ar/saracatu/index.php/explora/preguntas-star-wars

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

#535027

You can try again with this.

Open templates/ja_mitius/css/custom.css file and add these rules:


div.k2CategoriesListBlock ul {
list-style: none;
}
div.k2CategoriesListBlock ul li {
border-bottom: 1px solid #f2f2f2 ;
padding: 0;
}

div.k2CategoriesListBlock ul li:last-child {
border: 0;
}
div.k2CategoriesListBlock ul li a {
background: url(../images/bullet.png) no-repeat 5px center;
color: #666 ;
display: block;
padding: 5px 0 5px 17px;
transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
div.k2CategoriesListBlock ul li a:hover {
background: url(../images/bullet-hover.png) no-repeat 5px 11px;
color: #f76000 ;
margin-left: 10px;
text-shadow: 1px 1px 0 #fff ;
}

1 user says Thank You to Ninja Lead for this useful post

1. aryentain99

[aryentain99 Friend aryentain99Join date: September 2013Posts: 82Downloads:1Uploads:26 Thanks: 35 Thanked: 4 times in 1 posts]

#535137

Excellent! That made the trick! It looks very stiylish! Many thanks!:cool:

[aryentain99 Friend aryentain99Join date: September 2013Posts: 82Downloads:1Uploads:26 Thanks: 35 Thanked: 4 times in 1 posts]

#535165

And sorry for being repetitive, but how about applying this to the menu module?

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

#535255

<em>@aryentain99 427279 wrote:</em><blockquote>And sorry for being repetitive, but how about applying this to the menu module?</blockquote>

You can try to apply rules below to the menu module:


.t3-module ul.nav li a {
background: url(../images/bullet.png) no-repeat 5px center;
color: #666 ;
display: block;
padding: 5px 0 5px 17px;
transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.t3-module ul.nav li a:hover {
background: url(../images/bullet-hover.png) no-repeat 5px 11px;
color: #f76000 ;
margin-left: 10px;
text-shadow: 1px 1px 0 #fff ;
}

.t3-module ul.nav li {
border-bottom: 1px solid #f2f2f2 ;
padding: 0;
}

.t3-module ul.nav {
margin: 0;
padding: 0;
list-style: none;
}


1 user says Thank You to Ninja Lead for this useful post

1. aryentain99

[aryentain99 Friend aryentain99Join date: September 2013Posts: 82Downloads:1Uploads:26 Thanks: 35 Thanked: 4 times in 1 posts]

#535307

Many thanks for your great support. Everything looks great. Hope this tread and your modifications helps others.

[aryentain99 Friend aryentain99Join date: September 2013Posts: 82Downloads:1Uploads:26 Thanks: 35 Thanked: 4 times in 1 posts]

#544275

Hi guys, i’m coming back to this thread since this style seems to have been applied to other modules / modules positions. See, i have this menu module in the footermenu with the ” top-menu” class suffix (just like the demo) and the result is this with the moving text and bullet:

and for the mast-col position i have the jomsocial menu published there with the same moving text and bullet (you must be registred to see it online but you have here a screenshot):

as always you could check them here . Thanks for any adivice!

---

Attachments:

1. 
2. 

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

#544385

I see the css conflict in custom.css file, please open templates/ja_mitius/css/custom.css file, find and remove script below

ul.categories-module li a {
background: url(../images/bullet.png) no-repeat 5px center;
color: #666 ;
display: block;
padding: 5px 0 5px 17px;
transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
ul.categories-module li a:hover {
background: url(../images/bullet-hover.png) no-repeat 5px 11px;
color: #f76000 ;
margin-left: 10px;
text-shadow: 1px 1px 0 #fff ;
}

ul.categories-module li {
border-bottom: 1px solid #f2f2f2 ;
padding: 0;
}

ul.categories-module {
margin: 0;
padding: 0;
list-style: none;
}

.t3-module ul.nav li a {
background: url(../images/bullet.png) no-repeat 5px center;
color: #666 ;
display: block;
padding: 5px 0 5px 17px;
transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}

.t3-module ul.nav li a:hover {
background: url(../images/bullet-hover.png) no-repeat 5px 11px;
color: #f76000 ; margin-left: 10px;
text-shadow: 1px 1px 0 #fff ;
}

.t3-module ul.nav li {
border-bottom: 0px solid #f2f2f2 ;
padding: 0;
}

.t3-module ul.nav {
margin: 0;
padding: 0;
list-style: none;
}


Let me know if it helps

[aryentain99 Friend aryentain99Join date: September 2013Posts: 82Downloads:1Uploads:26 Thanks: 35 Thanked: 4 times in 1 posts]

#544443

Thanks for your reply. Maybe i’m doing something wrong or i didn’t undestand, but what do i need to replace? i changed the custom.css with your source but no effect.

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

#544556

<em>@aryentain99 439420 wrote:</em><blockquote>Thanks for your reply. Maybe i’m doing something wrong or i didn’t undestand, but what do i need to replace? i changed the custom.css with your source but no effect.</blockquote>

I have checked the URL included on thread but I could not see the problem of you mentioned. Which area are you referring to on your site? Things at least look to be running smoothly from what I can see.

Please pm me URL of your site, admin login back-end site and ftp account. I will help you out.

[aryentain99 Friend aryentain99Join date: September 2013Posts: 82Downloads:1Uploads:26 Thanks: 35 Thanked: 4 times in 1 posts]

#544692

Thanks, requested information sent via pm. You may see the styling problem http://www.arquespalacio.com.ar/saracatu/index.php/forum/7-trilogia-original once you get logged with the provided credentials and see both problems, the mast-col position problem doesn’t require to be logged in.

[Author]

Posts