[ABD] [DEV] Sidebar Menu

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

So ?

/*  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;
	}
}

Sniper_E · 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?

RomaamoR · 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?

Sniper_E · 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.

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

Then I see it so.
http://romaamor.zzz.com.ua/download/file.php?id=1

Sniper_E · 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;
	}
}

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

So good.

Sniper_E · 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

RomaamoR · 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.

Sniper_E · 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.

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

Changed.

Sniper_E · 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

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.

</Solidjeuh> · 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

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.

WOW! This is just nice! Love that arcade menu!
But there seems to ne something wrong

Edited the stylesheet.

Sniper_E · 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.

RomaamoR · 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

phpBB • Free and Open Source Forum Software

[ABD] [DEV] Sidebar Menu

Re: [BETA] Sidebar Menu

Re: [BETA] Sidebar Menu

Re: [BETA] Sidebar Menu

Re: [BETA] Sidebar Menu

Re: [BETA] Sidebar Menu

Re: [BETA] Sidebar Menu

Re: [BETA] Sidebar Menu

Re: [BETA] Sidebar Menu

Re: [BETA] Sidebar Menu

Re: [BETA] Sidebar Menu

Re: [BETA] Sidebar Menu

Re: [BETA] Sidebar Menu

Re: [BETA] Sidebar Menu

Re: [BETA] Sidebar Menu

Re: [BETA] Sidebar Menu

advertisements