Joomla Templates Club 406,261 posts

[Klaus Ondrich Friend Klaus OndrichJoin date: April 2015Posts: 67Downloads:13Uploads:0 Thanked: 2 times in 1 posts]

#208338

Hi,

I configured an Articles Category module for What’s trending in mast-col using home layout according to your Fubix manual. It looks really great. I know that I could display 6 or 8 or even all articles here (the latter may not be reasonable). It just lacks of a way to link to a list of all other (featured) articles.

So my question is: How would I manage to add an “Show all articles” link e.g. below 6 trending topics that would point to a list of all (featured) articles like a menu entry for featured articles like “index.php?option=com_content&view=featured” does?

Thanks!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#576559

Hi

By default, this ‘What’s trending’ module show the features layout of this Articles Category module, so if you want to customise, you will need to open the file: root/templates/ja_fubix/html/mod_articles_category/features.php

and add the link you want above the declaration of javascript at the end of this file, it looks like this:


<div class="viewall"> <a href="your_link_here">View all </a></div>

<script type="text/javascript">
jQuery(document).ready(function($){
$('#ja-ul-lastnews > li').liveeqboxs();
});
</script>


1 user says Thank You to Saguaros for this useful post

1. imported_kondrich

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#642872

Hi

By default, this ‘What’s trending’ module show the features layout of this Articles Category module, so if you want to customise, you will need to open the file: root/templates/ja_fubix/html/mod_articles_category/features.php

and add the link you want above the declaration of javascript at the end of this file, it looks like this:


<div class="viewall"> <a href="your_link_here">View all </a></div>

<script type="text/javascript">
jQuery(document).ready(function($){
$('#ja-ul-lastnews > li').liveeqboxs();
});
</script>


1 user says Thank You to Saguaros for this useful post

1. imported_kondrich

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#741529

Hi

By default, this ‘What’s trending’ module show the features layout of this Articles Category module, so if you want to customise, you will need to open the file: root/templates/ja_fubix/html/mod_articles_category/features.php

and add the link you want above the declaration of javascript at the end of this file, it looks like this:


<div class="viewall"> <a href="your_link_here">View all </a></div>

<script type="text/javascript">
jQuery(document).ready(function($){
$('#ja-ul-lastnews > li').liveeqboxs();
});
</script>


1 user says Thank You to Saguaros for this useful post

1. imported_kondrich

[Klaus Ondrich Friend Klaus OndrichJoin date: April 2015Posts: 67Downloads:13Uploads:0 Thanked: 2 times in 1 posts]

#576816

Thank you very much for this guide.

Would it be possible to add an option for displaying “Show all” link rather than hacking a file? I posted it in this[/url] “Request & wishlist” forum post.

[Klaus Ondrich Friend Klaus OndrichJoin date: April 2015Posts: 67Downloads:13Uploads:0 Thanked: 2 times in 1 posts]

#643129

Thank you very much for this guide.

Would it be possible to add an option for displaying “Show all” link rather than hacking a file? I posted it in this[/url] “Request & wishlist” forum post.

[Klaus Ondrich Friend Klaus OndrichJoin date: April 2015Posts: 67Downloads:13Uploads:0 Thanked: 2 times in 1 posts]

#741785

Thank you very much for this guide.

Would it be possible to add an option for displaying “Show all” link rather than hacking a file? I posted it in this[/url] “Request & wishlist” forum post.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#576906

You will have to customise this module to have that option.

For that link, if there are more people interested in this feature, the team will add it.

[Klaus Ondrich Friend Klaus OndrichJoin date: April 2015Posts: 67Downloads:13Uploads:0 Thanked: 2 times in 1 posts]

#576989

Sorry for another question:
Where would I have to change what to make the View All (on our site https://test.ulc-moedling.at: Alle Artikel anzeigen) link look like a module header (you defined <div class=”viewall”>)?
I.e. Background = Module Title Background Color, Text color = Module Title Text Color as defined in Thememagic

Ideally the whole block with the text “Alle Artikel anzeigen” would be in module header style.

<update>
I found the solution myself. In /templates/ja_fubix/local/css/themes/myTheme/template.css I added:

div.viewall a {
color: #fff
}
div.viewall a:hover,
div.viewall a:focus,
div.viewall a:active {
color: #111
}
div.viewall {
background: #c33
border-bottom: solid 1px #e5e5e5
color: #fff
font-family: 'novecento_wide_bookbold', Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 20px;
margin: 0;
padding: 15px 20px;
text-transform: uppercase;
text-align: center;
}

Is there anything I could do better to achieve this?
</update>

Cheers

[Klaus Ondrich Friend Klaus OndrichJoin date: April 2015Posts: 67Downloads:13Uploads:0 Thanked: 2 times in 1 posts]

#643296

Sorry for another question:
Where would I have to change what to make the View All (on our site https://test.ulc-moedling.at: Alle Artikel anzeigen) link look like a module header (you defined <div class=”viewall”>)?
I.e. Background = Module Title Background Color, Text color = Module Title Text Color as defined in Thememagic

Ideally the whole block with the text “Alle Artikel anzeigen” would be in module header style.

<update>
I found the solution myself. In /templates/ja_fubix/local/css/themes/myTheme/template.css I added:

div.viewall a {
color: #fff
}
div.viewall a:hover,
div.viewall a:focus,
div.viewall a:active {
color: #111
}
div.viewall {
background: #c33
border-bottom: solid 1px #e5e5e5
color: #fff
font-family: 'novecento_wide_bookbold', Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 20px;
margin: 0;
padding: 15px 20px;
text-transform: uppercase;
text-align: center;
}

Is there anything I could do better to achieve this?
</update>

Cheers

[Klaus Ondrich Friend Klaus OndrichJoin date: April 2015Posts: 67Downloads:13Uploads:0 Thanked: 2 times in 1 posts]

#741950

Sorry for another question:
Where would I have to change what to make the View All (on our site https://test.ulc-moedling.at: Alle Artikel anzeigen) link look like a module header (you defined <div class=”viewall”>)?
I.e. Background = Module Title Background Color, Text color = Module Title Text Color as defined in Thememagic

Ideally the whole block with the text “Alle Artikel anzeigen” would be in module header style.

<update>
I found the solution myself. In /templates/ja_fubix/local/css/themes/myTheme/template.css I added:

div.viewall a {
color: #fff
}
div.viewall a:hover,
div.viewall a:focus,
div.viewall a:active {
color: #111
}
div.viewall {
background: #c33
border-bottom: solid 1px #e5e5e5
color: #fff
font-family: 'novecento_wide_bookbold', Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 20px;
margin: 0;
padding: 15px 20px;
text-transform: uppercase;
text-align: center;
}

Is there anything I could do better to achieve this?
</update>

Cheers

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#577114

You don’t need to add the div there and remember to add semicolon after the color code. For example:


.viewall {
background: #c33;
color: #fff;
/*.....*/
}


[Klaus Ondrich Friend Klaus OndrichJoin date: April 2015Posts: 67Downloads:13Uploads:0 Thanked: 2 times in 1 posts]

#577140

Thank you for the advice concerning div. Semi-colons where already present in my code and in my documentation. They were cut-off by the forum system in the
tag, because the color codes were transformed to URLs – cutting off the semi-colons.
Current code is:
.viewall a {
color: #fff;
}
.viewall a:hover,
.viewall a:focus,
.viewall a:active {
color: #111;
}
.viewall {
background: #c33;
border-bottom: solid 1px #e5e5e5;
color: #fff;
font-family: 'novecento_wide_bookbold', Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 20px;
margin: 0;
padding: 15px 20px;
text-transform: uppercase;
text-align: center;
}

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#577263

You can use inspect element and see that above style is not applied on your site. Kindly check again.

[Klaus Ondrich Friend Klaus OndrichJoin date: April 2015Posts: 67Downloads:13Uploads:0 Thanked: 2 times in 1 posts]

#577325

Because you checked our test site rather than the production site. I did not mention that I did those changes just on production site https://www.ulc-moedling.at.

[Author]

Posts