Resposive or mobile friendly template

[instantflorian]

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

Code: [Select]

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


the following code

Code: [Select]

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


[apple]

Code: [Select]

.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]

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]

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]

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]

a#mobilemenu {and change it to

Code: [Select]

a#mobilemenu, a#mobilesubmenu {
Find

Code: [Select]

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

Code: [Select]

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

Code: [Select]

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

Code: [Select]

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]

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

Above the

Code: [Select]

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

Code: [Select]

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

so it looks like

Code: [Select]

<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.

[apple]

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]

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

Code: [Select]

$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]

Replace

Code: [Select]

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

with

Code: [Select]

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


[apple]

Replace

Code: [Select]

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]

*sigh*
See attachment.

[apple]

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]

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.

[apple]

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.

[apple]

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.

[instantflorian]

In the script.js, replace

Code: [Select]

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]

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.

[apple]

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]

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

Code: [Select]

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 */
}


[apple]

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?

[fischstäbchenbrenner]

You are using dafleck or Sypiags?

Code: [Select]

<?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]

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

[apple]

You are using dafleck or Sypiags?

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

[fischstäbchenbrenner]

/templates/daflekk/index.php

[apple]

Code: [Select]

<?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]

<?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');

[apple]

Code: [Select]

<?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]

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

Ok, it works now. Thanks

[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.