[DEV] Sidebar Menu

A place for Extension Authors to post and receive feedback on Extensions still in development. No Extensions within this forum should be used within a live environment!
Ideas Centre
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

IMPORTANT: Extensions Development rules

IMPORTANT FOR NEEDED EVENTS!!!
If you need an event for your extension please read this for the steps to follow to request the event(s)
User avatar
RomaamoR
Registered User
Posts: 150
Joined: Tue Feb 24, 2015 4:45 pm
Contact:

Re: [BETA] Sidebar Menu

Post by RomaamoR » Tue Apr 24, 2018 6:34 am

So ?

Code: Select all

/*  phpBB3 Style Sheet Prosilver
    --------------------------------------------------------------
	Extention name:     Sidebar Menu
	Original author:    phpBB Limited ( https://www.phpbb.com/ )
	Modified by:        Martin ( http://www.martins-phpbb.com/ )
	Modified by:        Sniper_E ( http://sniper-e.com/ )
    --------------------------------------------------------------
*/

/* Hide nav main */
.nav-main, .phpbb-navbar {
	display: none !important;
}

.nav-breadcrumbs {
	border-top: none !important;
}

.headerbar {
	border-radius: 7px;
	margin-bottom: 4px;
}

/* Sidebars */
div.spacer {
	margin-top: 16px;
}

.sidebarwrap3 {
	max-width: 1300px;
	padding: 0;
	margin: 0 auto;
}

.sidebarwrap1, .sidebarwrap2 {
	max-width: 1200px;
	padding: 0;
	margin: 0 auto;
}

.sidebarwrapper {
    position: relative;
}

.side-avatar img {
	height: 26px;
	width: 26px;
	margin: -10px 0 -5px;
}

/* left sidebar, right section */
.fixedfluid-content {
    padding: 0 0 0 200px;
}

/* left sidebar */
.fixedfluid-sidebar, .fixedfluidfixed-left {
    position: absolute;
    left: 10px;
    top: 0;
    width: 200px;
    bottom: 0;
    padding: 0;
}

/* right sidebar, left section */
.fluidfixed-content {
    padding-right: 175px;
}

/* right sidebar */
.fluidfixed-sidebar, .fixedfluidfixed-right {
    position: absolute;
    right: -15px;
    top: 0;
    width: 190px;
    bottom: 0;
    padding: 0;
}

/* Both sidebars, middle section */
.fixedfluidfixed-content {
    padding: 0 200px 0 200px;
}

.sidebar_avatar {
	height: 15px;
}

/* Sidebar Styling */
.ad1, .ad2 {
    display: block;
    float: left;
}

.ad1 {
    margin: 0 10px 10px 0; 
}

.fixedfluid-sidebar ul.sidebar li, .fluidfixed-sidebar ul.sidebar li, .fixedfluidfixed-left ul.sidebar li, .fixedfluidfixed-right ul.sidebar li {
    padding: 5px 10px; 
}

/* Sidebar UCP */
.sidebar-link ul.side-navlinks {
    display: none;
}

.left-sidebar .sidebar-link:hover  ul.side-navlinks {
    display: block;
	position: absolute;
	white-space: nowrap;
	margin-top: -26px;
	margin-bottom: 16px;
	left: 170px;
	transition: all 0.9s ease-in-out 0s;
	z-index: 999;
}

.right-sidebar .sidebar-link:hover  ul.side-navlinks {
    display: block;
	position: absolute;
	white-space: nowrap;
	margin-top: -26px;
	margin-bottom: 16px;
	right: 170px;
	transition: all 0.9s ease-in-out 0s;
	z-index: 999;
}

/* Sidebar colaspse/move buttons */
.side-colaspse-button, .side-expand-button { width: 16px;height:16px;float: right; }
.side-left-button, .side-right-button, .side-up-button, .side-down-button { width: 11px;height:11px;float: right;margin-right: 5px; }
.side-colaspse-button { background-image: url("./images/icon_colaspse.gif"); }
.side-expand-button   { background-image: url("./images/icon_expand.gif"); }
.side-left-button     { background-image: url("./images/icon_left_arrow.gif"); }
.side-right-button    { background-image: url("./images/icon_right_arrow.gif"); }
.side-up-button       { background-image: url("./images/icon_up_arrow.gif"); }
.side-down-button     { background-image: url("./images/icon_down_arrow.gif"); }

@media only screen and (max-width: 1300px), only screen and (max-device-width: 1300px) {
	.nav-main, .phpbb-navbar {
		display: block !important;
	}

	.nav-breadcrumbs {
		border-top: 1px solid #FFFFFF !important;
	}

	.headerbar {
		border-radius: 7px 7px 0 0;
		margin-bottom: -1px;
	}

	.sidebarwrap {
		max-width: 1000px !important;
		padding: 0;
	}

	.fixedfluid-content {
		padding: 0;
	}

	.fixedfluid-sidebar, .fixedfluidfixed-left {
		display: none;
		width: 0;
	}
	
	/* right sidebar, left section */
	.fluidfixed-content {
		padding-right: 0;
	}
	
	/* right sidebar */
	.fluidfixed-sidebar, .fixedfluidfixed-right {
		display: none;
		width: 0;
	}
	
	/* Both sidebars, middle section */
	.fixedfluidfixed-content {
		padding: 0;
	}
}

User avatar
Sniper_E
Registered User
Posts: 730
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: [BETA] Sidebar Menu

Post by Sniper_E » Tue Apr 24, 2018 7:05 am

No, more like this:

Code: Select all

/*  phpBB3 Style Sheet Prosilver
    --------------------------------------------------------------
	Extention name:     Sidebar Menu
	Original author:    phpBB Limited ( https://www.phpbb.com/ )
	Modified by:        Martin ( http://www.martins-phpbb.com/ )
	Modified by:        Sniper_E ( http://sniper-e.com/ )
    --------------------------------------------------------------
*/

/* Hide nav main */
.nav-main, .phpbb-navbar {
	display: none !important;
}

.nav-breadcrumbs {
	border-top: none !important;
}

.headerbar {
	border-radius: 7px;
	margin-bottom: 4px;
}

/* Sidebars */
div.spacer {
	margin-top: 16px;
}

.sidebarwrap3 {
	max-width: 1300px;
	padding: 0;
	margin: 0 auto;
}

.sidebarwrap1, .sidebarwrap2 {
	max-width: 1200px;
	padding: 0;
	margin: 0 auto;
}

.sidebarwrapper {
    position: relative;
}

.side-avatar img {
	height: 26px;
	width: 26px;
	margin: -10px 0 -5px;
}

/* left sidebar, right section */
.fixedfluid-content {
    padding: 0 0 0 195px;
}

/* left sidebar */
.fixedfluid-sidebar, .fixedfluidfixed-left {
    position: absolute;
    left: 10px;
    top: 0;
    width: 185px;
    bottom: 0;
    padding: 0;
}

/* right sidebar, left section */
.fluidfixed-content {
    padding-right: 195px;
}

/* right sidebar */
.fluidfixed-sidebar, .fixedfluidfixed-right {
    position: absolute;
    right: -15px;
    top: 0;
    width: 185px;
    bottom: 0;
    padding: 0;
}

/* Both sidebars, middle section */
.fixedfluidfixed-content {
    padding: 0 195px 0 195px;
}

.sidebar_avatar {
	height: 15px;
}

/* Sidebar Styling */
.ad1, .ad2 {
    display: block;
    float: left;
}

.ad1 {
    margin: 0 10px 10px 0; 
}

.fixedfluid-sidebar ul.sidebar li, .fluidfixed-sidebar ul.sidebar li, .fixedfluidfixed-left ul.sidebar li, .fixedfluidfixed-right ul.sidebar li {
    padding: 5px 10px; 
}

/* Sidebar UCP */
.sidebar-link ul.side-navlinks {
    display: none;
}

.left-sidebar .sidebar-link:hover  ul.side-navlinks {
    display: block;
	position: absolute;
	white-space: nowrap;
	margin-top: -26px;
	margin-bottom: 16px;
	left: 170px;
	transition: all 0.9s ease-in-out 0s;
	z-index: 999;
}

.right-sidebar .sidebar-link:hover  ul.side-navlinks {
    display: block;
	position: absolute;
	white-space: nowrap;
	margin-top: -26px;
	margin-bottom: 16px;
	right: 170px;
	transition: all 0.9s ease-in-out 0s;
	z-index: 999;
}

/* Sidebar colaspse/move buttons */
.side-colaspse-button, .side-expand-button { width: 16px;height:16px;float: right; }
.side-left-button, .side-right-button, .side-up-button, .side-down-button { width: 11px;height:11px;float: right;margin-right: 5px; }
.side-colaspse-button { background-image: url("./images/icon_colaspse.gif"); }
.side-expand-button   { background-image: url("./images/icon_expand.gif"); }
.side-left-button     { background-image: url("./images/icon_left_arrow.gif"); }
.side-right-button    { background-image: url("./images/icon_right_arrow.gif"); }
.side-up-button       { background-image: url("./images/icon_up_arrow.gif"); }
.side-down-button     { background-image: url("./images/icon_down_arrow.gif"); }

@media only screen and (max-width: 1300px), only screen and (max-device-width: 1300px) {
	.nav-main, .phpbb-navbar {
		display: block !important;
	}

	.nav-breadcrumbs {
		border-top: 1px solid #FFFFFF !important;
	}

	.headerbar {
		border-radius: 7px 7px 0 0;
		margin-bottom: -1px;
	}

	.sidebarwrap {
		max-width: 1000px !important;
		padding: 0;
	}

	.fixedfluid-content {
		padding: 0;
	}

	.fixedfluid-sidebar, .fixedfluidfixed-left {
		display: none;
		width: 0;
	}
	
	/* right sidebar, left section */
	.fluidfixed-content {
		padding-right: 0;
	}
	
	/* right sidebar */
	.fluidfixed-sidebar, .fixedfluidfixed-right {
		display: none;
		width: 0;
	}
	
	/* Both sidebars, middle section */
	.fixedfluidfixed-content {
		padding: 0;
	}
}
Wow your Unread posts link, text is very long in your language. How wide would sidebars need to be for that text not to wrap?
Image
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!
:!: Sniper_E Styles | phpbbmodders :!:

User avatar
RomaamoR
Registered User
Posts: 150
Joined: Tue Feb 24, 2015 4:45 pm
Contact:

Re: [BETA] Sidebar Menu

Post by RomaamoR » Tue Apr 24, 2018 7:20 am

It seems to me so much better.

Code: Select all

/*  phpBB3 Style Sheet Prosilver
    --------------------------------------------------------------
	Extention name:     Sidebar Menu
	Original author:    phpBB Limited ( https://www.phpbb.com/ )
	Modified by:        Martin ( http://www.martins-phpbb.com/ )
	Modified by:        Sniper_E ( http://sniper-e.com/ )
    --------------------------------------------------------------
*/

/* Hide nav main */
.nav-main, .phpbb-navbar {
	display: none !important;
}

.nav-breadcrumbs {
	border-top: none !important;
}

.headerbar {
	border-radius: 7px;
	margin-bottom: 4px;
}

/* Sidebars */
div.spacer {
	margin-top: 16px;
}

.sidebarwrap3 {
	max-width: 1300px;
	padding: 0;
	margin: 0 auto;
}

.sidebarwrap1, .sidebarwrap2 {
	max-width: 1200px;
	padding: 0;
	margin: 0 auto;
}

.sidebarwrapper {
    position: relative;
}

.side-avatar img {
	height: 26px;
	width: 26px;
	margin: -10px 0 -5px;
}

/* left sidebar, right section */
.fixedfluid-content {
    padding: 0 0 0 195px;
}

/* left sidebar */
.fixedfluid-sidebar, .fixedfluidfixed-left {
    position: absolute;
    left: 10px;
    top: 0;
    width: 165px;
    bottom: 0;
    padding: 0;
}

/* right sidebar, left section */
.fluidfixed-content {
    padding-right: 195px;
}

/* right sidebar */
.fluidfixed-sidebar, .fixedfluidfixed-right {
    position: absolute;
    right: -15px;
    top: 0;
    width: 190px;
    bottom: 0;
    padding: 0;
}

/* Both sidebars, middle section */
.fixedfluidfixed-content {
    padding: 0 195px 0 195px;
}

.sidebar_avatar {
	height: 15px;
}

/* Sidebar Styling */
.ad1, .ad2 {
    display: block;
    float: left;
}

.ad1 {
    margin: 0 10px 10px 0; 
}

.fixedfluid-sidebar ul.sidebar li, .fluidfixed-sidebar ul.sidebar li, .fixedfluidfixed-left ul.sidebar li, .fixedfluidfixed-right ul.sidebar li {
    padding: 5px 10px; 
}

/* Sidebar UCP */
.sidebar-link ul.side-navlinks {
    display: none;
}

.left-sidebar .sidebar-link:hover  ul.side-navlinks {
    display: block;
	position: absolute;
	white-space: nowrap;
	margin-top: -26px;
	margin-bottom: 16px;
	left: 170px;
	transition: all 0.9s ease-in-out 0s;
	z-index: 999;
}

.right-sidebar .sidebar-link:hover  ul.side-navlinks {
    display: block;
	position: absolute;
	white-space: nowrap;
	margin-top: -26px;
	margin-bottom: 16px;
	right: 170px;
	transition: all 0.9s ease-in-out 0s;
	z-index: 999;
}

/* Sidebar colaspse/move buttons */
.side-colaspse-button, .side-expand-button { width: 16px;height:16px;float: right; }
.side-left-button, .side-right-button, .side-up-button, .side-down-button { width: 11px;height:11px;float: right;margin-right: 5px; }
.side-colaspse-button { background-image: url("./images/icon_colaspse.gif"); }
.side-expand-button   { background-image: url("./images/icon_expand.gif"); }
.side-left-button     { background-image: url("./images/icon_left_arrow.gif"); }
.side-right-button    { background-image: url("./images/icon_right_arrow.gif"); }
.side-up-button       { background-image: url("./images/icon_up_arrow.gif"); }
.side-down-button     { background-image: url("./images/icon_down_arrow.gif"); }

@media only screen and (max-width: 1300px), only screen and (max-device-width: 1300px) {
	.nav-main, .phpbb-navbar {
		display: block !important;
	}

	.nav-breadcrumbs {
		border-top: 1px solid #FFFFFF !important;
	}

	.headerbar {
		border-radius: 7px 7px 0 0;
		margin-bottom: -1px;
	}

	.sidebarwrap {
		max-width: 1000px !important;
		padding: 0;
	}

	.fixedfluid-content {
		padding: 0;
	}

	.fixedfluid-sidebar, .fixedfluidfixed-left {
		display: none;
		width: 0;
	}
	
	/* right sidebar, left section */
	.fluidfixed-content {
		padding-right: 0;
	}
	
	/* right sidebar */
	.fluidfixed-sidebar, .fixedfluidfixed-right {
		display: none;
		width: 0;
	}
	
	/* Both sidebars, middle section */
	.fixedfluidfixed-content {
		padding: 0;
	}
}
And why does it only work in Firefox?

User avatar
Sniper_E
Registered User
Posts: 730
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: [BETA] Sidebar Menu

Post by Sniper_E » Tue Apr 24, 2018 7:25 am

You need to balance out the paddings and the widths. Use these numbers.

Code: Select all

/* left sidebar, right section */
.fixedfluid-content {
    padding: 0 0 0 175px;
}

/* left sidebar */
.fixedfluid-sidebar, .fixedfluidfixed-left {
    position: absolute;
    left: 10px;
    top: 0;
    width: 165px;
    bottom: 0;
    padding: 0;
}

/* right sidebar, left section */
.fluidfixed-content {
    padding-right: 200px;
}

/* right sidebar */
.fluidfixed-sidebar, .fixedfluidfixed-right {
    position: absolute;
    right: -15px;
    top: 0;
    width: 190px;
    bottom: 0;
    padding: 0;
}

/* Both sidebars, middle section */
.fixedfluidfixed-content {
    padding: 0 200px 0 175px;
}
You are making the left sidebars width 165px and the right 190px. Add 10px more to the paddings.
Image
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!
:!: Sniper_E Styles | phpbbmodders :!:

User avatar
RomaamoR
Registered User
Posts: 150
Joined: Tue Feb 24, 2015 4:45 pm
Contact:

Re: [BETA] Sidebar Menu

Post by RomaamoR » Tue Apr 24, 2018 7:32 am


User avatar
Sniper_E
Registered User
Posts: 730
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: [BETA] Sidebar Menu

Post by Sniper_E » Tue Apr 24, 2018 7:44 am

I see that also. That is the correct numbers to balance it out.

I do have this in the top of my stylesheet.css

Code: Select all

.wrap {
	margin: 0 10px;
}

See if adding that will balance it out.

Here you go.

Code: Select all

/*  phpBB3 Style Sheet Prosilver
    --------------------------------------------------------------
	Extention name:     Sidebar Menu
	Original author:    phpBB Limited ( https://www.phpbb.com/ )
	Modified by:        Martin ( http://www.martins-phpbb.com/ )
	Modified by:        Sniper_E ( http://sniper-e.com/ )
    --------------------------------------------------------------
*/

/* Hide nav main */
.nav-main, .phpbb-navbar {
	display: none !important;
}

.nav-breadcrumbs {
	border-top: none !important;
}

.headerbar {
	border-radius: 7px;
	margin-bottom: 4px;
}

.wrap {
	margin: 0 10px;
}

/* Sidebars */
div.spacer {
	margin-top: 16px;
}

.sidebarwrap3 {
	max-width: 1300px;
	padding: 0;
	margin: 0 auto;
	min-margin: 0 10px;
}

.sidebarwrap1, .sidebarwrap2 {
	max-width: 1200px;
	padding: 0;
	margin: 0 auto;
}

.sidebarwrapper {
    position: relative;
}

.side-avatar img {
	height: 26px;
	width: 26px;
	margin: -10px 0 -5px;
}

/* left sidebar, right section */
.fixedfluid-content {
    padding: 0 0 0 175px;
}

/* left sidebar */
.fixedfluid-sidebar, .fixedfluidfixed-left {
    position: absolute;
    left: 10px;
    top: 0;
    width: 165px;
    bottom: 0;
    padding: 0;
}

/* right sidebar, left section */
.fluidfixed-content {
    padding-right: 200px;
}

/* right sidebar */
.fluidfixed-sidebar, .fixedfluidfixed-right {
    position: absolute;
    right: 10px;
    top: 0;
    width: 190px;
    bottom: 0;
    padding: 0;
}

/* Both sidebars, middle section */
.fixedfluidfixed-content {
    padding: 0 200px 0 175px;
}

.sidebar_avatar {
	height: 15px;
}

/* Sidebar Styling */
.ad1, .ad2 {
    display: block;
    float: left;
}

.ad1 {
    margin: 0 10px 10px 0; 
}

.fixedfluid-sidebar ul.sidebar li, .fluidfixed-sidebar ul.sidebar li, .fixedfluidfixed-left ul.sidebar li, .fixedfluidfixed-right ul.sidebar li {
    padding: 5px 10px; 
}

/* Sidebar UCP */
.sidebar-link ul.side-navlinks,
.sidebar-link ul.sub-side-navlinks,
.sidebar-link ul.sub-sub-side-navlinks {
    display: none;
}

.left-sidebar .sidebar-link:hover  ul.side-navlinks {
    display: block;
	position: absolute;
	white-space: nowrap;
	margin-top: -26px;
	margin-bottom: 16px;
	left: 170px;
	transition: all 0.9s ease-in-out 0s;
	z-index: 999;
}

.left-sidebar .sidebar-link ul.side-navlinks:hover ul.sub-side-navlinks {
    display: block;
	position: absolute;
	white-space: nowrap;
	margin-top: -26px;
	margin-bottom: 16px;
	left: 146px;
	transition: all 0.9s ease-in-out 0s;
	z-index: 999;
}

.left-sidebar .sidebar-link ul.sub-side-navlinks:hover ul.sub-sub-side-navlinks {
    display: block;
	position: absolute;
	white-space: nowrap;
	margin-top: -26px;
	margin-bottom: 16px;
	left: 146px;
	transition: all 0.9s ease-in-out 0s;
	z-index: 999;
}

.right-sidebar .sidebar-link:hover  ul.side-navlinks {
    display: block;
	position: absolute;
	white-space: nowrap;
	margin-top: -26px;
	margin-bottom: 16px;
	right: 170px;
	transition: all 0.9s ease-in-out 0s;
	z-index: 999;
}

.right-sidebar .sidebar-link ul.side-navlinks:hover ul.sub-side-navlinks {
    display: block;
	position: absolute;
	white-space: nowrap;
	margin-top: -26px;
	margin-bottom: 16px;
	right: 146px;
	transition: all 0.9s ease-in-out 0s;
	z-index: 999;
}

.right-sidebar .sidebar-link ul.sub-side-navlinks:hover ul.sub-sub-side-navlinks {
    display: block;
	position: absolute;
	white-space: nowrap;
	margin-top: -26px;
	margin-bottom: 16px;
	right: 146px;
	transition: all 0.9s ease-in-out 0s;
	z-index: 999;
}

/* Sidebar colaspse and move buttons */
.side-colaspse-button, .side-expand-button { width: 16px;height:16px;float: right; }
.side-colaspse-button { background-image: url("./images/icon_colaspse.gif"); }
.side-expand-button   { background-image: url("./images/icon_expand.gif"); }

.side-left-button, .side-right-button, .side-up-button, .side-down-button { width: 11px;height:11px;float: right;margin-right: 5px; }
.side-left-button     { background-image: url("./images/icon_left_arrow.gif"); }
.side-right-button    { background-image: url("./images/icon_right_arrow.gif"); }
.side-up-button       { background-image: url("./images/icon_up_arrow.gif"); }
.side-down-button     { background-image: url("./images/icon_down_arrow.gif"); }

@media only screen and (max-width: 1150px), only screen and (max-device-width: 1150px) {
	.nav-main, .phpbb-navbar {
		display: block !important;
	}

	.nav-breadcrumbs {
		border-top: 1px solid #FFFFFF !important;
	}

	.headerbar {
		border-radius: 7px 7px 0 0;
		margin-bottom: -1px;
	}

	.sidebarwrap {
		max-width: 1000px !important;
		padding: 0;
	}

	.fixedfluid-content {
		padding: 0;
	}

	.fixedfluid-sidebar, .fixedfluidfixed-left {
		display: none;
		width: 0;
	}
	
	/* right sidebar, left section */
	.fluidfixed-content {
		padding-right: 0;
	}
	
	/* right sidebar */
	.fluidfixed-sidebar, .fixedfluidfixed-right {
		display: none;
		width: 0;
	}
	
	/* Both sidebars, middle section */
	.fixedfluidfixed-content {
		padding: 0;
	}
}
Image
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!
:!: Sniper_E Styles | phpbbmodders :!:

User avatar
RomaamoR
Registered User
Posts: 150
Joined: Tue Feb 24, 2015 4:45 pm
Contact:

Re: [BETA] Sidebar Menu

Post by RomaamoR » Tue Apr 24, 2018 7:59 am

So good.

User avatar
Sniper_E
Registered User
Posts: 730
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: [BETA] Sidebar Menu

Post by Sniper_E » Tue Apr 24, 2018 8:37 am

The translation to the extended ucp menu language file is in your phpBB/language/ur_lang/ucp.php
Image
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!
:!: Sniper_E Styles | phpbbmodders :!:

User avatar
RomaamoR
Registered User
Posts: 150
Joined: Tue Feb 24, 2015 4:45 pm
Contact:

Re: [BETA] Sidebar Menu

Post by RomaamoR » Tue Apr 24, 2018 9:11 am

Links in the personal section on the index.php page do not work. On other pages - yes. This is for the admin. For the test user, General error
The module is unavailable.

User avatar
Sniper_E
Registered User
Posts: 730
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: [BETA] Sidebar Menu

Post by Sniper_E » Tue Apr 24, 2018 5:27 pm

I tested at your site and found no errors. But changing your sidebar widths you need to match that difference in the sub-links.

Code: Select all

/*  phpBB3 Style Sheet Prosilver
    --------------------------------------------------------------
	Extention name:     Sidebar Menu
	Original author:    phpBB Limited ( https://www.phpbb.com/ )
	Modified by:        Martin ( http://www.martins-phpbb.com/ )
	Modified by:        Sniper_E ( http://sniper-e.com/ )
    --------------------------------------------------------------
*/

/* Hide nav main */
.nav-main, .phpbb-navbar {
	display: none !important;
}

.nav-breadcrumbs {
	border-top: none !important;
}

.headerbar {
	border-radius: 7px;
	margin-bottom: 4px;
}

.wrap {
	margin: 0 10px;
}

/* Sidebars */
div.spacer {
	margin-top: 16px;
}

.sidebarwrap3 {
	max-width: 1300px;
	padding: 0;
	margin: 0 auto;
	min-margin: 0 10px;
}

.sidebarwrap1, .sidebarwrap2 {
	max-width: 1200px;
	padding: 0;
	margin: 0 auto;
}

.sidebarwrapper {
    position: relative;
}

.side-avatar img {
	height: 26px;
	width: 26px;
	margin: -10px 0 -5px;
}

/* left sidebar, right section */
.fixedfluid-content {
    padding: 0 0 0 175px;
}

/* left sidebar */
.fixedfluid-sidebar, .fixedfluidfixed-left {
    position: absolute;
    left: 10px;
    top: 0;
    width: 165px;
    bottom: 0;
    padding: 0;
}

/* right sidebar, left section */
.fluidfixed-content {
    padding-right: 200px;
}

/* right sidebar */
.fluidfixed-sidebar, .fixedfluidfixed-right {
    position: absolute;
    right: 10px;
    top: 0;
    width: 190px;
    bottom: 0;
    padding: 0;
}

/* Both sidebars, middle section */
.fixedfluidfixed-content {
    padding: 0 200px 0 175px;
}

.sidebar_avatar {
	height: 15px;
}

/* Sidebar Styling */
.ad1, .ad2 {
    display: block;
    float: left;
}

.ad1 {
    margin: 0 10px 10px 0; 
}

.fixedfluid-sidebar ul.sidebar li, .fluidfixed-sidebar ul.sidebar li, .fixedfluidfixed-left ul.sidebar li, .fixedfluidfixed-right ul.sidebar li {
    padding: 5px 10px; 
}

/* Sidebar UCP */
.sidebar-link ul.side-navlinks,
.sidebar-link ul.sub-side-navlinks,
.sidebar-link ul.sub-sub-side-navlinks {
    display: none;
}

.left-sidebar .sidebar-link:hover  ul.side-navlinks {
    display: block;
	position: absolute;
	white-space: nowrap;
	margin-top: -16px;
	margin-bottom: 16px;
	left: 160px;
	transition: all 0.9s ease-in-out 0s;
	z-index: 999;
}

.right-sidebar .sidebar-link:hover  ul.side-navlinks {
    display: block;
	position: absolute;
	white-space: nowrap;
	margin-top: -26px;
	margin-bottom: 16px;
	right: 185px;
	transition: all 0.9s ease-in-out 0s;
	z-index: 999;
}

/* Sidebar colaspse and move buttons */
.side-colaspse-button, .side-expand-button { width: 16px;height:16px;float: right; }
.side-colaspse-button { background-image: url("./images/icon_colaspse.gif"); }
.side-expand-button   { background-image: url("./images/icon_expand.gif"); }

.side-left-button, .side-right-button, .side-up-button, .side-down-button { width: 11px;height:11px;float: right;margin-right: 5px; }
.side-left-button     { background-image: url("./images/icon_left_arrow.gif"); }
.side-right-button    { background-image: url("./images/icon_right_arrow.gif"); }
.side-up-button       { background-image: url("./images/icon_up_arrow.gif"); }
.side-down-button     { background-image: url("./images/icon_down_arrow.gif"); }

@media only screen and (max-width: 1150px), only screen and (max-device-width: 1150px) {
	.nav-main, .phpbb-navbar {
		display: block !important;
	}

	.nav-breadcrumbs {
		border-top: 1px solid #FFFFFF !important;
	}

	.headerbar {
		border-radius: 7px 7px 0 0;
		margin-bottom: -1px;
	}

	.sidebarwrap {
		max-width: 1000px !important;
		padding: 0;
	}

	.fixedfluid-content {
		padding: 0;
	}

	.fixedfluid-sidebar, .fixedfluidfixed-left {
		display: none;
		width: 0;
	}
	
	/* right sidebar, left section */
	.fluidfixed-content {
		padding-right: 0;
	}
	
	/* right sidebar */
	.fluidfixed-sidebar, .fixedfluidfixed-right {
		display: none;
		width: 0;
	}
	
	/* Both sidebars, middle section */
	.fixedfluidfixed-content {
		padding: 0;
	}
}
Your left sidebar is 10px less and your right sidebar is 15px more than the set sizes.

Code: Select all

.left-sidebar .sidebar-link:hover  ul.side-navlinks {
	left: 170px; // Your left sidebar is 10px less so we change that to 160px
}

.right-sidebar .sidebar-link:hover  ul.side-navlinks {
	right: 170px; // Your right sidebar is 15px more so we change that to 185px
}
You have to keep a balance when changing the sidebar widths.
Image
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!
:!: Sniper_E Styles | phpbbmodders :!:

User avatar
RomaamoR
Registered User
Posts: 150
Joined: Tue Feb 24, 2015 4:45 pm
Contact:

Re: [BETA] Sidebar Menu

Post by RomaamoR » Tue Apr 24, 2018 7:07 pm

Changed. ;)

User avatar
Sniper_E
Registered User
Posts: 730
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: [BETA] Sidebar Menu

Post by Sniper_E » Tue Apr 24, 2018 10:50 pm

Froddelaar wrote:
Fri Apr 20, 2018 8:44 pm
Oke great, thank you! Just scream, and I'll test :D
OK, back to you Froddelaar... I have another one you can test for the JV Arcade.

Code: Select all

<!-- IF S_IN_PHPBB_ARCADE and .arcade_menu -->
	<!-- BEGIN arcade_menu -->
	<!-- IF .arcade_menu.submenu -->
<ul class="topiclist sidebar">
	<li class="row bg2 sidebar-link"{% if arcade_menu.TITLE %} title="{arcade_menu.TITLE}"{% endif %}>
		<i class="icon {arcade_menu.FA} fa-fw" aria-hidden="true"></i><span>{arcade_menu.NAME}</span>
		<ul class="forabg side-navlinks">
			<!-- BEGIN submenu -->
			<li class="row {% if arcade_menu.submenu.S_ROW_COUNT is odd %}bg2{% else %}bg1{% endif %} sub-sidebar-link">
				<!-- IF arcade_menu.submenu.URL --><a href="{arcade_menu.submenu.URL}"<!-- IF arcade_menu.submenu.TITLE --> title="{arcade_menu.submenu.TITLE}"<!-- ENDIF -->{arcade_menu.submenu.ONCLICK}><!-- ENDIF -->
				<i class="icon {arcade_menu.submenu.FA} fa-fw" aria-hidden="true"></i><span><!-- IF .arcade_menu.submenu.subsubmenu --><b>{arcade_menu.submenu.NAME}</b><!-- ELSE -->{arcade_menu.submenu.NAME}<!-- ENDIF --></span>
				<!-- IF arcade_menu.submenu.URL --></a><!-- ENDIF -->
				<!-- IF .arcade_menu.submenu.subsubmenu -->
				<ul class="forabg sub-side-navlinks">
					<!-- BEGIN subsubmenu -->
					<li class="row {% if arcade_menu.subsubmenu.S_ROW_COUNT is odd %}bg2{% else %}bg1{% endif %} sub-sub-sidebar-link">
						<!-- IF arcade_menu.subsubmenu.URL --><a href="{arcade_menu.subsubmenu.URL}"<!-- IF arcade_menu.subsubmenu.TITLE --> title="{arcade_menu.subsubmenu.TITLE}"<!-- ENDIF -->{arcade_menu.subsubmenu.ONCLICK}><!-- ENDIF -->
							<!-- IF arcade_menu.subsubmenu.FA --><i class="icon {arcade_menu.subsubmenu.FA} fa-fw" aria-hidden="true"></i><span><!-- IF .arcade_menu.submenu.subsubmenu.subsubsubmenu --><b>{arcade_menu.subsubmenu.NAME}</b><!-- ELSE -->{arcade_menu.subsubmenu.NAME}<!-- ENDIF --></span><!-- ELSE --><!-- IF .arcade_menu.submenu.subsubmenu.subsubsubmenu --><b>{arcade_menu.subsubmenu.NAME}</b><!-- ELSE -->{arcade_menu.subsubmenu.NAME}<!-- ENDIF --><!-- ENDIF -->
						<!-- IF arcade_menu.subsubmenu.URL --></a><!-- ENDIF -->
							<!-- IF .arcade_menu.submenu.subsubmenu.subsubsubmenu -->
						<ul class="forabg sub-sub-side-navlinks">
							<!-- BEGIN subsubsubmenu -->
							<li class="row {% if arcade_menu.subsubmenu.S_ROW_COUNT is odd %}bg2{% else %}bg1{% endif %} side-link">
								<a href="{arcade_menu.subsubsubmenu.URL}"<!-- IF arcade_menu.subsubsubmenu.TITLE --> title="{arcade_menu.subsubsubmenu.TITLE}"<!-- ENDIF -->{arcade_menu.subsubsubmenu.ONCLICK}>
									<!-- IF arcade_menu.subsubsubmenu.FA --><i class="icon {arcade_menu.subsubsubmenu.FA} fa-fw" aria-hidden="true"></i><span>{arcade_menu.subsubsubmenu.NAME}</span><!-- ELSE -->{arcade_menu.subsubsubmenu.NAME}<!-- ENDIF -->
								</a>
							</li>
							<!-- END subsubsubmenu -->
						</ul>
						<!-- ENDIF -->
					</li>
					<!-- END subsubmenu -->
				</ul>
				<!-- ENDIF -->
			</li>
			<!-- END submenu -->
		</ul>
	</li>
</ul>
	<!-- ENDIF -->
	<!-- END arcade_menu -->
<!-- ENDIF -->
But you will need to change/add a little css to make the magic happen. sidebarmenu/styles/prosilver/theme/stylesheet.css (line 109)

Code: Select all

/* Sidebar sub menus */
.sidebar-link ul.side-navlinks,
.sub-sidebar-link ul.sub-side-navlinks,
.sub-sub-sidebar-link ul.sub-sub-side-navlinks {
	display: none;
}

.left-sidebar .sidebar-link:hover  ul.side-navlinks, .left-sidebar .sub-sidebar-link:hover  ul.sub-side-navlinks, .left-sidebar .sub-sub-sidebar-link:hover  ul.sub-sub-side-navlinks {
	display: block;
	position: absolute;
	white-space: nowrap;
	margin-top: -16px;
	margin-bottom: 6px;
	left: 140px;
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.9s;
	animation-name: zoom;
	animation-duration: 0.9s;
	z-index: 999;
}

.right-sidebar .sidebar-link:hover  ul.side-navlinks, .right-sidebar .sub-sidebar-link:hover  ul.sub-side-navlinks, .right-sidebar .sub-sub-sidebar-link:hover  ul.sub-sub-side-navlinks {
	display: block;
	position: absolute;
	white-space: nowrap;
	margin-top: -16px;
	margin-bottom: 6px;
	right: 140px;
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.9s;
	animation-name: zoom;
	animation-duration: 0.9s;
	z-index: 999;
}

@-webkit-keyframes zoom {
	from {-webkit-transform:scale(0)} 
	to {-webkit-transform:scale(1)}
}

@keyframes zoom {
	from {transform:scale(0)} 
	to {transform:scale(1)}
}
This will also be added in the next release. Man that JV Arcade menu is so big it deserves it's on sidebar menu. :idea:
Image
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!
:!: Sniper_E Styles | phpbbmodders :!:

User avatar
</Solidjeuh>
Registered User
Posts: 1067
Joined: Tue Mar 29, 2016 3:45 am
Location: Aalst (Belgium)
Name: Andy Dm
Contact:

Re: [BETA] Sidebar Menu

Post by </Solidjeuh> » Wed Apr 25, 2018 9:21 am

Sniper_E wrote:
Tue Apr 24, 2018 10:50 pm
Froddelaar wrote:
Fri Apr 20, 2018 8:44 pm
Oke great, thank you! Just scream, and I'll test :D
OK, back to you Froddelaar... I have another one you can test for the JV Arcade.

Code: Select all

<!-- IF S_IN_PHPBB_ARCADE and .arcade_menu -->
	<!-- BEGIN arcade_menu -->
	<!-- IF .arcade_menu.submenu -->
<ul class="topiclist sidebar">
	<li class="row bg2 sidebar-link"{% if arcade_menu.TITLE %} title="{arcade_menu.TITLE}"{% endif %}>
		<i class="icon {arcade_menu.FA} fa-fw" aria-hidden="true"></i><span>{arcade_menu.NAME}</span>
		<ul class="forabg side-navlinks">
			<!-- BEGIN submenu -->
			<li class="row {% if arcade_menu.submenu.S_ROW_COUNT is odd %}bg2{% else %}bg1{% endif %} sub-sidebar-link">
				<!-- IF arcade_menu.submenu.URL --><a href="{arcade_menu.submenu.URL}"<!-- IF arcade_menu.submenu.TITLE --> title="{arcade_menu.submenu.TITLE}"<!-- ENDIF -->{arcade_menu.submenu.ONCLICK}><!-- ENDIF -->
				<i class="icon {arcade_menu.submenu.FA} fa-fw" aria-hidden="true"></i><span><!-- IF .arcade_menu.submenu.subsubmenu --><b>{arcade_menu.submenu.NAME}</b><!-- ELSE -->{arcade_menu.submenu.NAME}<!-- ENDIF --></span>
				<!-- IF arcade_menu.submenu.URL --></a><!-- ENDIF -->
				<!-- IF .arcade_menu.submenu.subsubmenu -->
				<ul class="forabg sub-side-navlinks">
					<!-- BEGIN subsubmenu -->
					<li class="row {% if arcade_menu.subsubmenu.S_ROW_COUNT is odd %}bg2{% else %}bg1{% endif %} sub-sub-sidebar-link">
						<!-- IF arcade_menu.subsubmenu.URL --><a href="{arcade_menu.subsubmenu.URL}"<!-- IF arcade_menu.subsubmenu.TITLE --> title="{arcade_menu.subsubmenu.TITLE}"<!-- ENDIF -->{arcade_menu.subsubmenu.ONCLICK}><!-- ENDIF -->
							<!-- IF arcade_menu.subsubmenu.FA --><i class="icon {arcade_menu.subsubmenu.FA} fa-fw" aria-hidden="true"></i><span><!-- IF .arcade_menu.submenu.subsubmenu.subsubsubmenu --><b>{arcade_menu.subsubmenu.NAME}</b><!-- ELSE -->{arcade_menu.subsubmenu.NAME}<!-- ENDIF --></span><!-- ELSE --><!-- IF .arcade_menu.submenu.subsubmenu.subsubsubmenu --><b>{arcade_menu.subsubmenu.NAME}</b><!-- ELSE -->{arcade_menu.subsubmenu.NAME}<!-- ENDIF --><!-- ENDIF -->
						<!-- IF arcade_menu.subsubmenu.URL --></a><!-- ENDIF -->
							<!-- IF .arcade_menu.submenu.subsubmenu.subsubsubmenu -->
						<ul class="forabg sub-sub-side-navlinks">
							<!-- BEGIN subsubsubmenu -->
							<li class="row {% if arcade_menu.subsubmenu.S_ROW_COUNT is odd %}bg2{% else %}bg1{% endif %} side-link">
								<a href="{arcade_menu.subsubsubmenu.URL}"<!-- IF arcade_menu.subsubsubmenu.TITLE --> title="{arcade_menu.subsubsubmenu.TITLE}"<!-- ENDIF -->{arcade_menu.subsubsubmenu.ONCLICK}>
									<!-- IF arcade_menu.subsubsubmenu.FA --><i class="icon {arcade_menu.subsubsubmenu.FA} fa-fw" aria-hidden="true"></i><span>{arcade_menu.subsubsubmenu.NAME}</span><!-- ELSE -->{arcade_menu.subsubsubmenu.NAME}<!-- ENDIF -->
								</a>
							</li>
							<!-- END subsubsubmenu -->
						</ul>
						<!-- ENDIF -->
					</li>
					<!-- END subsubmenu -->
				</ul>
				<!-- ENDIF -->
			</li>
			<!-- END submenu -->
		</ul>
	</li>
</ul>
	<!-- ENDIF -->
	<!-- END arcade_menu -->
<!-- ENDIF -->
But you will need to change/add a little css to make the magic happen. sidebarmenu/styles/prosilver/theme/stylesheet.css (line 109)

Code: Select all

/* Sidebar sub menus */
.sidebar-link ul.side-navlinks,
.sub-sidebar-link ul.sub-side-navlinks,
.sub-sub-sidebar-link ul.sub-sub-side-navlinks {
	display: none;
}

.left-sidebar .sidebar-link:hover  ul.side-navlinks, .left-sidebar .sub-sidebar-link:hover  ul.sub-side-navlinks, .left-sidebar .sub-sub-sidebar-link:hover  ul.sub-sub-side-navlinks {
	display: block;
	position: absolute;
	white-space: nowrap;
	margin-top: -16px;
	margin-bottom: 6px;
	left: 140px;
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.9s;
	animation-name: zoom;
	animation-duration: 0.9s;
	z-index: 999;
}

.right-sidebar .sidebar-link:hover  ul.side-navlinks, .right-sidebar .sub-sidebar-link:hover  ul.sub-side-navlinks, .right-sidebar .sub-sub-sidebar-link:hover  ul.sub-sub-side-navlinks {
	display: block;
	position: absolute;
	white-space: nowrap;
	margin-top: -16px;
	margin-bottom: 6px;
	right: 140px;
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.9s;
	animation-name: zoom;
	animation-duration: 0.9s;
	z-index: 999;
}

@-webkit-keyframes zoom {
	from {-webkit-transform:scale(0)} 
	to {-webkit-transform:scale(1)}
}

@keyframes zoom {
	from {transform:scale(0)} 
	to {transform:scale(1)}
}
This will also be added in the next release. Man that JV Arcade menu is so big it deserves it's on sidebar menu. :idea:
WOW! This is just nice! Love that arcade menu!
But there seems to ne something wrong :D
Edited the stylesheet.

Image
We offer fun HTML5 games for young and old.
Register a free account & enjoy all functions!
Save your score, challenge other members or play along with our tournaments.


~~~ https://www.solidjeuh.be ~~~

User avatar
Sniper_E
Registered User
Posts: 730
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: [BETA] Sidebar Menu

Post by Sniper_E » Wed Apr 25, 2018 8:06 pm

First post updated to 2.0.1

Files have changed so this update will require disable, delete data and delete files. Then upload new files and enable.
Image
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!
:!: Sniper_E Styles | phpbbmodders :!:

User avatar
RomaamoR
Registered User
Posts: 150
Joined: Tue Feb 24, 2015 4:45 pm
Contact:

Re: [BETA] Sidebar Menu

Post by RomaamoR » Wed Apr 25, 2018 8:37 pm

Sniper_E, the extension works stably. Do you plan on making the blocks fixed?
By the way, my test forum works on phpBB: 3.2.3-RC1

Post Reply

Return to “Extensions in Development”