adding another level to bottom tab (followme2) skin

@boplive
10 months ago
345 posts

Good afternoon

I 'm trying to figure out how to add another level to the bottom tabs file I'm using the Followme2 skin

So, I'm just trying to make it as 2 icons on top (instead of the 5 that it has) and below the other 2 icons
so below you see the code which i was messing around with
which has to do with table, rows and cells

so, the top table I have only the HOME PAGE and the MENU ICON
and for the second table I may just use the NOTIFICATIONS and MENTIONS

from what i been trying below, and another format I tried , but it is throwing the top icons to the right-hand side

hope I made sense and explained it well.

Thanks
Ed

updated by @boplive: 05/13/24 05:09:09PM

@michael
10 months ago
7,715 posts

looks like the code got stripped could you put it inside a code block. check the BBCode Help button for how.

@boplive
10 months ago
345 posts

[div class="bottom_tab"]
[div class="table"]

[div class="table-row"]
[div class="table-cell"]
{jrCore_icon icon="clock" size="24" color="6482B4"}
[/div]
[div class="table-cell" id="menu_button"]
{jrCore_icon icon="menu" size="24" color="6482B4"}
[/div]
[/div]

*********start of new row between the "div class table"*********

[div class="table-row"]
[div class="table-cell"]

{jrCore_icon icon="notifications" size="24" color="6482B4"}
[span class="count feedback_count"]0[/span]

[/div]
[div class="table-cell"]

{jrCore_icon icon="mention" size="24" color="6482B4"}
[span class="count mentions_count"]0[/span]

[/div]

[/div]
[/div]

[/div]

@douglas
10 months ago
2,790 posts

I would say it is because the height for that section is set to 40px in the skin.css file. If you want to add another row, you may have to change the height too.

Hope this helps

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@boplive
10 months ago
345 posts

yup I did do that ..I actually double the height to test it out but the itmes still ended up to the side..

So here's below
So using the other table format it would work and there won't be things off to the side example the simple table format below
but with the
[div class="table"]
[div class="table-row"]
[div class="table-cell"]

This below works perfectly but it is not responsive...

[table width="95%" cellpadding="2" cellspacing="2" align="center"]
[tr]
[td align="center"]
Something here
[/td]
[td align="center"]
Something here
[/td]
[/tr]
second level starts below
[tr]
[td align="center"]
Something here
[/td]
[td align="center"]
Something here
[/td]
[/tr]

[/table]

@douglas
10 months ago
2,790 posts

Without seeing the actual code it is going to be difficult to tell what is going on.

Can you share the URL or post the code for the template in between the BBCode code tags so we see something like this:

<div class="bottom_tab">
    <div class="table">
        <div class="table-row">
            {if $page_template == "index"}
                {$tactive = "active"}
            {/if}
            <div class="table-cell {$tactive}">
                <a href="{$jamroom_url}">{jrCore_icon icon="clock" size="24" color="6482B4"}</a>
            </div>
            {if $_post.profile_actions == 'feedback'}
                {$eactive = "active"}
            {/if}
            <div class="table-cell {$eactive}">
                {jrCore_module_url module="jrAction" assign="tUrl"}
                <a href="{$jamroom_url}/{jrUser_home_profile_key key="profile_url"}/{$tUrl}/feedback" title="{jrCore_lang skin="jrFollowMe2" id=149 default="Feedback"}">
                    {jrCore_icon icon="notifications" size="24" color="6482B4"}
                    <span class="count feedback_count">0</span>
                </a>
            </div>
            {if $_post.profile_actions == 'mentions'}
                {$mactive = "active"}
            {/if}
            <div class="table-cell {$mactive}">
                <a href="{$jamroom_url}/{jrUser_home_profile_key key="profile_url"}/{$tUrl}/mentions" title="{jrCore_lang skin="jrFollowMe2" id=19 default="Mentions"}">
                    {jrCore_icon icon="mention" size="24" color="6482B4"}
                    <span class="count mentions_count">0</span>
                </a>
            </div>

            {if $_post.option == "follow"}
                {$factive = "active"}
            {/if}
            <div class="table-cell {$factive}">
                <a href="{$jamroom_url}/{jrUser_home_profile_key key="profile_url"}/{jrCore_module_url module="jrFollower"}" title="{jrCore_lang skin="jrFollowMe2" id=18 default="Followers"}">
                    {jrCore_icon icon="followers" size="24" color="6482B4"}
                    <span class="count followers_count">0</span>
                </a>
            </div>
            <div class="table-cell" id="menu_button">
                <a href="#">
                    {jrCore_icon icon="menu" size="24" color="6482B4"}
                </a>
            </div>
        </div>
    </div>
</div>

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@boplive
10 months ago
345 posts

douglas:
Without seeing the actual code it is going to be difficult to tell what is going on.

Can you share the URL or post the code for the template in between the BBCode code tags so we see something like this:

so i use your quote below
let me see if it shows, so there is 2 table rows instead
of one

<div class="bottom_tab">
    <div class="table">
        <div class="table-row">
            {if $page_template == "index"}
                {$tactive = "active"}
            {/if}
            <div class="table-cell {$tactive}">
                <a href="{$jamroom_url}">{jrCore_icon icon="clock" size="24" color="6482B4"}</a>
            </div>
            <div class="table-cell" id="menu_button">
                <a href="#">
                    {jrCore_icon icon="menu" size="24" color="6482B4"}
                </a>
            </div>
        </div>
       
       <div class="table-row">
           {if $_post.profile_actions == 'feedback'}
                {$eactive = "active"}
            {/if}
            <div class="table-cell {$eactive}">
                {jrCore_module_url module="jrAction" assign="tUrl"}
                <a href="{$jamroom_url}/{jrUser_home_profile_key key="profile_url"}/{$tUrl}/feedback" title="{jrCore_lang skin="jrFollowMe2" id=149 default="Feedback"}">
                    {jrCore_icon icon="notifications" size="24" color="6482B4"}
                    <span class="count feedback_count">0</span>
                </a>
            </div>
            {if $_post.profile_actions == 'mentions'}
                {$mactive = "active"}
            {/if}
            <div class="table-cell {$mactive}">
                <a href="{$jamroom_url}/{jrUser_home_profile_key key="profile_url"}/{$tUrl}/mentions" title="{jrCore_lang skin="jrFollowMe2" id=19 default="Mentions"}">
                    {jrCore_icon icon="mention" size="24" color="6482B4"}
                    <span class="count mentions_count">0</span>
                </a>
            </div>
       </div>
    </div>
</div>

updated by @boplive: 02/09/24 11:29:48AM

@douglas
10 months ago
2,790 posts

This is what I see.

Which by the code posted, it is correct.

How are you wanting it to look?

Thanks!

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@boplive
10 months ago
345 posts

just like that...the way yours look...hmmmmmmmmmmmm....let me recheckk again at my end to make sure nothing else isn't causing the first level to shift to the side..Ill take another look tonight Douglass appreciate the time and will write back tomorrow ...it will give me a chance with fresh eyes at my end..lol

@douglas
9 months ago
2,790 posts

What mobile device are you using?

It may look different on other devices.

The image I posted was a screenshot from a Samsung Galaxy S20.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@boplive
9 months ago
345 posts

I'm using Samsung note 10

So funny thing I just went back and uploaded a clean file of the bottom_tabs.tpl and kept it with the [5]icons the (original setup)

Then I added the second table row beneath the first level and left it with just [2] icons.

So nothing from the top row was out of placed

The second row [2 icons]..everything was to the left

So I experimented a bit with the top level.
I started by taking out 1 icon, then 2 icon, then 3 icons..nothing moved or shift or was out of place like it did before I had ask for assistance. Maybe I had a dot or letter or something I didn't realize was still with the code somewhere...(may help if I commit myself to getting glasses 🤓)

So either way the results was everything of the second row (the 2 icons) stays to the left
Regardless if the first row had 3 4 or 5 icons

Now i also tried to add a word "home" next to one of the icons in the second row (which has only 2 icon)...surprisingly by adding that one word "home" next to the second row icon it affected the first row and everything shifted all over

So long story short adding a word or anything else to the second row will affect the first row level..which I found that strange..I would think they both will work off each other separately

updated by @boplive: 02/10/24 08:26:25PM

@boplive
9 months ago
345 posts

Ok so continuing to experiment..
I stood with [3] icons on the top row and for the bottom row; I just kept it with (2] icons like what I provided before Douglass and you tested it out at your end.

The bottom row shifted to the left.
I tried to add the following "table cell" as per below to the bottom row in front of the [2] icons with nothing inside and both icons was now centered and no longer in left side it shifted to the middle

  <div class="table-cell">
     0 empty in this cell                        
   </div>

I'll provide a few screen shots in a few hours from now

adding another level to bottom tab (followme2) skin

Tags