ElkArte Community

It seems we at our car forum need a start page, just as you have it here. Is there an explanation anywhere how to create such a page? I didn't found any using the search form with "start page".

I think I will need some help creating and designing this page. Your help is much appreciated!  O:-)

You can either create the page as you like it in HTML, then use Elk's SSI to bring in components like a login area and menu bars to recreate the look of the forum template pages. Or, you can create an addon which handles a front page from inside Elkarte. If you're going with the latter, take a look at SimplePortal and work from there :)

Hm, sounds both absolutely impossible for me.  :D  :-[

Look at SMF . Can be adapted to determine ElkArte.

http://wiki.simplemachines.org/smf/Add_a_custom_action

and ElkArte http://www.elkarte.net/community/index.php?topic=2494.0

You can have a look at the one used on this very site at:
https://github.com/elkarte/elkarte.net/tree/master/elk
home.php is the php file that generates the page, then there is home.css with the styles. You can ignore tx_contrib.php it just provides the transifex contributors.

With hook I know myself not like. Therefore, this approach.

Create the following files
root/sources/controllers/MyPage.controller.php

<?php

/**
 * Handles the moving of topics from board to board
 *
 * @name      ElkArte Forum
 * @copyright ElkArte Forum contributors
 * @license   BSD http://opensource.org/licenses/BSD-3-Clause
 *
 * This software is a derived product, based on:
 *
 * Simple Machines Forum (SMF)
 * copyright:    2011 Simple Machines (http://www.simplemachines.org)
 * license:        BSD, See included LICENSE.TXT for terms and conditions.
 *
 * @version 1.0
 *
 */

if (!defined('ELK'))
    die('No access...');

class MyPage_Controller extends Action_Controller
{
    /**
     * Default action handler: just help.
     *
     * @see Action_Controller::action_index()
     */
    public function action_index()
    {
        $this->action_mypage();
    }

    /**
     * Prepares the help page.
     * Uses Help template and Manual language file.
     * It is accessed by ?action=help.
     */
    public function action_mypage()
    {
        global $txt, $context, $language, $scripturl;

        loadTemplate('MyPage');
        loadLanguage('Addons');

        // Build the link tree.
        $context['linktree'][] = array(
            'url' => $scripturl . '?action=mypage',
            'name' => $txt['mypage_page'],
        );

        // Lastly, set up some template stuff.
        $context['page_title'] = $txt['mypage_page'];
    }
}

root/themes/default/MyPage.template.php

<?php

/**
 * @name      ElkArte Forum
 * @copyright ElkArte Forum contributors
 * @license   BSD http://opensource.org/licenses/BSD-3-Clause
 *
 * This software is a derived product, based on:
 *
 * Simple Machines Forum (SMF)
 * copyright:    2011 Simple Machines (http://www.simplemachines.org)
 * license:      BSD, See included LICENSE.TXT for terms and conditions.
 *
 * @version 1.0
 *
 */

function template_main()
{
    global $context, $txt;

// your content   
        echo '
            <div class="wrapper">
                <h2>', $txt['mypage_content'], '</h2>
            </div>';
}

open root/sources/SiteDispatcher.class.php
find

			'movetopic2' => array('MoveTopic.controller.php', 'MoveTopic_Controller', 'action_movetopic2'),

add after

			'mypage' => array('MyPage.controller.php', 'MyPage_Controller', 'action_mypage'),

open root/sources/Subs.php
find

			'register' => array(
				'title' => $txt['register'],
				'href' => $scripturl . '?action=register',
				'data-icon' => '',
				'show' => $user_info['is_guest'] && $context['can_register'],
			),

add after

            
			'mypage' => array(
				'title' => $txt['mypage_page'],
				'href' => $scripturl . '?action=mypage',
				'data-icon' => '',
				'show' => true,
			),

open root/themes/default/language/english/Addons.english.php
add

//MyPage
$txt['mypage_page'] = 'My Page';
$txt['mypage_content'] = 'My content';

'data-icon' => '',  More icons => http://fortawesome.github.io/Font-Awesome/cheatsheet/

Thank you.  :)

I'm currently working on it (http://forum-alternative-antriebe.de/home.php). Can anyone help me what I have to to so the "Die Piloten" button in the menu (on the left) is in "clicked/active state" when I visit the start page home.php? Must I create an action for this site?

Since further .css classes are still imported.

home.php at line 14

$context['html_headers'] = '
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" />
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

The home.css causes only the button in the mobile view is hidden.  To create a button, clam up in my last post the instructions for Subs.php and the Info link for more icons. The data-icons are active in mobile view.

I already have a button. I changed it's target to the start page (home.php), but it isn't active when I'm visiting the start page. A misunderstanding perhaps?

If you have integrated the button as described above, this would have to be set as active.

Have it tested me. It works.

My code of the button:

        'base' => array(
            'title' => $txt['home_btn'],
            'href' => $parsed['scheme'] . '://' . $parsed['host'] . (!empty($parsed['port']) ? ':' . $parsed['port'] : '') . '/elk105',
            'data-icon' => '',
            'show' => true,
            'action_hook' => true,
        ),

Is the solution von => http://support.elkarte-hilfe.de/index.php/topic,147.msg777.html#msg777

Oops. Maybe I forgot anything. I will check the files later.  O:-)

This with rounded corners is my goal.

look at here, is a sample => http://codepen.io/Cheesetoast/pen/KFAaq. And look of my post with the Info of .css => http://www.elkarte.net/community/index.php?topic=2846.msg19484#msg19484

and here a sample => http://code.makery.ch/library/more-html-css/de/website-layout/

Button set to active:

your Button (sample)

            'mypage' => array(
                'title' => $txt['mypage_page'],
                'href' => $scripturl . '?action=mypage',
                'data-icon' => '',
                'show' => true,
            ),

open root/source/Subs.php
find

	elseif ($context['current_action'] == 'moderate' && $context['allow_admin'])
		$current_action = 'admin';

add after

	if ($context['current_action'] == 'mypage')
		$current_action = 'mypage'; 

I found the bootstrap panels! Wow, bootstrap is fantastic! Thanks for this tip!  :)

The action doesn't work, @wintstar

When I use exactly your code the page isn't found (home.php) and the forum index is shown, but the button works and is active then.

When I change the target in Subs.php from $scripturl . '?action=mypage', to the URL, the page is shown, but the button is not longer active then.

What a mess.  :-[

your page must be http://.../index.php?action=start

example: http://forum-alternative-antriebe.de/index.php?action=start

@Jorin this is a sample. You have to adjust the parameters. Please display your code of the button in Subs.php

mypage = set to your page (home, start ...)

I have a conflict with the style forum

That's why I prefer my solution => http://www.elkarte.net/community/index.php?topic=2846.msg19475#msg19475.  The recommended by  emanuele (http://www.elkarte.net/community/index.php?topic=2846.msg19474#msg19474) do not match the files the current version of ElkArte.

@inter , my english is also not the best ;)

The problems with the recommended method of emanuele with home.php is that not all are involved .css and scripts. Added to this is the 2 other .css (font-awesome.css andbootstrap.min.css) files are included. font-awesome.css is already involved with the original Theme. Look in the folder root/themes/default/webfontes. In order to eliminate these bugs, must home.php be adjusted. This means that for me this method to intigrieren an additional page not in question. Watch my demo at http://elkarte.scaricare.de/. These things I have achieved with my method. Because such bugs are excluded.

Guide my method completely in German => http://support.elkarte-hilfe.de/index.php/topic,152.0.html

I'm note entirely sure it works as expected (short on time), but the attached addon^[1] should create a fully fledged home page completely integrated into the forum. Mostly the same as the one here at elk.net, but not spread over different pieces (here we have one file for the home, one for the button, etc.).

The template goes in HomePage.template.php (you didn't guess for sure! :P), if you want a particular css loaded, you can put it into the theme folder and load it from HomePage.controller.php with loadCSSFile, what else?
Dunno.

Oh, yes: it may be very buggy! :P

ETA: I didn't put a page title...
Not too difficult, in HomePage.controller.php, add to the function action_homepage something like:

$context['page_title'] = 'this is the title';

Of course I did. Didn't forget to edit the text I copied, sorry. In my files my action is called the same as my file name.  :-[

// Eigene Button für die Community.
 'start' => array(
 'title' => 'Community',
 'data-icon' => '',
 'href' => $scripturl . '?action=start',
 'show' => true,
 'sub_buttons' => array(
 'shoping' => array(
 'title' => 'Shops',
 'show' => true,
 'sub_buttons' => array(
 'shop1' => array(
 'title' => 'Amazon-Partnerlink',
 'href' => 'http://www.amazon.de/?&tag=diehybrpilo-21',
 'target' => '_blank',
 'show' => true,
 ),
 'shop2' => array(
 'title' => 'Shirtinator-Shop',
 'href' => 'http://hybrid-piloten.shirtinator.net/',
 'target' => '_blank',
 'show' => true,
 ),
 ),
 ),
 'stromtankstellen' => array(
 'title' => 'Stromtankstellen',
 'href' => 'http://elektro-piloten.de/map.html',
 'target' => '_blank',
 'show' => true,
 ),
 ),
 ),

elseif ($context['current_action'] == 'moderate' && $context['allow_admin'])
 $current_action = 'admin';
 if ($context['current_action'] == 'start')
 $current_action = 'start';

Also I changed the filename of the two new files from home.php and home.css to start.php and start.css so it is the same as my action name.

But: a click on the community titled button leads not to my start page but  to the forum index. It seems something is missing which tells ElkArte which URL it has to open when clicking on the start page button (called "community" for those of you who will test it here (http://forum-alternative-antriebe.de)).

Doesn't work, @wintstar. I made all the changes you posted here (http://support.elkarte-hilfe.de/index.php/topic,152.msg781/topicseen.html?PHPSESSID=bd67490bddb080ff9ad0be7db011cb66#msg781), and all I get now is this:

QuoteFatal error: Call to undefined method start_Controller::action_start() in /www/htdocs/xyz/hp_elkarte/sources/controllers/start.controller.php on line 32

Line 32 is:

public function action_index()
{
$this->action_start();
}

My action is named "start", I changed this in all your code (I hope).  :-\

@Jorin

Spoiler (click to show/hide)

Okay, guys, thank you very much for all your hints and guides. But...  :-[

I made all steps backwards.  O:-)  I will explain why...

First my forum wasn't shown for tonight. Maybe, please don't be offended, any code listed here had an error in it, or I did a mistake while editing the files, I don't know. Normally I am very concentrated and precise when I edit code. I fixed it now, but I now (with emanuele's solution of only two new files) have the same problem as before:

I can access my start page, but the button isn't active.

That's my one and only problem. I wish there would be a solution without editing source files too much, because I think that then I have to be careful with every ElkArte update and maybe I have to make these changes then again. I don't want to.

Is there any way to get the button working without making changes to source files?

Please be patient with me. When you need 10 minutes to read and understand code, I need an hour for it.  :-X

O_o

It may be I used the 1.0.5 code and there may be a new hook around...
I have to check again the code.

Would be great!

hmm...

I just installed the addon at http://www.elkarte.it/community/ and, as far as I can see, the "home" button is properly highlighted... *headscratch*.

Can you go to admin > maintenance > forum maintenance > integration hooks and check if you see the following entries?

integrate_action_frontpage    Function: integrate_action_frontpage
Included file: /.../sources/HomePage.integrate.php

integrate_actions    Function: integrate_actions
Included file: /.../sources/HomePage.integrate.php

integrate_current_action    Function: integrate_current_action
Included file: /.../sources/HomePage.integrate.php

integrate_menu_buttons    Function: integrate_menu_buttons
Included file: /.../sources/HomePage.integrate.php

Okay, I installed your addon. But I have some problems with it and need help.

1. Where can I add submenu entries to the new button? I did not found the button in Subs.php.  :o  :-[

2. How do I include my own CSS file? I opened HomePage.controller.php and am now very confused. And it must include Bootstrap and FontAwesome. I made my template with these two services but my design is not shown anymore (because the links to their CSS service is missing).

3. I now have two footers.  :o

4. The first entry of my navigation bar leads to the home page (URL is index.php), but should lead to the forum index in my opinion.

See the start site after addon installation (http://forum-alternative-antriebe.de/) please.

But hey: the button works now, yippie!  :D

Edit: I can provide FTP and admin access if anyone would be so great to help me out.  :(

I found this part in GoogleMapIntegration.php, which seems to be the right place to start with building a how-to how to add menu buttons:

/**
 * integrate_menu_buttons
 *
 * - Menu Button hook, called from subs.php
 * - used to add top menu buttons
 *
 * @param mixed[] $buttons
 * @param int $menu_count
 */
function imb_googlemap(&$buttons, &$menu_count)
{
	global $txt, $scripturl, $modSettings;

	loadlanguage('GoogleMap');

	// Where do we want to place our button (new menu layout, this needs to be redone)
	$insert_after = empty($modSettings['googleMap_ButtonLocation']) ? 'memberlist' : $modSettings['googleMap_ButtonLocation'];
	$insert_after = 'memberlist';

	// Define the new menu item(s), this will call for GoogleMap.controller
	$new_menu = array(
		'GoogleMap' => array(
			'title' => $txt['googleMap'],
			'href' => $scripturl . '?action=GoogleMap',
			'show' => !empty($modSettings['googleMap_Enable']) && allowedTo('googleMap_view'),
		)
	);

	$buttons['home']['sub_buttons'] = elk_array_insert($buttons['home']['sub_buttons'], $insert_after, $new_menu, 'after');
}

Seems there only must be changes made if the location of the button is different. I can't write code so I don't want to write an example how-to for this, but maybe someone of you can?

I'll have a look this evening (sorry, but daytime is becoming terribly busy... *rolleyes*).

No problem!  :)

hmm...
So you mean you want to have a button that points for example to:
http://www.elkarte.net/community/index.php?topic=2846.0
and when inside that topic, the button should be highlighted?

Is there a live version to have a look to?

Yep, that could be an interesting project!
Would a board do as a quick solution to start having this kind of informations written down?

Exactly.


It is: http://forum-alternative-antriebe.de/start.php


I would start with moderated boards, as @Flavio93Zena mentioned, too.

I have to think about that one.

Any help with this?  O:-)

Sorry, I've lost that one... :-[

Is it on one of the sites in your signature?

http://forum-alternative-antriebe.de/start.php

Change /themes/default/css/_light/index_light.css

[data-icon]::before {
    border: 3px solid #666;
    border-radius: 4px;
    color: #666;
    content: attr(data-icon);
    display: inline-block;
    font-family: "FontAwesome";
    font-size: 2em;
    height: 1.15em;
    line-height: 1.2em;
    margin: 2px;
    padding: 1px;
    text-align: center;
    width: 1.15em;
}

to

[data-icon]::before {
    border: 3px solid #666;
    border-radius: 4px;
    color: #666;
    content: attr(data-icon);
    display: inline-block;
    font-family: "FontAwesome";
    font-size: 2em;
    line-height: 1em;
    margin: 2px;
    padding: 1px;
    text-align: center;
    width: 1.45em;
}

Thanks, but now I have this in normal desktop view.

That's crazy :o  I'll look at that in more detail today.

I'd suggest to always try to use custom.css instead of editing the original files, both because it's easier on upgrades and because it's much easier to spot what you changed and where. ;)

Try with adding:

@media screen and (max-width: 50em) {
	[data-icon]:before {
		height: 1.55em;
		width: 1.55em;
	}
}

To your custom.css.

Deactivate I the bootstrap.css,Is everything ok. I had this problem with my startpage (http://elkarte.scaricare.de/) also. I have removed the link to https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css (https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css) and have downloaded the Bootstrap css (http://getbootstrap.com/getting-started/). Then I looked out only the code I needed. This was corrected the error. Here's my startpage .css. Below comes the part of Bootstrap.

.text-green {
    color: green;
    float: right;
    padding: 0 0 10px 10px;
    margin-top: -15px;
}
.text-orange {
    color: orange;
    float: right;
    padding: 0 0 10px 10px;
    margin-top: -15px;
}
.text-red {
    color: red;
    float: right;
    padding: 0 0 10px 10px;
    margin-top: -15px;
}
#contribs {
    padding: 1em 0;
}
.text-blue {
    color: #5dcbe7;
    text-shadow: 1px 1px 1px #777;
    float: right;
    padding: 0 0 10px 10px;
    margin-top: -05px;
}
.text-gold {
    color: #DAA520;
    float: right;
    padding: 0 0 10px 10px;
    margin-top: -05px;
}
.column {
    display: inline-table;
    width: 25%;
    margin-top: 1em;
    padding: 0 15px;
    color: #ffffff;
    font-size: .9em;
    white-space:nowrap;
    line-height: 1.5;
}
.column .fa {
    color: #222;
}
.fa-group {
    padding-top: 5px;
}
.fa-15x {
    font-size: 1.5em !important;
}
#news {
    display: none;
}
#ext {
    list-style: none;
    margin: 0;
    clear: both;
}
.column h4, .toppad h4 {
    color: #222;
    font-weight: bold;
    font-size: 1.5em;
    margin: 0 0 10px 0;
    border-bottom: 2px dotted #222;
}
.toppad {
    padding-top: 1em;
}
.column a:link, .column a:visited {
    color: #222;
    display: block;
}
#git_commits > ul  > li {
    margin: 5px 0;
}

/*!
 * Bootstrap v3.3.5 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
h2,
.h2 {
  font-size: 20px;
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.clearfix:before,
.clearfix:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.panel-body:before,
.panel-body:after {
  display: table;
  content: " ";
}
.clearfix:after,
.container:after,
.container-fluid:after,
.row:after,
.pager:after,
.panel-body:after {
  clear: both;
}
.col-md-1, .col-md-4, .col-md-7, .col-md-8, .col-md-10 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
  padding: 15px;
}
.panel-default {
    border-color: #ddd;
}
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}
.lead {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}
.img-thumbnail {
  display: inline-block;
  max-width: 100%;
  height: auto;
  padding: 4px;
  margin-right: 5px; 
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}
/* This one does up to 540 screens. */
@media screen and (max-width: 33.750em) {
   .fa-15x {
    font-size: 1.0em;
    line-height: 0.75em;
    vertical-align: -15%;
    margin-top: 0.005em;
  }     
  h2, .h2 {
    font-size: 25px;
  }
  .column {
    font-size: 0.85em;
  }            
}
@media (min-width: 768px) {
  .lead {
    font-size: 21px;
  }
}
@media (min-width: 992px) {
  .col-md-1, .col-md-4, .col-md-7, .col-md-8, .col-md-10 {
    float: left;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }  
}

Great, thanks! Problem solved!  :)