try to include .css and .js into own custom page (wanna try to install datatables)

Need some custom code changes to the phpBB core simple enough that you feel doesn't require an extension? Then post your request here so that community members can provide some assistance.

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
RobiX
Registered User
Posts: 97
Joined: Thu Oct 05, 2017 9:59 am

try to include .css and .js into own custom page (wanna try to install datatables)

Post by RobiX » Sat Jan 27, 2018 8:18 pm

hi,

i wanna use datatables.net (e.g., https://www.datatables.net/manual/options) for live search etc.

but i have massive problems to include .js and .css scripts in my phpbb (although no errors occurs - see screenshot)
maybe someone can help - tnx a lot

it is not shown correctly and no sorting is possible :(




Code: Select all

<!DOCTYPE html>
<html dir="ltr" lang="en-gb">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title> test </title>

	<link rel="alternate" type="application/atom+xml" title="Feed - " href="/feed">			<link rel="alternate" type="application/atom+xml" title="Feed - New Topics" href="/feed/topics">				

<!--
	phpBB style name: prosilver
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:
-->

<link href="./assets/css/font-awesome.min.css?assets_version=35" rel="stylesheet">
<link href="./styles/prosilver/theme/stylesheet.css?assets_version=35" rel="stylesheet">
<link href="./styles/prosilver/theme/en/stylesheet.css?assets_version=35" rel="stylesheet">




<!--[if lte IE 9]>
	<link href="./styles/prosilver/theme/tweaks.css?assets_version=35" rel="stylesheet">
<![endif]-->

 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>

<link href="./ext/orthohin/navbar/styles/all/theme/bootstrap3.3.7.css?assets_version=35" rel="stylesheet" type="text/css" media="screen" />
<link href="./ext/orthohin/navbar/styles/all/theme/yamm.css?assets_version=35" rel="stylesheet" type="text/css" media="screen" />


<script type="text/javascript" class="init">
$(document).ready(function() {
    $('#example').DataTable( {
        "order": [[ 3, "desc" ]]
    } );
} );
</script>

 <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

<style type="text/css">
	body { padding-top: 70px; }
</style>
<!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,600i,700i" rel="stylesheet"> -->


</head>
<body id="phpbb" class="nojs notouch section-compare-version ltr ">

<style type="text/css">
  .bootstrap .navbar .nav > li > a:hover,
  .bootstrap .navbar .nav > li > a:focus {
    background-color: rgba(0,0,0,0.10) !important;
  }
  </style>

<div class="bootstrap">
...
</div>

<div id="wrap" class="wrap">
	<a id="top" class="top-anchor" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar" role="banner">
		</div>
				<div class="navbar" role="navigation">
	<div class="inner">

	<ul id="nav-main" class="nav-main linklist" role="menubar">

		<li id="quick-links" class="quick-links dropdown-container responsive-menu" data-skip-responsive="true">
			<a href="#" class="dropdown-trigger">
				<i class="icon fa-bars fa-fw" aria-hidden="true"></i><span>Quick links</span>
			</a>
			<div class="dropdown">
				<div class="pointer"><div class="pointer-inner"></div></div>
				<ul class="dropdown-contents" role="menu">
					
											<li class="separator"></li>
													<li>
								<a href="./search.php?search_id=egosearch" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-gray" aria-hidden="true"></i><span>Your posts</span>
								</a>
							</li>
																			<li>
								<a href="./search.php?search_id=newposts" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-red" aria-hidden="true"></i><span>New posts</span>
								</a>
							</li>
																			<li>
								<a href="./search.php?search_id=unreadposts" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-red" aria-hidden="true"></i><span>Unread posts</span>
								</a>
							</li>
													<li>
								<a href="./search.php?search_id=unanswered" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-gray" aria-hidden="true"></i><span>Unanswered topics</span>
								</a>
							</li>
							<li>
								<a href="./search.php?search_id=active_topics" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-blue" aria-hidden="true"></i><span>Active topics</span>
								</a>
							</li>
							<li class="separator"></li>
							<li>
								<a href="./search.php" role="menuitem">
									<i class="icon fa-search fa-fw" aria-hidden="true"></i><span>Search</span>
								</a>
							</li>
					
											<li class="separator"></li>
													<li>
								<a href="./memberlist.php" role="menuitem">
									<i class="icon fa-group fa-fw" aria-hidden="true"></i><span>Members</span>
								</a>
							</li>
																			<li>
								<a href="./memberlist.php?mode=team" role="menuitem">
									<i class="icon fa-shield fa-fw" aria-hidden="true"></i><span>The team</span>
								</a>
							</li>
																<li class="separator"></li>

									</ul>
			</div>
		</li>

									<li data-last-responsive="true">
				<a href="./adm/index.php?sid=411a35cf45ca3d807b5ce2f14fa45464" title="Administration Control Panel" role="menuitem">
					<i class="icon fa-cogs fa-fw" aria-hidden="true"></i><span>ACP</span>
				</a>
			</li>
				
					<li id="username_logged_in" class="rightside " data-skip-responsive="true">
						<div class="header-profile dropdown-container">
				<a href="./ucp.php" class="header-avatar dropdown-trigger"> <span style="color: #AA0000;" class="username-coloured">Administrator</span></a>
				<div class="dropdown">
					<div class="pointer"><div class="pointer-inner"></div></div>
					<ul class="dropdown-contents" role="menu">
						
					
						<li>
							<a href="./ucp.php" title="User Control Panel" role="menuitem">
								<i class="icon fa-sliders fa-fw" aria-hidden="true"></i><span>User Control Panel</span>
							</a>
						</li>
						<li>
							<a href="./memberlist.php?mode=viewprofile&amp;u=2" title="Profile" role="menuitem">
								<i class="icon fa-user fa-fw" aria-hidden="true"></i><span>Profile</span>
							</a>
						</li>

						
						<li class="separator"></li>
						<li>
							<a href="./ucp.php?mode=logout&amp;sid=411a35cf45ca3d807b5ce2f14fa45464" title="Logout" accesskey="x" role="menuitem">
								<i class="icon fa-power-off fa-fw" aria-hidden="true"></i><span>Logout</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
					</li>
					<li class="rightside" data-skip-responsive="true">
				<a href="./ucp.php?i=pm&amp;folder=inbox" role="menuitem">
					<i class="icon fa-inbox fa-fw" aria-hidden="true"></i><span>Private messages </span><strong class="badge hidden">0</strong>
				</a>
			</li>
							<li class="dropdown-container dropdown-right rightside" data-skip-responsive="true">
				<a href="./ucp.php?i=ucp_notifications" id="notification_list_button" class="dropdown-trigger">
					<i class="icon fa-bell fa-fw" aria-hidden="true"></i><span>Notifications </span><strong class="badge hidden">0</strong>
				</a>
				<div id="notification_list" class="dropdown dropdown-extended notification_list">
	<div class="pointer"><div class="pointer-inner"></div></div>
	<div class="dropdown-contents">
		<div class="header">
			Notifications
			<span class="header_settings">
				<a href="./ucp.php?i=ucp_notifications&amp;mode=notification_options">Settings</a>
							</span>
		</div>

		<ul>
							<li class="no_notifications">
					You have no notifications
				</li>
								</ul>

		<div class="footer">
			<a href="./ucp.php?i=ucp_notifications"><span>See All</span></a>
		</div>
	</div>
</div>
			</li>
						</ul>
	<ul id="nav-breadcrumbs" class="nav-breadcrumbs linklist navlinks" role="menubar">
						<li class="breadcrumbs">
										<span class="crumb"  itemtype="http://data-vocabulary.org/Breadcrumb" itemscope=""><a href="./index.php" itemprop="url" accesskey="h" data-navbar-reference="index"><i class="icon fa-home fa-fw"></i><span itemprop="title">Board index</span></a></span>

								</li>
					<li class="rightside responsive-search">
				<a href="./search.php" title="View the advanced search options" role="menuitem">
					<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">Search</span>
				</a>
			</li>
			</ul>

	</div>
</div>
	</div>

	
	<a id="start_here" class="anchor"></a>
	<div id="page-body" class="page-body" role="main">
		
		  <div class="post bg1">
    <div class="inner">
      <div class="postbody" style="width: 100%">
        <div class="content">
          <div>
<table id="example" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
	</div>

<div id="page-footer" class="page-footer" role="contentinfo">
	<div class="navbar" role="navigation">
	<div class="inner">

	<ul id="nav-footer" class="nav-footer linklist" role="menubar">
		<li class="breadcrumbs">
									<span class="crumb"><a href="./index.php" data-navbar-reference="index"><i class="icon fa-home fa-fw" aria-hidden="true"></i><span>Board index</span></a></span>					</li>
		
				<li class="rightside">All times are <span title="UTC">UTC</span></li>
							<li class="rightside">
				<a href="./ucp.php?mode=delete_cookies" data-ajax="true" data-refresh="true" role="menuitem">
					<i class="icon fa-trash fa-fw" aria-hidden="true"></i><span>Delete all board cookies</span>
				</a>
			</li>
							<li class="rightside" data-last-responsive="true">
					<a href="./memberlist.php" title="View complete list of members" role="menuitem">
						<i class="icon fa-group fa-fw" aria-hidden="true"></i><span>Members</span>
					</a>
				</li>
												<li class="rightside" data-last-responsive="true">
				<a href="./memberlist.php?mode=team" role="menuitem">
					<i class="icon fa-shield fa-fw" aria-hidden="true"></i><span>The team</span>
				</a>
			</li>
									<li class="rightside" data-last-responsive="true">
				<a href="./memberlist.php?mode=contactadmin" role="menuitem">
					<i class="icon fa-envelope fa-fw" aria-hidden="true"></i><span>Contact us</span>
				</a>
			</li>
			</ul>

	</div>
</div>

	<div class="copyright">
				Powered by <a href="https://www.phpbb.com/">phpBB</a>&reg; Forum Software &copy; phpBB Limited
								<br /><strong><a href="./adm/index.php?sid=411a35cf45ca3d807b5ce2f14fa45464">Administration Control Panel</a></strong>	</div>

	<div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="AJAX error" data-ajax-error-text="Something went wrong when processing your request." data-ajax-error-text-abort="User aborted request." data-ajax-error-text-timeout="Your request timed out; please try again." data-ajax-error-text-parsererror="Something went wrong with the request and the server returned an invalid reply.">
		<div id="darken" class="darken">&nbsp;</div>
	</div>

	<div id="phpbb_alert" class="phpbb_alert" data-l-err="Error" data-l-timeout-processing-req="Request timed out.">
		<a href="#" class="alert_close">
			<i class="icon fa-times-circle fa-fw" aria-hidden="true"></i>
		</a>
		<h3 class="alert_title">&nbsp;</h3><p class="alert_text"></p>
	</div>
	<div id="phpbb_confirm" class="phpbb_alert">
		<a href="#" class="alert_close">
			<i class="icon fa-times-circle fa-fw" aria-hidden="true"></i>
		</a>
		<div class="alert_text"></div>
	</div>
</div>

</div>

<div>
	<a id="bottom" class="anchor" accesskey="z"></a>
	</div>

<script type="text/javascript" src="./assets/javascript/jquery.min.js?assets_version=35"></script>
<script type="text/javascript" src="./assets/javascript/core.js?assets_version=35"></script>

<script type="text/javascript" src="./styles/prosilver/template/forum_fn.js?assets_version=35"></script>
<script type="text/javascript" src="./styles/prosilver/template/ajax.js?assets_version=35"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(document).on('click', '.yamm .dropdown-menu', function(e) {
  e.stopPropagation()
})
</script>
</body>
</html>
Attachments
Snap1.jpg

Selective
Registered User
Posts: 213
Joined: Sat Apr 19, 2014 10:30 am

Re: try to include .css and .js into own custom page (wanna try to install datatables)

Post by Selective » Sun Jan 28, 2018 1:53 am

From the screen shot you showed, it does look very different from the example on that website.
https://www.datatables.net/examples/adv ... vents.html

phpBB has the titles centered and rows all the same bg color, while the example shows the titles to the left and bg colors alternate.

The example looks like it has buttons near the titles. Are those in the phpbb version, or are those just missing now?

RobiX
Registered User
Posts: 97
Joined: Thu Oct 05, 2017 9:59 am

Re: try to include .css and .js into own custom page (wanna try to install datatables)

Post by RobiX » Sun Jan 28, 2018 2:54 am

i upload the exact file now


pict.lima-city.de/source.txt

RobiX
Registered User
Posts: 97
Joined: Thu Oct 05, 2017 9:59 am

Re: try to include .css and .js into own custom page (wanna try to install datatables)

Post by RobiX » Sun Jan 28, 2018 2:57 am

i removed the navbar in the first output
but i dont think that this is the problem ...

RobiX
Registered User
Posts: 97
Joined: Thu Oct 05, 2017 9:59 am

Re: try to include .css and .js into own custom page (wanna try to install datatables)

Post by RobiX » Sun Jan 28, 2018 2:58 am

From the screen shot you showed, it does look very different from the example on that website.
https://www.datatables.net/examples/adv ... vents.html
and yes, that's the problem that it doesnt look like the same/similar to the example of datatables

maybe wrong css/js? but the links worked well
maybe wrong order?
i am not sure :( didnt find a reason

Selective
Registered User
Posts: 213
Joined: Sat Apr 19, 2014 10:30 am

Re: try to include .css and .js into own custom page (wanna try to install datatables)

Post by Selective » Sun Jan 28, 2018 3:15 am

It could be a conflict between the css for that datatable and the css for the phpbb forum. You could try looking over the css for that datatable and see what is in the css for that datatable. Then see if the phpbb css has the exact same things defined differently.

For example, the titles are not behaving correctly, and I see that they are defined in the css. So that is the first place I would look.

RobiX
Registered User
Posts: 97
Joined: Thu Oct 05, 2017 9:59 am

Re: try to include .css and .js into own custom page (wanna try to install datatables)

Post by RobiX » Sun Jan 28, 2018 3:17 am

good point - i will do that

RobiX
Registered User
Posts: 97
Joined: Thu Oct 05, 2017 9:59 am

Re: try to include .css and .js into own custom page (wanna try to install datatables)

Post by RobiX » Sun Jan 28, 2018 3:20 am

You could try looking over the css
a short look into the css - i dont think that this is wrong because the are named all "datatables" so no clash here (IMHO)

Selective
Registered User
Posts: 213
Joined: Sat Apr 19, 2014 10:30 am

Re: try to include .css and .js into own custom page (wanna try to install datatables)

Post by Selective » Sun Jan 28, 2018 3:23 am

CSS defines many things. For this script below, CSS define the h4 tag. Why is h4 not behaving correctly?

Code: Select all

	<div class="col-md-3">
		<h4>Your title</h4>

RobiX
Registered User
Posts: 97
Joined: Thu Oct 05, 2017 9:59 am

Re: try to include .css and .js into own custom page (wanna try to install datatables)

Post by RobiX » Sun Jan 28, 2018 3:25 am

<div class="row yamm-content">
is above

something wrong with that?

RobiX
Registered User
Posts: 97
Joined: Thu Oct 05, 2017 9:59 am

Re: try to include .css and .js into own custom page (wanna try to install datatables)

Post by RobiX » Sun Jan 28, 2018 3:27 am

i disabled yamm (navigation) but still wrong

RobiX
Registered User
Posts: 97
Joined: Thu Oct 05, 2017 9:59 am

Re: try to include .css and .js into own custom page (wanna try to install datatables)

Post by RobiX » Sun Jan 28, 2018 3:31 am

minimal example IMHO

but still not sortable

Code: Select all

<!DOCTYPE html>
<html dir="ltr" lang="en-gb">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>test</title>

	<link rel="alternate" type="application/atom+xml" title="Feed - " href="/feed">			<link rel="alternate" type="application/atom+xml" title="Feed - New Topics" href="/feed/topics">				

<!--
	phpBB style name: prosilver
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:
-->

<link href="./assets/css/font-awesome.min.css?assets_version=40" rel="stylesheet">
<link href="./styles/prosilver/theme/stylesheet.css?assets_version=40" rel="stylesheet">
<link href="./styles/prosilver/theme/en/stylesheet.css?assets_version=40" rel="stylesheet">




<!--[if lte IE 9]>
	<link href="./styles/prosilver/theme/tweaks.css?assets_version=40" rel="stylesheet">
<![endif]-->




 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
 <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

<script type="text/javascript" class="init">
$(document).ready(function() {
    $('#example').DataTable( {
        "order": [[ 3, "desc" ]]
    } );
} );
</script>




</head>
<body id="phpbb" class="nojs notouch section-compare-version ltr ">


<div id="wrap" class="wrap">
	<a id="top" class="top-anchor" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar" role="banner">
		</div>
				<div class="navbar" role="navigation">
	<div class="inner">

	<ul id="nav-main" class="nav-main linklist" role="menubar">

		<li id="quick-links" class="quick-links dropdown-container responsive-menu" data-skip-responsive="true">
			<a href="#" class="dropdown-trigger">
				<i class="icon fa-bars fa-fw" aria-hidden="true"></i><span>Quick links</span>
			</a>
			<div class="dropdown">
				<div class="pointer"><div class="pointer-inner"></div></div>
				<ul class="dropdown-contents" role="menu">
					
											<li class="separator"></li>
													<li>
								<a href="./search.php?search_id=egosearch" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-gray" aria-hidden="true"></i><span>Your posts</span>
								</a>
							</li>
																			<li>
								<a href="./search.php?search_id=newposts" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-red" aria-hidden="true"></i><span>New posts</span>
								</a>
							</li>
																			<li>
								<a href="./search.php?search_id=unreadposts" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-red" aria-hidden="true"></i><span>Unread posts</span>
								</a>
							</li>
													<li>
								<a href="./search.php?search_id=unanswered" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-gray" aria-hidden="true"></i><span>Unanswered topics</span>
								</a>
							</li>
							<li>
								<a href="./search.php?search_id=active_topics" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-blue" aria-hidden="true"></i><span>Active topics</span>
								</a>
							</li>
							<li class="separator"></li>
							<li>
								<a href="./search.php" role="menuitem">
									<i class="icon fa-search fa-fw" aria-hidden="true"></i><span>Search</span>
								</a>
							</li>
					
											<li class="separator"></li>
													<li>
								<a href="./memberlist.php" role="menuitem">
									<i class="icon fa-group fa-fw" aria-hidden="true"></i><span>Members</span>
								</a>
							</li>
																			<li>
								<a href="./memberlist.php?mode=team" role="menuitem">
									<i class="icon fa-shield fa-fw" aria-hidden="true"></i><span>The team</span>
								</a>
							</li>
																<li class="separator"></li>

									</ul>
			</div>
		</li>

									<li data-last-responsive="true">
				<a href="./adm/index.php?sid=4142974abb2f22866a8446716cab353f" title="Administration Control Panel" role="menuitem">
					<i class="icon fa-cogs fa-fw" aria-hidden="true"></i><span>ACP</span>
				</a>
			</li>
				
					<li id="username_logged_in" class="rightside " data-skip-responsive="true">
						<div class="header-profile dropdown-container">
				<a href="./ucp.php" class="header-avatar dropdown-trigger"> <span style="color: #AA0000;" class="username-coloured">Administrator</span></a>
				<div class="dropdown">
					<div class="pointer"><div class="pointer-inner"></div></div>
					<ul class="dropdown-contents" role="menu">
						
					
						<li>
							<a href="./ucp.php" title="User Control Panel" role="menuitem">
								<i class="icon fa-sliders fa-fw" aria-hidden="true"></i><span>User Control Panel</span>
							</a>
						</li>
						<li>
							<a href="./memberlist.php?mode=viewprofile&amp;u=2" title="Profile" role="menuitem">
								<i class="icon fa-user fa-fw" aria-hidden="true"></i><span>Profile</span>
							</a>
						</li>

						
						<li class="separator"></li>
						<li>
							<a href="./ucp.php?mode=logout&amp;sid=4142974abb2f22866a8446716cab353f" title="Logout" accesskey="x" role="menuitem">
								<i class="icon fa-power-off fa-fw" aria-hidden="true"></i><span>Logout</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
					</li>
					<li class="rightside" data-skip-responsive="true">
				<a href="./ucp.php?i=pm&amp;folder=inbox" role="menuitem">
					<i class="icon fa-inbox fa-fw" aria-hidden="true"></i><span>Private messages </span><strong class="badge hidden">0</strong>
				</a>
			</li>
							<li class="dropdown-container dropdown-right rightside" data-skip-responsive="true">
				<a href="./ucp.php?i=ucp_notifications" id="notification_list_button" class="dropdown-trigger">
					<i class="icon fa-bell fa-fw" aria-hidden="true"></i><span>Notifications </span><strong class="badge hidden">0</strong>
				</a>
				<div id="notification_list" class="dropdown dropdown-extended notification_list">
	<div class="pointer"><div class="pointer-inner"></div></div>
	<div class="dropdown-contents">
		<div class="header">
			Notifications
			<span class="header_settings">
				<a href="./ucp.php?i=ucp_notifications&amp;mode=notification_options">Settings</a>
							</span>
		</div>

		<ul>
							<li class="no_notifications">
					You have no notifications
				</li>
								</ul>

		<div class="footer">
			<a href="./ucp.php?i=ucp_notifications"><span>See All</span></a>
		</div>
	</div>
</div>
			</li>
						</ul>

	<ul id="nav-breadcrumbs" class="nav-breadcrumbs linklist navlinks" role="menubar">
						<li class="breadcrumbs">
										<span class="crumb"  itemtype="http://data-vocabulary.org/Breadcrumb" itemscope=""><a href="./index.php" itemprop="url" accesskey="h" data-navbar-reference="index"><i class="icon fa-home fa-fw"></i><span itemprop="title">Board index</span></a></span>

								</li>
		
					<li class="rightside responsive-search">
				<a href="./search.php" title="View the advanced search options" role="menuitem">
					<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">Search</span>
				</a>
			</li>
			</ul>

	</div>
</div>
	</div>

	
	<a id="start_here" class="anchor"></a>
	<div id="page-body" class="page-body" role="main">
		
		
<table id="example" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
       </tbody>
     </table>

			</div>


<div id="page-footer" class="page-footer" role="contentinfo">
	<div class="navbar" role="navigation">
	<div class="inner">

	<ul id="nav-footer" class="nav-footer linklist" role="menubar">
		<li class="breadcrumbs">
									<span class="crumb"><a href="./index.php" data-navbar-reference="index"><i class="icon fa-home fa-fw" aria-hidden="true"></i><span>Board index</span></a></span>					</li>
		
				<li class="rightside">All times are <span title="UTC">UTC</span></li>
							<li class="rightside">
				<a href="./ucp.php?mode=delete_cookies" data-ajax="true" data-refresh="true" role="menuitem">
					<i class="icon fa-trash fa-fw" aria-hidden="true"></i><span>Delete all board cookies</span>
				</a>
			</li>
							<li class="rightside" data-last-responsive="true">
					<a href="./memberlist.php" title="View complete list of members" role="menuitem">
						<i class="icon fa-group fa-fw" aria-hidden="true"></i><span>Members</span>
					</a>
				</li>
												<li class="rightside" data-last-responsive="true">
				<a href="./memberlist.php?mode=team" role="menuitem">
					<i class="icon fa-shield fa-fw" aria-hidden="true"></i><span>The team</span>
				</a>
			</li>
									<li class="rightside" data-last-responsive="true">
				<a href="./memberlist.php?mode=contactadmin" role="menuitem">
					<i class="icon fa-envelope fa-fw" aria-hidden="true"></i><span>Contact us</span>
				</a>
			</li>
			</ul>

	</div>
</div>

	<div class="copyright">
				Powered by <a href="https://www.phpbb.com/">phpBB</a>&reg; Forum Software &copy; phpBB Limited
								<br /><strong><a href="./adm/index.php?sid=4142974abb2f22866a8446716cab353f">Administration Control Panel</a></strong>	</div>

	<div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="AJAX error" data-ajax-error-text="Something went wrong when processing your request." data-ajax-error-text-abort="User aborted request." data-ajax-error-text-timeout="Your request timed out; please try again." data-ajax-error-text-parsererror="Something went wrong with the request and the server returned an invalid reply.">
		<div id="darken" class="darken">&nbsp;</div>
	</div>

	<div id="phpbb_alert" class="phpbb_alert" data-l-err="Error" data-l-timeout-processing-req="Request timed out.">
		<a href="#" class="alert_close">
			<i class="icon fa-times-circle fa-fw" aria-hidden="true"></i>
		</a>
		<h3 class="alert_title">&nbsp;</h3><p class="alert_text"></p>
	</div>
	<div id="phpbb_confirm" class="phpbb_alert">
		<a href="#" class="alert_close">
			<i class="icon fa-times-circle fa-fw" aria-hidden="true"></i>
		</a>
		<div class="alert_text"></div>
	</div>
</div>

</div>

<div>
	<a id="bottom" class="anchor" accesskey="z"></a>
	</div>




<script type="text/javascript" src="./assets/javascript/jquery.min.js?assets_version=40"></script>
<script type="text/javascript" src="./assets/javascript/core.js?assets_version=40"></script>







<script type="text/javascript" src="./styles/prosilver/template/forum_fn.js?assets_version=40"></script>
<script type="text/javascript" src="./styles/prosilver/template/ajax.js?assets_version=40"></script>



</body>
</html>
Last edited by RobiX on Mon Jan 29, 2018 10:18 am, edited 1 time in total.

RobiX
Registered User
Posts: 97
Joined: Thu Oct 05, 2017 9:59 am

Re: try to include .css and .js into own custom page (wanna try to install datatables)

Post by RobiX » Sun Jan 28, 2018 3:32 am

screenshot
Attachments
Snap1.jpg

RobiX
Registered User
Posts: 97
Joined: Thu Oct 05, 2017 9:59 am

Re: try to include .css and .js into own custom page (wanna try to install datatables)

Post by RobiX » Sun Jan 28, 2018 3:33 am

visual it looks a little bit better, nevertheless not sortable ...

Selective
Registered User
Posts: 213
Joined: Sat Apr 19, 2014 10:30 am

Re: try to include .css and .js into own custom page (wanna try to install datatables)

Post by Selective » Sun Jan 28, 2018 3:34 am

RobiX wrote:
Sun Jan 28, 2018 3:25 am
<div class="row yamm-content">
is above

something wrong with that?
Could be, it's only two rows above in the script.

CSS defines Classes, ID's, and Elements, but to see what they are being define as, you need to look at the css files

datatables.min.css
bootstrap3.3.7.css
yamm.css

Post Reply

Return to “phpBB Custom Coding”

Who is online

Users browsing this forum: geankevin, orynider and 1 guest