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/
Second question: How did you made the backgrounds? These rounded lines around the text? I tried to understand where these come from, but I can't find the classes in your css file. :-\
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=startexample: 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
@wintstar, see in attach
@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 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)).
Have you included the file in the system? Look at http://support.elkarte-hilfe.de/index.php/topic,152.0.html Point 3.
I didn't made point 1 also. All I did was changing Subs.php the way I posted above.
I am really no programmer. Maybe I should start again with your linked manual (big thanks for that!) and make all points there?
@Jorin add in Start_Controller class: public function action_start()
{
global $txt, $context, $language, $scripturl;
loadCSSFile('start.css');
loadTemplate('Start');
loadLanguage('Addons');
// Build the link tree.
$context['linktree'][] = array(
'url' => $scripturl . '?action=start',
'name' => 'my start page',
);
$context['page_title'] = 'my start page';
}
add in Start.template.php:function template_start()
{
global $context, $scripturl;
echo 'Hello! Start page.';
}
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. :(
Okay, now I worked on it and I have a functioning start site. No CSS problems any more, all is looking good. The only question is now (and hopefully this will be my last in this thread):
What's the easiest way to create a menu button? Simply edit Subs.php like I used to? Or is there any way else, a better way, without editing source files like Subs.php? If I remember right someone mentioned hooks anywhere, but I can't find it.
Perfect. For mobile view you have hidden the button for the startpage. I once made a screenshot of it, make with WP Lumia 535.
Arrrrgh!!
Sorry, I read it this morning on one computer, I thought I answered and marked it as read, but instead I left it open there and I missed it!! :-[ :-[ :-[
I'm very sorry... :-[
No problem. :)
Maybe you can help me with my last two problems?
1. I need some menu buttons (some of them need to be active when opening the linked page as they are pages or posts inside the baord).
2. On mobile devices my menu icons on my start page are too small (but their background seems to be okay). I think I need to add the CSS code for the mobile buttons into my start.css used for this page. I tried already but without success.
Maybe it is a good idea to create a kind of knowledge base on ElkArte.net? I had something familiar back with SMFPortal.de. There could be "articles" describing some often asked questions and their solutions, such as "adding a menu button" or "how to install ElkArte". Just the basics. So such solutions will be easy to find for us all and you don't have to answer them again and again.
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.
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! :)