SideBar Prosillver Help

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Anti-Spam Guide
Locked
BriniaSona
Registered User
Posts: 393
Joined: Sun Sep 18, 2011 4:32 pm
Contact:

SideBar Prosillver Help

Post by BriniaSona »

I felt as though the old topic got off topic as it started with me asking for something different and turned into a sidebar discussion, Therefor, I made this dedicated topic.

https://www.phpbb.com/kb/article/simple ... silver-se/

I have followed this tutorial, it's all worked except that the things I added do not push the forum over and divide the page for forum on the left and html on the right.

This is what i want it to do
and http://www.kwandrivia.net is what it does.
http://i.imgur.com/mBLFhFx.png

I'm thinking something goes wrong with the css, or something in the forum doesnt allow the css to do what the css needs to do.


Edit: is the tutorial i am using better than this one? https://www.phpbb.com/kb/article/simple ... silver-se/

They both do the same, the chatbox just appears there but doesnt move over allowing the forum to shift up beside it.

BriniaSona
Registered User
Posts: 393
Joined: Sun Sep 18, 2011 4:32 pm
Contact:

Re: SideBar Prosillver Help

Post by BriniaSona »

theme.templates.zip
Code
Theme: Metrolike
(7.08 KiB) Downloaded 6 times
Here is the code zipped in a zip file. The tutorial says to put the one piece of code at the very top of the footer, i did that and then did what is currently there, they both did not work. II then tried tinkering with the widths and nothing, guess my only choice is to upload the code and have you guys see where i went wrong.

rayminator
Registered User
Posts: 310
Joined: Wed Nov 15, 2006 1:37 pm
Name: raymond green
Contact:

Re: SideBar Prosillver Help

Post by rayminator »

here download this then upload it then go to your acp style template refresh the theme and refresh
theme.templates.zip
(7.47 KiB) Downloaded 13 times

BriniaSona
Registered User
Posts: 393
Joined: Sun Sep 18, 2011 4:32 pm
Contact:

Re: SideBar Prosillver Help

Post by BriniaSona »

Nope, didn't work, forum is still messed.

Http://www.kwandrivia.net/

rayminator
Registered User
Posts: 310
Joined: Wed Nov 15, 2006 1:37 pm
Name: raymond green
Contact:

Re: SideBar Prosillver Help

Post by rayminator »

open up you overall_footer and select all and paste this

Code: Select all

	</div>

    <div class="page-sidebar">
    <!-- INCLUDE sidebar.html -->
    </div>  

<div id="page-footer">

	<div class="navbar">
		<div class="inner content-wrap"><span class="corners-top"><span></span></span>

		<ul class="linklist">
			<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a></li>
				<!-- IF not S_IS_BOT -->
					<!-- IF S_WATCH_FORUM_LINK --><li <!-- IF S_WATCHING_FORUM -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{S_WATCH_FORUM_LINK}" title="{S_WATCH_FORUM_TITLE}">{S_WATCH_FORUM_TITLE}</a></li><!-- ENDIF -->
					<!-- IF U_WATCH_TOPIC --><li <!-- IF S_WATCHING_TOPIC -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{U_WATCH_TOPIC}" title="{L_WATCH_TOPIC}">{L_WATCH_TOPIC}</a></li><!-- ENDIF -->
					<!-- IF U_BOOKMARK_TOPIC --><li class="icon-bookmark"><a href="{U_BOOKMARK_TOPIC}" title="{L_BOOKMARK_TOPIC}">{L_BOOKMARK_TOPIC}</a></li><!-- ENDIF -->
					<!-- IF U_BUMP_TOPIC --><li class="icon-bump"><a href="{U_BUMP_TOPIC}" title="{L_BUMP_TOPIC}">{L_BUMP_TOPIC}</a></li><!-- ENDIF -->
				<!-- ENDIF -->
			<li class="rightside"><!-- IF U_TEAM --><a href="{U_TEAM}">{L_THE_TEAM}</a> &bull; <!-- ENDIF --><!-- IF not S_IS_BOT --><a href="{U_DELETE_COOKIES}">{L_DELETE_COOKIES}</a> &bull; <!-- ENDIF -->{S_TIMEZONE}</li>
		</ul>

		<span class="corners-bottom"><span></span></span></div>
	</div>

	<div class="copyright content-wrap">{CREDIT_LINE}
		<br />metrolike style by <a href="http://segwin.ca/">Eric Seguin</a>
		<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
		<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
		<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
	</div>
</div>

</div>

<div>
	<a id="bottom" name="bottom" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>

</body>
</html>
and open open up common.css add this

Code: Select all

 .page-sidebar {
    float:left;
    margin-top:4px;
    width:14%;
}  
or this

Code: Select all

.page-sidebar {
    float:right;
    margin-top:4px;
    width:14%;
}  

BriniaSona
Registered User
Posts: 393
Joined: Sun Sep 18, 2011 4:32 pm
Contact:

Re: SideBar Prosillver Help

Post by BriniaSona »

Success! Many Likes for you.

Okay, on smaller monitors the user now has to scroll to the right to see the cbox, how do I and where do I edit the css so the forum always scales with the resolution.

rayminator
Registered User
Posts: 310
Joined: Wed Nov 15, 2006 1:37 pm
Name: raymond green
Contact:

Re: SideBar Prosillver Help

Post by rayminator »

okay

open overall_header.html

find

Code: Select all

</head>
add before

Code: Select all

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    $('#sticky').addClass('stick');
  } else {
    $('#sticky').removeClass('stick');
  }
}

$(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});
</script>
open sidebar.html

find

Code: Select all

<div class="forabg">
add before

Code: Select all

<div id="sticky-anchor"></div>
<div id="sticky">
find

Code: Select all

</div>
add after

Code: Select all

</div>
open stylesheet.css

find

Code: Select all

@import url("colours.css");
add after

Code: Select all

@import url("scrolling.css");
now make a new css file and save it as scrolling

and add this to the new css file and adjust this to the right size width: 600px;

Code: Select all

#sticky {
  padding: 0.5ex;
  width: 600px;
  font-size: 2em;

  border-radius: 0.5ex;
}
#sticky.stick {
  position: fixed;
  top: 0;
  z-index: 10000;

  border-radius: 0 0 0.5em 0.5em;
}

BriniaSona
Registered User
Posts: 393
Joined: Sun Sep 18, 2011 4:32 pm
Contact:

Re: SideBar Prosillver Help

Post by BriniaSona »

Thanks

Now onto this one

viewtopic.php?f=74&t=2226166

BriniaSona
Registered User
Posts: 393
Joined: Sun Sep 18, 2011 4:32 pm
Contact:

Re: SideBar Prosillver Help

Post by BriniaSona »

Okay, im getting nitpicky here, but, before I added the chatbox, the forum would scale to the resolution of the screen. Is that possible.

That and how do I make the navbar, (minus the logo) do the same as the chatbox and side bar. After that how do I add some drop down menus to the navbar.
Attachments
portal_user_menu.php
(5.82 KiB) Downloaded 2 times

rayminator
Registered User
Posts: 310
Joined: Wed Nov 15, 2006 1:37 pm
Name: raymond green
Contact:

Re: SideBar Prosillver Help

Post by rayminator »

you can use the same code that i given you to move navber

find

Code: Select all

<div class="navbar">
add before

Code: Select all

<div id="sticky-anchor"></div>
<div id="sticky">
find

Code: Select all

<span class="corners-bottom"><span></span></span></div>
		</div>
add after

Code: Select all

</div>

Locked

Return to “[3.0.x] Styles Support & Discussion”