To use this website completely, it is necessary to store cookies on your computer.
 

* Navigator

Expand - Collapse

* Statistic

  • *Total Posts: 14939
  • *Total Topics: 2271
  • *Online Today: 8
  • *Most Online: 292
(2016 November 12, 09:37:31 am)

Full size Frontpage

Started by DirtRider, 2009 July 03, 06:16:45 am

previous topic - next topic

0 Members and 0 Guests are viewing this topic.

DirtRider

2009 July 03, 06:16:45 am
I am not sure if I am just missing it but for the first time I am trying the full size Frontpage option. However I notice when you do this you have no menus or links to navigate away from it to say your profile, forum and so on  ???
"The real question is not whether machines think but whether men do. "


antechinus

#1
2009 July 03, 11:47:44 am
Yep. Full size means full size. ;D I haven't played with it for a while but IIRC there is an option for a stripped down menu that is functional but not styled like the rest of the theme. I'll take another look at the settings.
Using Internet Explorer 6 on the internet is like urinating in a public swimming pool.
It's rude, there's no excuse for it, and anyone who does it should be ashamed of themselves.

DirtRider

#2
2009 July 03, 12:35:06 pm
Well I did not even think of looking at that as you know I am using Theme by DzinerStudio   ;D. I suppose you could make up a set using a html block at the top but I would like that to be my last option  :D
"The real question is not whether machines think but whether men do. "


antechinus

#3
2009 July 04, 12:28:49 am
It'd be a little hard to style for all themes too if you were running more than one, although it could be done.
Using Internet Explorer 6 on the internet is like urinating in a public swimming pool.
It's rude, there's no excuse for it, and anyone who does it should be ashamed of themselves.

antechinus

#4
2009 July 04, 12:42:39 am
Ok I had a look. The default html block that contains the "Welcome to PortaMX" stuff includes a basic menu so yes, you would need to run it in a block unless you code up a fixed menu across the top of the screen (which is actually something I've been leaning towards for SMF themes in general).

What is more naughty naughty Fel even used a table for the basic menu instead of using an unordered list! Shock! Horror! ;D
This is the source code for the default menu:

Code Select
<table style="margin: 0pt -2px 5px;" class="bordercolor">
<tbody>
  <tr>

<td nowrap="nowrap" class="titlebg"><a href="http://localhost/Simple_Portal_RC1/index.php?action=forum">Forum</a></td>
   
<td nowrap="nowrap" class="titlebg"><a href="http://localhost/Simple_Portal_RC1/index.php?action=admin">Admin</a></td>
   
<td nowrap="nowrap" class="titlebg"><a href="http://localhost/Simple_Portal_RC1/index.php?action=moderate">Moderate</a></td>
   
<td nowrap="nowrap" class="titlebg"><a href="http://localhost/Simple_Portal_RC1/index.php?action=profile">Profile</a></td>
   
<td nowrap="nowrap" class="titlebg"><a href="http://localhost/Simple_Portal_RC1/index.php?action=pm">My Messages</a></td>
   
<td nowrap="nowrap" class="titlebg"><a href="http://localhost/Simple_Portal_RC1/index.php?action=logout;bdc0fc542=29aec98b6780141c538970b118263569">Logout</a></td>

   
   <td width="70%" class="titlebg"> </td>
  </tr>
</tbody>
</table>


If you want that altered to match a particular DS theme it wouldn't be very hard to do. The only catch is that if you are running side blocks on the front page the menu will not be full width like a standard theme menu because the top blocks sit between the side blocks.
Using Internet Explorer 6 on the internet is like urinating in a public swimming pool.
It's rude, there's no excuse for it, and anyone who does it should be ashamed of themselves.

DirtRider

#5
2009 July 04, 11:33:10 am
Yes thinking about it if you are running multiple themes thing would get a bit sticky. I think I will just move away from the idea of a full page for now  ;D
"The real question is not whether machines think but whether men do. "


antechinus

#6
2009 July 04, 01:22:30 pm
Well it isn't that hard really. You'd code it with all the classes needed for the most complex menu and have css in each theme's style.css to make it match each theme. I mean I've done multi themes and that's pretty much how you tackle them. The simplest Dziner menus are Silent Wave and Mystic Jade (which are basically the same) and the others like Darkbreak and Overview just need an extra span in each button, which isn't a big deal. All the rest is just css dimensioning and colouring and image calls. So you could set up the full page with a frameless and headerless html block and whichever theme you were using it would look like the standard menu bar. :)

You could even have drop menus on it, just like a standard menu bar, and you could probably call the arrays for the menu from Sources/Subs.php with a bit of trickery. That might require a php block though.
Using Internet Explorer 6 on the internet is like urinating in a public swimming pool.
It's rude, there's no excuse for it, and anyone who does it should be ashamed of themselves.

DirtRider

#7
2009 July 05, 07:13:16 pm
 ;D This sound great but I think maybe it is a bit past my coding abilities  :-[ :'( :)
"The real question is not whether machines think but whether men do. "


antechinus

#8
2009 July 05, 11:00:17 pm
Well I might have a crack at it when I get time. It's actually a lot easier than it sounds. The trick would be to make sure that all themes are using the same class names for their standard toolbar menus. Usually Bik calls them topmenu, etc for all themes so they are probably ok anyway.

If they do match it becomes very easy, because since the front page menu uses the same class and id names as the standard toolbar menu it will automatically call the correct css for every theme. So this is a piece of cake, yes? No messing around required (or at least not very much). 

All you would need to do, once you have got the class names matching for the themes you want to use, is make a frameless and headerless html block at the top of the front page and throw in the menu code. Hey presto, instant front page menu styled for all your themes. :)
Using Internet Explorer 6 on the internet is like urinating in a public swimming pool.
It's rude, there's no excuse for it, and anyone who does it should be ashamed of themselves.

DirtRider

#9
2009 July 06, 06:38:04 am
 ;D :D Well you do seem to make it sound simple. I suppose if like myself are using all the same authors themes it should match up   O0 making the block would be teh simple thing to do it just the code that one need for the block that would have me flat  ;D
"The real question is not whether machines think but whether men do. "


feline

#10
2009 July 08, 01:22:36 pm
Up from next release, you can add a additional css file (called as frontpage.css) in each theme directory.
With this file, you can overwrite and/or expand the styles, they are defined in the style.css.
The frontpage.css is only loaded if it exist and you have a fullsize frontpage enabled.

If you need a menu on a fullsize frontpage, you can add a (new) headerblock (type php) in with you can call the thememenu from the currently theme.
Follow code then is shown as attached image:
Code Select
global $context;
$notShow = array('help', 'projects', 'search', 'profile', 'pm', 'calendar', 'mlist');
foreach($notShow as $key)
  unset($context['menu_buttons'][$key]);
echo '<div id="toolbar">', template_menu(), '</div>';


Fel


[attachment deleted by admin]
Many are stubborn in relation to the path, a few in relation to the target.

DirtRider

#11
2009 July 08, 07:45:53 pm
Thanks Fel that worked  O0
"The real question is not whether machines think but whether men do. "


antechinus

#12
2009 August 16, 02:40:46 pm
Just been trying something with this. I'm calling the entire menu using the following:

Code Select
global $context;
echo '<div id="toolbar">', template_menu(), '</div><br/>';


I'm using a custom theme which runs suckerfish drop menus. It works, but the toolbar background images don't show and the hover colour on the drop menu links doesn't show. Obviously it is calling some of the css but not all of it. Any ideas on this?

By the way this is on localhost so I can't link to it.

ETA: Do I need to define the css in frontpage.css? I just thought of that as I haven't used it before. I was thinking it would call the normal style.css but maybe it doesn't. This only happens on the custom theme. With the SMF default it works perfectly.
Using Internet Explorer 6 on the internet is like urinating in a public swimming pool.
It's rude, there's no excuse for it, and anyone who does it should be ashamed of themselves.

hartiberlin

#13
2009 August 16, 02:57:06 pm
Hi,
would be cool,
ifone could see a few demo pages,
where this is used.

Also is there anywhere a tutorial how to best design the
single pages with this online FCKeditor ?

Many thanks in advance.

Regards, Stefan.

feline

#14
2009 August 16, 02:58:07 pm
I don't know that theme .. on all the themes here, that works perfect.
But .. You can enable a short menu for the fullsize Frontpage in the Frontpage Setings:
Enable Menubar on full size Frontpage:
   
That is coded in the Frontpage.template.php like:
Code Select

// Insert a small menubar, if enabled
if(!empty($context['PortaMx']['settings']['frontpagemenu']))
{
$notShow = array('home', 'help', 'search', 'profile', 'pm', 'calendar', 'mlist');
foreach($notShow as $key)
unset($context['menu_buttons'][$key]);

echo '
<div class="tborder">
<div class="titlebg" style="padding:0.3em 1em;"><a href="'. $scripturl .'">'. $context['forum_name_html_safe'] .'</a></div>
</div>
<div id="toolbar">', template_menu() ,'</div>';
}


The frontpage.css it's only necessary if you will change the padding or color etc.
For SilentWave as example I use follow frontpage.css
Code Select

/**
* Frontpage styles
*/
body {
margin: 0;
padding: 0;
}
#mainarea {
background-color: #ffffff;
margin: 0px;
padding: 2px 2px;
}
#footerarea {
background-color: #ffffff;
margin: 0px;
}


If that all not work, I need the Theme you use, so I can test that.

Fel
Many are stubborn in relation to the path, a few in relation to the target.

feline

#15
2009 August 16, 03:01:14 pm
Quote from: hartiberlin ,  2009 August 16, 02:57:06 pm
Also is there anywhere a tutorial how to best design the
single pages with this online FCKeditor ?

You can use "templates" in FCK .. but for more info, you have look at the FCK homepage
http://www.fckeditor.net/

Fel
Many are stubborn in relation to the path, a few in relation to the target.

antechinus

#16
2009 August 16, 03:08:35 pm
Quote from: feline ,  2009 August 16, 02:58:07 pmI don't know that theme .. on all the themes here, that works perfect.
But .. You can enable a short menu for the fullsize Frontpage in the Frontpage Setings


Yes I tried that too. Same thing happens. It's strange because it is obviously calling some of the css classes (or the drop menus wouldn't work at all)  but a couple attributes seem to be missing. Ill try a couple of other themes and see what happens.
Using Internet Explorer 6 on the internet is like urinating in a public swimming pool.
It's rude, there's no excuse for it, and anyone who does it should be ashamed of themselves.

antechinus

#17
2009 August 16, 03:14:30 pm
I think I'll have to throw in a couple of link rel's for stylesheets. I just tested it with one of my multi themes and it doesn't like that at all. That has a master css with separate sheets for each variant and it makes a hell of a mess of the front page menu.

ETA: Oh one thing that might interest you: on my latest theme I set the anchor tags for the newsfader, info centre and quick reply expand/collapse so they include the whole header bars. I find this much better as it means I don't have to scroll to an icon. Just click the bar anywhere and it works.
Using Internet Explorer 6 on the internet is like urinating in a public swimming pool.
It's rude, there's no excuse for it, and anyone who does it should be ashamed of themselves.

feline

#18
2009 August 16, 03:48:00 pm
Quote from: antechinus ,  2009 August 16, 03:08:35 pm
Yes I tried that too. Same thing happens. It's strange because it is obviously calling some of the css classes (or the drop menus wouldn't work at all)  but a couple attributes seem to be missing. Ill try a couple of other themes and see what happens.

The Frontpage template is a "generic" template with the default css and javascript includes.
Naturally that this not work for ALL the themes they exist for SMF ...
If additional css or javascript neccesary, you have to add that in the header.

But .. if anybody find a better way to show a full size frontpage, let me known  ;)

Fel
Many are stubborn in relation to the path, a few in relation to the target.

feline

#19
2009 August 16, 03:51:47 pm
Quote from: antechinus ,  2009 August 16, 03:14:30 pm
ETA: Oh one thing that might interest you: on my latest theme I set the anchor tags for the newsfader, info centre and quick reply expand/collapse so they include the whole header bars. I find this much better as it means I don't have to scroll to an icon. Just click the bar anywhere and it works.

What you have added on the header?
You have a example for me .. or link to the theme?

Fel
Many are stubborn in relation to the path, a few in relation to the target.

feline

#20
2009 August 16, 09:27:31 pm
Quote from: hartiberlin ,  2009 August 16, 02:57:06 pm
Also is there anywhere a tutorial how to best design the
single pages with this online FCKeditor ?

You can use "templates" for the FCK editor.
You find the template file in the path fckeditor, the filename is fcktemplates.xml.
In this file, three templates are predefined.

You can add more templates, as example one, what I use for the "Story" series:
Code Select

<Template title="Table with 2 colums">
<Description>Some text at right and a left link block.</Description>
<Html>
<![CDATA[
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="80%" valign="top" align="left" style="padding: 8px;">
Maitable text
</td>
<td style="border-width: 0pt 0pt 0pt 1px; padding: 0px;" class="tborder">
<div style="width: 1px;"></div>
</td>
<td width="20%" valign="top" align="right" style="padding: 8px;">
<div style="font-size: 8pt; font-family: Verdana;"><em>Articles in the same category</em></div>
<hr />
<div style="font-size: 9pt; font-family: Tahoma; line-height: 160%;">
links here
</div>
</td>
</tr>
</table>
]]>
</Html>
</Template>


Fel
Many are stubborn in relation to the path, a few in relation to the target.

antechinus

#21
2009 August 16, 11:17:57 pm
Quote from: feline ,  2009 August 16, 03:48:00 pm
Quote from: antechinus ,  2009 August 16, 03:08:35 pm
Yes I tried that too. Same thing happens. It's strange because it is obviously calling some of the css classes (or the drop menus wouldn't work at all)  but a couple attributes seem to be missing. Ill try a couple of other themes and see what happens.

The Frontpage template is a "generic" template with the default css and javascript includes.
Naturally that this not work for ALL the themes they exist for SMF ...
If additional css or javascript neccesary, you have to add that in the header.

But .. if anybody find a better way to show a full size frontpage, let me known  ;)

Fel


Ok, that makes sense. I'll play around with it a bit.


Quote from: feline ,  2009 August 16, 03:51:47 pm
Quote from: antechinus ,  2009 August 16, 03:14:30 pm
ETA: Oh one thing that might interest you: on my latest theme I set the anchor tags for the newsfader, info centre and quick reply expand/collapse so they include the whole header bars. I find this much better as it means I don't have to scroll to an icon. Just click the bar anywhere and it works.

What you have added on the header?
You have a example for me .. or link to the theme?

Fel


Code is done like this:

Code Select
   <div class="marginbottom">
       <a href="#" onclick="smfNewsFadeToggle.toggle(); return false;">
          <object>
      <h3 id="newsfader" class="catbg headerpadding" align="center">
         ', $txt['news'], '
      </h3>
          </object>
      </a>   


Code Select
   <div class="clearfix" id="infocenterframe">
       <a href="#" onclick="infoHeader.toggle(); return false;">
           <object>
      <h3 class="catbg headerpadding" align="center">
         ',$txt['information'],'
      </h3>
          </object>
       </a>   


Code Select
<div id="quickreplybox">   
      <a href="javascript:oQuickReply.swap();">
          <object>
             <h3 class="catbg headerpadding" style="text-align: center;">
                  <img src="', $settings['images_url'], '/', $options['display_quick_reply'] == 2 ? 'blank' : 'blank', '.gif" alt="+" id="quickReplyExpand"/>', $txt['quick_reply'], '
              </h3>
         </object>
      </a>


Doing it that way means you don't need any icon if you don't want one. Obviously I just used blank.gif for the quick reply as it was the easiest way of sorting it without messing with the js too much. I have used the title attribute too sometimes instead of an icon, so it shows a tooltip "Collapse/expand" on hover.
Using Internet Explorer 6 on the internet is like urinating in a public swimming pool.
It's rude, there's no excuse for it, and anyone who does it should be ashamed of themselves.

antechinus

#22
2009 August 17, 10:34:33 am
Quote from: feline ,  2009 August 16, 03:48:00 pm
Quote from: antechinus ,  2009 August 16, 03:08:35 pm
Yes I tried that too. Same thing happens. It's strange because it is obviously calling some of the css classes (or the drop menus wouldn't work at all)  but a couple attributes seem to be missing. Ill try a couple of other themes and see what happens.

The Frontpage template is a "generic" template with the default css and javascript includes.
Naturally that this not work for ALL the themes they exist for SMF ...
If additional css or javascript neccesary, you have to add that in the header.

But .. if anybody find a better way to show a full size frontpage, let me known  ;)

Fel

Ok, I figured this out and it works now.

When using a multi theme that has all the dimensions and layout in the style.css and all the image calls and hex colours for each variant in a separate variant.css (style_whatever.css, style_whatever2.css,etc) you have to add a link rel to the style.css so the head looks like this:

Code Select
// The ?b4 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?rc1" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style', $context['theme_variant'], '.css?rc1" />
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/print.css?rc1" media="print" />';
Using Internet Explorer 6 on the internet is like urinating in a public swimming pool.
It's rude, there's no excuse for it, and anyone who does it should be ashamed of themselves.

hartiberlin

#23
2009 August 17, 02:42:15 pm
Please post some URLs for some demo pages.
I want to see, what one can do with it and how the templates look.
Many thanks.

cieplutki

#24
2016 January 12, 09:10:03 am
hi,
how to do it:
I want to add a menu to a full homepage,
frontpage.css where to put it
my code on php block:
Code Select
global $context, $settings, $options, $scripturl, $txt;
echo'
<ul class="nav navbar-nav">';
foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '" class="nv ', $button['sub_buttons'] ? 'dropdown ' : '', '', $button['active_button'] ? 'active' : '', '">
<a ', $button['sub_buttons'] ? 'class="dropdown-toggle" ' : '', 'href="', $button['sub_buttons'] ? '#' : $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '', $button['sub_buttons'] ? ' data-toggle="dropdown"' : '', '>
', $button['title'], '
', $button['sub_buttons'] ? '<span class="ca-dow"><i class="fa fa-caret-down"></i></span>' : '' ,'
</a>';

if (!empty($button['sub_buttons']))
{
echo '
<ul class="dropdown-menu dropnav" role="menu">';

foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li class="sub">
<a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
', $childbutton['title'] , '
</a>';
// 3rd level menus :)
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul>';
foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li>
<a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
<span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
</a>
</li>';

echo '
</ul>';
}
echo'
</li>';
}
echo '
</ul>';
}
echo '
</li>';

}
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/ext/bootstrap.min.css?fin20" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/font-awesome.css?fin20" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/ext/animate.css?fin20" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/theme.css?fin20" />';