solved Adding "View All" links beside selected Lucid list module titles.

alt=
Tatiana Dokuchic
@tatiana-dokuchic
8 years ago
83 posts

Using the Lucid skin & Site Builder.

I'm looking for the most elegant way to add "View All" links beside some of my titles for specific list modules i.e. I'm trying to fudge the "View All" links that are standard in the Ningja skin.

I've tried a variety of methods including using an HTML widget in the same container as the Item List widget (the simplest so far) but thought I would see what the experts suggest.

Whatever I use, the background colour will have to be set to match the colour I use for "regular" titles throughout the site.

Thanks

updated by @tatiana-dokuchic: 12/27/16 02:07:33PM
michael
@michael
8 years ago
7,714 posts
The simplest is to add the link to the title, then style it with CSS.

(update site builder to version 1.1.6)

Then add this as the widget title:
Title of your widget <a href="(link to where you want to go)" class="some_class">View More</a>

The best thing would be to create a class and put it in one of the css files in your skin. (if you've cloned the skin) that way you could use one class to style the way it looks and have it effect everywhere.

Otherwise, you can style each one individually, but it would suck to have to go update all of them if you wanted to change the way they look, so a class is better. but if you wanted to not use a CSS class.

Title of your widget <a href="(link to where you want to go)" style="font-size:0.8em;font-weight:normal">View More</a>
alt=
Tatiana Dokuchic
@tatiana-dokuchic
8 years ago
83 posts
Many thanks, Michael!

This is just what I needed. Great to be able to add HTML to the widget title in SB 1.1.6 :)
michael
@michael
8 years ago
7,714 posts
Paul asked for this to be added a while back, so the change was just sitting there. You asking for it triggered its need for release.

Thanks.
alt=
Tatiana Dokuchic
@tatiana-dokuchic
8 years ago
83 posts
Very much appreciated, Michael.
alt=
LesRinchen
@lesrinchen
8 years ago
109 posts
Oh, I've wanted to do this too! This part's a bit beyond my skill level, but I'll figure it out:

michael:
The best thing would be to create a class and put it in one of the css files in your skin. (if you've cloned the skin) that way you could use one class to style the way it looks and have it effect everywhere.

Step by step... Thanks, Michael and Tat!
michael
@michael
8 years ago
7,714 posts
Its not difficult, but with CSS you get a LOT of control that can be daunting at first.

CSS is Cascading Style Sheets which is what makes your site look the way it looks.

They are found at:
/skins/( YOUR SKIN )/css/

You will find many .css files in that directory you could put a new rule in any of them, but probably skin.css or style.css would be the most logical perhaps just because of the name of the file.

If you added a class called 'widget_header_links' that would be a descriptive name to use, you could use anything eg:'galan_gal' but it would be easy to forget the association to what it controls.

so your links would then become:
<a href="(the link location)" class="widget_header_links">View More</a>

Then in your css you define whatever you want that class to look like:
/skins/( YOUR SKIN )/css/site.css
.widget_header_links{
 color: pink;
}

And they would all be pink.
.widget_header_links{
 color: pink;
 font-weight: bold;
}
and they would be pink and bold.

.widget_header_links{
 color: pink;
 font-weight: bold;
 text-align: right;
}
and they would be pink and bold and aligned to the right............

The tool I use to mess around with CSS before writing a line of code is called "Firebug"

You can see it in action here:
Using firebug with the STYLE tab