Author Topic: Resposive or mobile friendly template  (Read 11477 times)

instantflorian

  • Guest
Re: Resposive or mobile friendly template
« Reply #25 on: May 18, 2015, 07:40:29 PM »
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;
}

Offline applepie

  • Posts: 431
Re: Resposive or mobile friendly template
« Reply #26 on: May 19, 2015, 08:40:51 AM »
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

  • Guest
Re: Resposive or mobile friendly template
« Reply #27 on: May 19, 2015, 11:53:24 AM »
Quote
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.

Offline applepie

  • Posts: 431
Re: Resposive or mobile friendly template
« Reply #28 on: May 19, 2015, 01:32:02 PM »
Quote

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();
« Last Edit: May 19, 2015, 01:37:41 PM by applepie »

instantflorian

  • Guest
Re: Resposive or mobile friendly template
« Reply #29 on: May 19, 2015, 01:43:23 PM »
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">');

Offline applepie

  • Posts: 431
Re: Resposive or mobile friendly template
« Reply #30 on: May 20, 2015, 01:26:42 PM »
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

  • Guest
Re: Resposive or mobile friendly template
« Reply #31 on: May 20, 2015, 01:41:06 PM »
*sigh*
See attachment.

Offline applepie

  • Posts: 431
Re: Resposive or mobile friendly template
« Reply #32 on: May 20, 2015, 02:41:33 PM »
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

  • Guest
Re: Resposive or mobile friendly template
« Reply #33 on: May 20, 2015, 03:04:56 PM »
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.

Offline applepie

  • Posts: 431
Re: Resposive or mobile friendly template
« Reply #34 on: May 20, 2015, 03:22:10 PM »
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.

Offline applepie

  • Posts: 431
Re: Resposive or mobile friendly template
« Reply #35 on: May 28, 2015, 07:38:39 PM »
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

  • Guest
Re: Resposive or mobile friendly template
« Reply #36 on: May 28, 2015, 07:59:39 PM »
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.

Offline applepie

  • Posts: 431
Re: Resposive or mobile friendly template
« Reply #37 on: May 29, 2015, 12:21:25 AM »
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

  • Guest
Re: Resposive or mobile friendly template
« Reply #38 on: May 29, 2015, 08:43:22 AM »
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 */
}

Offline applepie

  • Posts: 431
Re: Resposive or mobile friendly template
« Reply #39 on: July 07, 2015, 01:03:44 AM »
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

  • Guest
Re: Resposive or mobile friendly template
« Reply #40 on: July 07, 2015, 09:19:03 AM »
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)


Offline applepie

  • Posts: 431
Re: Resposive or mobile friendly template
« Reply #41 on: July 07, 2015, 07:11:11 PM »
You are using dafleck or Sypiags?

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

fischstäbchenbrenner

  • Guest
Re: Resposive or mobile friendly template
« Reply #42 on: July 08, 2015, 10:21:24 AM »
/templates/daflekk/index.php

Offline applepie

  • Posts: 431
Re: Resposive or mobile friendly template
« Reply #43 on: July 15, 2015, 10:28:02 AM »

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');
« Last Edit: July 15, 2015, 10:47:17 AM by applepie »

Offline applepie

  • Posts: 431
Re: Resposive or mobile friendly template
« Reply #44 on: July 16, 2015, 11:50:33 PM »

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

Offline freerk

  • Posts: 32
Re: Resposive or mobile friendly template
« Reply #45 on: August 03, 2016, 01:35:40 PM »
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.

 

postern-length