Jump to content
TNG Community
OttawaBullock

Item Groupingsin left menu

Recommended Posts

OttawaBullock

Hi,

I'm using TNG version 11.1 with template 4. I've been attempting to break the items in the left menu into groups with headings for each group.

Attempt #1. I added one line to  the existing coding in the topmenu.

echo '<div style="font-size:1.25em;color:yellow;text-align:left;">ALBUMS</div>';

    echo "<li><a href=\"{$cms['tngpath']}calendar.php\" class=\"lightlink\">{$text['calendar']}</a></li>\n";

I  get the following result:

LeftMenuIncompleteAlign.jpeg

Attempt #2. Using coding  similar to a few other sites which have done this.

<p align="left"><b>MEDIA</b></p>

            <ul>                
                <li><a href="browsemedia.php" class="lightlink">All Media</a></li>
                <li><a href="browsemedia.php?mediatypeID=documents" class="lightlink">Documents</a></li>

                <li><a href="browsemedia.php?mediatypeID=headstones" class="lightlink">Headstones</a></li>
                <li><a href="browsemedia.php?mediatypeID=histories" class="lightlink">Histories</a></li>
                <li><a href="browsemedia.php?mediatypeID=photos" class="lightlink">Photos</a></li></ul>

LeftMenuLossOfBullets.jpeg

I  get the following result:

The first attempt does not allow me to get the group headings to align with the bullets. The second aligns the title headings as I hoped for but the solid bullets become small circles.

I'd  appreciate any suggestions to overcome this problem. At the moment, I am doing all this on MAMPS on my computer.

Thanks,

Bob

 

Share this post


Link to post
Share on other sites
Philip Roy

Every group (list) of bullets needs to begin with 

<ul>

And end with 

</ul>

Looking at attempt 2, they are being displayed as indented bullets...which tells me that you’ve not used the UL tags correctly in a list that you have before them. So just go through and make sure that each group of bullets start with and end with the UL tag.

Phil

Share this post


Link to post
Share on other sites
Philip Roy

Or...(sorry, this just popped into my head) it may in fact be the UL tags that you have put there in Attempt 2 that are causing the issue....so try removing them first. This would be because the whole menu structure is a list, and adding more UL tags would indent them more. So it's either adding the UL tags or removing them...and I suspect as a first try on attempt 2, try taking out the UL tags. If that doesn't work, go back to my first post.

Phil

Share this post


Link to post
Share on other sites
OttawaBullock

Hi Phil,

Thanks for the suggestions.

When I remove the <ul> </ul> from attempt 2, I get the same formatting as in attempt #1.

When I add, the <ul> </ul> to attempt one, I get a blank screen.

Bob

Share this post


Link to post
Share on other sites
OttawaBullock

Hi,

All of the code related to the menu items include: class=lightlink. This may be what is controlling the form of the link. With my limited understanding of code, I'm not sure what code=lightlink means. Would appreciate it if someone could enlighten me.

Thanks,

Bob

Share this post


Link to post
Share on other sites
OttawaBullock

My last message should have read:

Hi,

All of the code related to the menu items include: class=lightlink. This may be what is controlling the form of the link. With my limited understanding of code, I'm not sure what class=lightlink means. Would appreciate it if someone could enlighten me.

Thanks,

Bob

Share this post


Link to post
Share on other sites
tngrlkrz
18 minutes ago, OttawaBullock said:

what class=lightlink means.

I believe it has to do with highlighting the current or active tab.  Something of that nature.

Example from css files:

/* For links on dark background */
.lightlink:link, .lightlink:visited {
    color: #FFFFFF;
    text-decoration: none;
}

.lightlink:hover, .lightlink:active {
    color: #FFCC33;
    text-decoration: none;

Share this post


Link to post
Share on other sites
Philip Roy

Hi,

I had a go on my local version with Template 4.

On 10/9/2020 at 7:09 AM, OttawaBullock said:

echo '<div style="font-size:1.25em;color:yellow;text-align:left;">ALBUMS</div>';

I just moved the heading left with margin-left CSS and that seemed to work...

echo '<div style="font-size:1.25em;color:yellow;text-align:left;margin-left:-20px;">ALBUMS</div>';

And...

11 hours ago, OttawaBullock said:

When I remove the <ul> </ul> from attempt 2, I get the same formatting as in attempt #1.

OK....then that's the answer there isn't it? That's what you want? Combine that with my CSS fix and I think you are ok?

Phil

Share this post


Link to post
Share on other sites
OttawaBullock

Hi Phil,

Thanks for the solution. Works perfectly. I used -10px. The result:

LeftMarginSolved.jpeg

 

I was also able to solve it using attempt #2 by adding the following to the <ul code:

<ul style=list-style-type:disc;color:white;>               

Thanks for your help Phil.

Bob

Share this post


Link to post
Share on other sites
OttawaBullock

Hi Ron.

Thank you for the information about class=lightlink.

Bob

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×