Resposive or mobile friendly template

[freerk]

Sorry, the attached daflekkel.zip has an error
Can you send me a repacked file?

Freerk

See attachment.
I just changed the float of the former right column to float:left and removed the checks if the 2nd block has content, so the column is always shown.
On small screens, the left column is shown beyond the main content.
The sub menu needs some more styling of course.

I guess the same way responsive blue could be modified.

Generally spoken, a left column for showing the sub navigation is not particularly needed as all childpages are listed in the main navigation bar.

[applepie]

Code Select Expand

<?php if (!isset($page_id) OR $page_id==4) {....

!isset($page_id) means: it is the startpage
OR $page_id==4 means: its page 4, this is neccessary for the template-search. simply remove it.

if you want all pages look the same (and no special startpage) simply replace this with

Code Select Expand

<?php if ($page_id == 4000 ) {....

Ok, it works now. Thanks

[applepie]

Code Select Expand

<?php if (!isset($page_id) OR $page_id==4) {....

!isset($page_id) means: it is the startpage
OR $page_id==4 means: its page 4, this is neccessary for the template-search. simply remove it.

if you want all pages look the same (and no special startpage) simply replace this with

Code Select Expand

<?php if ($page_id == 4000 ) {....

I have done that and it still showing a different start page. Is there something to do with include frontteaser.php?? Code below:
<?php if ($page_id == 4000 )  {include('frontteaser.php');

[fischstäbchenbrenner]

/templates/daflekk/index.php

[applepie]

You are using dafleck or Sypiags?

I am using dafleck. Where do I find the code please?
Thanks

[fischstäbchenbrenner]

You are using dafleck or Sypiags?

Code Select Expand

<?php if (!isset($page_id) OR $page_id==4) {....

!isset($page_id) means: it is the startpage
OR $page_id==4 means: its page 4, this is neccessary for the template-search. simply remove it.

if you want all pages look the same (and no special startpage) simply replace this with

Code Select Expand

<?php if ($page_id == 4000 ) {....
(you wont have a page 4000, so no page is the startpage)

[applepie]

I am nearly there. One last question I hope. Why is my homepage layout different from the rest although I have assigned the same template. The homepage has 3 blocks showing the page titles and the header is missing. Any idea?

[instantflorian]

This should be possible by adding a background image to the submenu items, e.g.

Code Select Expand


ul#mobilesub li a:link, ul#mobilesub li a:visited {
  background-image:url(img/yourimage.png);
  background-repeat:no-repeat;
  background-position:left;
  padding-left:15px /* adjust this to the width of the image + some space */
}


[applepie]

That's great! Thanks. It works. One last question. I have an icon/iamge below my submenu links. How do I add the icon/image below? Is there an easy way round it?
Cheers

[instantflorian]

In the script.js, replace

Code Select Expand


function menuremove() {
mm = document.getElementById("mobile").style.display;
if ( mm == 'block') {
document.getElementById("mobile").style.display = 'none';
document.getElementById("mobilemenu").style.display = 'block';
}
}


with

Code Select Expand


function menuremove() {
mm = document.getElementById("mobile").style.display;
if ( mm == 'block') {
document.getElementById("mobile").style.display = 'none';
document.getElementById("mobilemenu").style.display = 'block';
}
subm = document.getElementById("mobilesub").style.display;
if ( subm == 'block') {
document.getElementById("mobilesub").style.display = 'none';
document.getElementById("mobilesubmenu").style.display = 'block';
}
}


Hope it works...
BR
-Florian.

[applepie]

I thought you just wanted to compare it with your existing template.

Hi, your codes work beautifully now. Except one last issue. I can see the menu for Submenu on the screen which is perfect. I clicked on the submenu and it opens up the links as expected. Perfect. The other issue I am encountering is that there is no way to collapse or close it. Any idea how I can collapse the links after?
Thanks for your help. I had to take a break from it all. Reason I haven't reply earlier. I was tearing my hair out and needed time to grow them back before I continue.

[applepie]

Hi, sorry i didn't realise that. I just looked at all the files and thought they are ready to install and tested out. It should have let me install the template. Will compare with the existing templates and hopefully will find a solution soon.  Yes, this is getting more and more weird.

[instantflorian]

I thought you just wanted to compare it with your existing template.
Sorry, you should not simply install it. The file I attached is the quick&dirty modified template with the sm2 call(s) which work for me and don't at your site.
I did not change the version number so actually it should have not been possible to install it.
This whole thing gets more and more weird.

[applepie]

Thanks very much. I have a problem here. I uploaded the template via the Add Ons > Templates like I normally do. The message return Upgraded successfully. But, when I went to the Modify Page Settings the template is not visible. 

[instantflorian]

*sigh*
See attachment.

[applepie]

Replace

Code Select Expand


show_menu2(0, SM2_ROOT+1, SM2_START, SM2_ALL, '<li class="[class]">[a][menu_title]</a></li>', '', '', '', '<ul id="mobilesub">');


I am having a big problem here. After replacing all the codes suggested my submenus not showing and the main menu stopped working on mobile. Can you kindly send me your files so I can test it on my site if the same problem occurs? Thank you for your time.

[instantflorian]

Replace

Code Select Expand


show_menu2(0, SM2_ROOT+1, SM2_START, SM2_ALL, '<li class="[class]">[a][menu_title]</a></li>', '', '', '', '');


with

Code Select Expand


show_menu2(0, SM2_ROOT+1, SM2_START, SM2_ALL, '<li class="[class]">[a][menu_title]</a></li>', '', '', '', '<ul id="mobilesub">');


[applepie]

I found everything you said until I came to point 3. My code for the child pages is different from yours. This is my problem. To get it to work the way I wanted I have used below instead of

Code Select Expand


show_menu2 call for $childpages, replace the last '' :
Beside that there is no '<ul id="mobilesub">' in my index.php page

Code Select Expand


$childpages = '';
ob_start();
show_menu2(0, SM2_ROOT+1, SM2_START, SM2_ALL, '<li class="[class]">[a][menu_title]</a></li>', '', '', '', '');
$childpages = ob_get_contents();
ob_end_clean();


[instantflorian]

I added that but it didn't work at first.

You're right, I did'nt read the CSS carefully and missed that there started the media query section already.

To your question about the responsibilty of the submenu: it's not as simple at it might seem.

1) edit the script.js of the template. After

Code Select Expand


function showmenu() {
mm = document.getElementById("mobile").style.display;
if ( mm == 'block') {
document.getElementById("mobile").style.display = 'none';
document.getElementById("mobilemenu").style.display = 'block';
} else {
document.getElementById("mobile").style.display = 'block';
document.getElementById("mobilemenu").style.display = 'none';
}
}


add the following code:

Code Select Expand


function showsubmenu() {
mm = document.getElementById("mobilesub").style.display;
if ( mm == 'block') {
document.getElementById("mobilesub").style.display = 'none';
document.getElementById("mobilesubmenu").style.display = 'block';
} else {
document.getElementById("mobilesub").style.display = 'block';
document.getElementById("mobilesubmenu").style.display = 'none';
}
}


2) edit the style.css.
Find 2x

Code Select Expand

a#mobilemenu {
and change it to

Code Select Expand

a#mobilemenu, a#mobilesubmenu {

Find

Code Select Expand

a#mobilemenu span {display:block; padding: 10px 15px ; font-weight: bold;}
and change it to

Code Select Expand

a#mobilemenu span, a#mobilesubmenu span {display:block; padding: 10px 15px ; font-weight: bold;}

Find

Code Select Expand

ul#mobile {display:none;}
and change it to

Code Select Expand

ul#mobile, ul#mobilesub {display:none;}

3) edit the index.php.

In the show_menu2 call for $childpages, replace the last '' (pair of inverted commas) in the round brackets with

Code Select Expand

'<ul id="mobilesub">'
(including the inverted commas!)

Above the

Code Select Expand


<?php 
echo $childpages; 
echo $page_content_2; ?>

add

Code Select Expand


<a id="mobilesubmenu" href="javascript:showsubmenu();"><span>Submenu</span></a>


so it looks like

Code Select Expand


<a id="mobilesubmenu" href="javascript:showsubmenu();"><span>Submenu</span></a>
<?php 
echo $childpages; 
echo $page_content_2; ?>


Maybe there's some more fine tuning necessary, but this should work.

[applepie]

Code Select Expand


.leftbox  li {
  list-style-type:none;
}


Thanks for that. Very helpful for me to know what to look for. I added that but it didn't work at first. So I added it to line 43 and it works. My other problem I am encountering is that the submenu is not resposive. It shows straight under the main menu and then my page content directly below. How can I make them like the main menu. I want it to say submenu on mobile instead of showing a long list of my submenu. This has been really challenging. I wouldn't have gone this far without the input from you guys. I raise my hat to all who contributed and helped me in this journey. Hope someone can help me with this last huddle.
Thanks.

[instantflorian]

In the style.css add quite far down, just above

Code Select Expand


/* ================= (...and some more of these) */
/* Smaller Screens */


the following code

Code Select Expand


.leftbox  li {
  list-style-type:none;
}


[applepie]

How does your site structure looks like?
Is page #19 in the root or ab sub page of another page?
Do you use different menues?
Which WB version do you use? If it is very, very old, there might have been changes to the sm2 module (which might explain why your existing code works and the new one doesn't).

Hi, I got it working now using below:

$childpages = '';   
   ob_start();
   show_menu2(0, SM2_ROOT+1, SM2_START, SM2_ALL, '<li class="[class]">[a][menu_title]</a></li>', '', '', '', '');   
   $childpages = ob_get_contents();   
   ob_end_clean();   

The only thing is that all my submenus have bullet points which I do not want. Can you tell me how to remove them. 
Thanks

[applepie]

Hi, the version may be an issue. It is a fairly old version 2.7. Could this be the problem? The present site works perfectly but it is not responsive. I am trying to update the template only without going through too much trouble.
Thanks.

[instantflorian]

No idea what's wrong, sorry. It's exactly the same code as in my test website, where it is working like (I guess) it should.
How does your site structure looks like?
Is page #19 in the root or ab sub page of another page?
Do you use different menues?
Which WB version do you use? If it is very, very old, there might have been changes to the sm2 module (which might explain why your existing code works and the new one doesn't).

[applepie]

Hi, thanks for these. I tried DarkVioer's suggestion and my page came out blank. Tried instantflorian's codes and only the main horizontal menu showing, not the submenus. Here is my index file. I can't understand what is going on.