Author Topic: Resposive or mobile friendly template  (Read 10346 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:
Only registered users can see contents. Please click here to Register or Login.

the following code

Code:
Only registered users can see contents. Please click here to Register or Login.

Offline applepie

  • Posts: 431
Re: Resposive or mobile friendly template
« Reply #26 on: May 19, 2015, 08:40:51 AM »
Code:
Only registered users can see contents. Please click here to Register or Login.
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:
Only registered users can see contents. Please click here to Register or Login.
add the following code:
Code:
Only registered users can see contents. Please click here to Register or Login.
2) edit the style.css.
Find 2x
Code:
Only registered users can see contents. Please click here to Register or Login.and change it to
Code:
Only registered users can see contents. Please click here to Register or Login.
Find
Code:
Only registered users can see contents. Please click here to Register or Login.and change it to
Code:
Only registered users can see contents. Please click here to Register or Login.
Find
Code:
Only registered users can see contents. Please click here to Register or Login.and change it to
Code:
Only registered users can see contents. Please click here to Register or Login.
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:
Only registered users can see contents. Please click here to Register or Login.(including the inverted commas!)

Above the
Code:
Only registered users can see contents. Please click here to Register or Login.add
Code:
Only registered users can see contents. Please click here to Register or Login.
so it looks like

Code:
Only registered users can see contents. Please click here to Register or Login.
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:
Only registered users can see contents. Please click here to Register or Login.Beside that there is no '<ul id="mobilesub">' in my index.php page
Code:
Only registered users can see contents. Please click here to Register or Login.
« 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:
Only registered users can see contents. Please click here to Register or Login.
with

Code:
Only registered users can see contents. Please click here to Register or Login.

Offline applepie

  • Posts: 431
Re: Resposive or mobile friendly template
« Reply #30 on: May 20, 2015, 01:26:42 PM »
Replace
Code:
Only registered users can see contents. Please click here to Register or Login.

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:
Only registered users can see contents. Please click here to Register or Login.
with
Code:
Only registered users can see contents. Please click here to Register or Login.
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:
Only registered users can see contents. Please click here to Register or Login.

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:
Only registered users can see contents. Please click here to Register or Login.
!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:
Only registered users can see contents. Please click here to Register or Login.(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:
Only registered users can see contents. Please click here to Register or Login.
!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:
Only registered users can see contents. Please click here to Register or Login.

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:
Only registered users can see contents. Please click here to Register or Login.
!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:
Only registered users can see contents. Please click here to Register or Login.

Ok, it works now. Thanks

Offline freerk

  • Posts: 31
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