Tip needed - how do I do a page marker?

Something like this?

http://take.ms/kI9Lz

Cheers / Johny

1 Like

Exactly!!! Could “the wizard” spend some hints for simple mortals? :slight_smile:

@csuhr

Ok here’s a very quick and dirty video tutorial.

http://take.ms/sFhsw

Cheers / Johny

1 Like

Man, YOU ARE FAST! THANX!!!

1 Like

Ha ha… well I said quick and dirty :wink:

1 Like

Another way to do it if you want to use the global navigation:
Add this to the add code in page properties on each page.
Then add the class navbar to the navigation on the pages.
You can edit the color and background color to go with your page.

<style>
.navbar .active {
    color:            #F8F8F8;
    background-color: #4f81bd;
}
</style>
<script>
    $(function(){
        $('a').each(function(){
            if ($(this).prop('href') == window.location.href) {
                $(this).addClass('active'); $(this).parents('li').addClass('active');
            }
        });
    });
</script>
4 Likes

@cincyplanet that’s a slick solution :+1:

1 Like

Thank you!

2 Likes

Wow! I had me dinner and find the problem solved!

Thanks so much guys!!!

3 Likes

Will this work with side menu also?

I haven’t tried it but it should.

Hi @cincyplanet.
Very nice, thanks.
A few intermediate questions.
The 2 .navbar colors apply to what? I assume the color applies to the current page, but is the background-color transparency?
“Then add the class navbar to the navigation on the pages.” Sorry, but I don’t follow.
Do I need to add a class? I hope so, then I can add a gradient.

Hi @Jakerlund
I worked out the hotspots, and with advice from @blocs-user, used browser inspector ( and trial and error) to alter the spot classes, and came to this.


I’m a happy chap now.
Cheers, Andy
http://www.apswoodwork.uk

The first: color would be the text color for the active page,
The Second: background-color is the highlight color for the active page

The other nav items should stay with how you originally have them.

Got it!
So I can ignore (or remove) that line?
Then add the class navbar to the navigation on the pages?

That’s Correct.

Very nice thanks; that’s a keeper.
How can I add a grad background to the current button only, or is that pushing my luck too far?

Havent tried it but try adding:

background: linear-gradient(red, yellow);

Does with flat colour too.

That works, but on the index, it adds grad to logo (.png).

@apswoodwork That’s great Andy.
Congratulations, you finally got it working :+1: