Joomla Extensions Club 20,483 posts

[thmelissourgos Friend thmelissourgosJoin date: January 2014Posts: 14Downloads:0Uploads:0 Thanks: 3]

#200544

Hello,
I have a website named hearthmeta.com and I use the JA K2 Search Module in the CARDS –> GALLERY section. I have a filter named abilities which is made with magic box, to give the user the chance to select multiple items (it’s the only way I could think of, to give users that option, without expanded yes/no radio buttons). The problem is that I have 39 options in there which can not be separated and it’s way longer than I’d like it to be when expanded. I was wondering if there is a way to add a scroll bar in there to made it prettier and more functional.
Thank you

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#546148

Just a thought . . . .

In looking at the “Abilities” list, it doesn’t seem like there’s too many to where the scrolling to see the bottom of the list is annoying or anything. In fact – if you were to have a scroll box for the list – wouldn’t one need to scroll to see the list anyway? After all, you have other pages with various “lists” (e.g. Achievements) which require some scrolling down the page as well.

Personally, I prefer to see as much of the list as possible (as it appears now) …. and if I need to scroll down a little bit to see more of the list, that’s not a big deal – to me, anyway.

[thmelissourgos Friend thmelissourgosJoin date: January 2014Posts: 14Downloads:0Uploads:0 Thanks: 3]

#546171

Thank you for your reply.
Are you sure you saw the right thing? It’s easy to confuse it with the Cards –> Abilities page. This is not what I’m talking about. I was referring to the filter named abilities. It’s located in Cards –> Gallery next to some of the other filters. I just want to make sure we are in the same page about it before we say more.
Thanks again

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#546173

Okay, I got it 😉 . . . . Here’s what you can do . . .

Within file path —> /modules/mod_jak2filter/assets/css/style.css
at line 213, modify as follows:


.ja-k2filter .ja-magic-select ul {
height: 300px;
margin: 0;
overflow: scroll;
}

You can, of course, modify the “height” property to whatever value you like best.

Is that along the lines of what you were wanting to achieve?

1 user says Thank You to TomC for this useful post

1. thmelissourgos

[thmelissourgos Friend thmelissourgosJoin date: January 2014Posts: 14Downloads:0Uploads:0 Thanks: 3]

#546183

Many thanks Tom. That was exactly what I was looking for.
Since you seem to know about the css of these filters I’d like to ask you another question about the same page we did the scroll modification. At the bottom you can see the pagination of the cards. It’s a very bad pagination in my opinion and I’m not sure why my template’s pagination is not used (you can see what it looks like here). Do you have any idea how to fix that? Is it a simple override issue or do I have to find the css piece of code from my template and use in manually on the css of the filters module?
Thank you

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#546184

<em>@thmelissourgos 441550 wrote:</em><blockquote>Many thanks Tom. That was exactly what I was looking for.[/quote]

Very happy to have been able to help out. 🙂

<em>@thmelissourgos 441550 wrote:</em><blockquote>Since you seem to know about the css of these filters I’d like to ask you another question about the same page we did the scroll modification. At the bottom you can see the pagination of the cards. It’s a very bad pagination in my opinion and I’m not sure why my template’s pagination is not used (you can see what it looks like here). Do you have any idea how to fix that? Is it a simple override issue or do I have to find the css piece of code from my template and use in manually on the css of the filters module?
Thank you</blockquote>

Just so I’m clear – you’re referring to the display/listing of the card images?

[thmelissourgos Friend thmelissourgosJoin date: January 2014Posts: 14Downloads:0Uploads:0 Thanks: 3]

#546189

No I’m referring to the pagination below the card list. The numbers that show the pages and the arrows to navigate through them.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#546191

The difference stems from those two being two different content elements.

The pagination you like is styled via —> /templates/yoo_drive/warp/css/system.css
(starting at line 47)


#system .pagination a, #system .pagination strong {
border-radius: 2px;
}
#system .pagination a {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
}
#system .pagination a:hover {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.2);
}
#system .pagination strong {
font-weight: bold;
}
#system .pagination a, #system .pagination strong, #system .pagination a.previous, #system .pagination a.next {
font-size: 15px;
line-height: 24px;
}

and continuing starting at around line 86 or so . . . .


#system .pagination {
margin-top: 10px;
text-align: center;
}
#system .pagination a {
text-decoration: none;
}
#system .pagination strong {
font-weight: normal;
}
#system .pagination a, #system .pagination strong {
display: inline-block;
height: 25px;
line-height: 25px;
margin-left: 5px;
min-width: 15px;
padding: 0 5px;
}
#system .pagination > *:first-child {
margin-left: 0;
}
#system .pagination a.previous, #system .pagination a.next {
font-size: 16px;
line-height: 23px;
}

While the “Gallery” pagination is styled via –> /templates/yoo_drive/css/k2.css
(starting at line 117)


div.k2Pagination {
color: #999
margin: 24px 0 4px;
padding: 8px;
text-align: center;
}
div.k2Pagination ul {
text-align: center;
}
div.k2Pagination ul li {
display: inline;
}

You can see the differences in the CSS rules above.

So, if you want to get a similar display between pages, it’s going to take a little time, patience and trial and error.

To try to help you out, I’ve found the following resources which may be of assistance . . . .

http://cssdeck.com/labs/css-pagination-styles

http://brajeshwar.github.io/paginate/

http://www.designrazzi.net/45-free-css3-jquery-pagination-plugins.html

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#546192

By The Way . . . .

A VERY helpful and useful tool to use when working on something like this – especially when experimenting with/testing out various CSS modifications – is an online web development tool such as

[thmelissourgos Friend thmelissourgosJoin date: January 2014Posts: 14Downloads:0Uploads:0 Thanks: 3]

#546214

Thanks again for the time spent on my issue. I’m aware of firebug and I was going to use it, but I thought to ask in the forum first. I was hoping it was a simple override issue like I could select the css style I want from the joomla backend or even do a more difficult override by pointing manually to the template css. For example, how can I tell my website to get the pagination info from the system.css rather than the k2.css?

[thmelissourgos Friend thmelissourgosJoin date: January 2014Posts: 14Downloads:0Uploads:0 Thanks: 3]

#546228

<em>@TomC 441562 wrote:</em><blockquote>The pagination you like is styled via —> /templates/yoo_drive/warp/css/system.css
(starting at line 47)</blockquote>

This is in system-all.css but ok, same difference 🙂

I finished it.
Thanks again

[Author]

Posts