WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: applepie on April 29, 2015, 04:28:46 PM
-
I am looking for a mobile friendly template. Is there one available? My site design is nice looking when I first designed it but now it so ugly on mobile. It is all over the place and look terrible. Suggestion and help please. Thanks
-
Here are some really nice free responsive templates: http://WebsiteBaker.at/wb-templates/
-
Here are some really nice free responsive templates: http://WebsiteBaker.at/wb-templates/
Hi, are you referring to this template as seen or I can get some from this site?
Thanks
-
On a desktop you should see a sidebar on the right hand side, there you can search for templates.
Or here are the top downloads for this month: http://WebsiteBaker.at/wb-templates/search/top30-downloads.html (NOT ALL ARE RESPONSIVE!)
-
Here are all Responsive Templates:
http://www.WebsiteBaker.at/wb/responsive-templates.html
-
Thank you guys. That was very helpful. I will at them. Are the templates restricted to wb version. My wb version is rather old.
-
http://WebsiteBaker.at/wb-templates/search/top30-downloads.html
Is this particular template responsive? I like the left column. I would like to add submenu to it. The submenu needs to appear on all pages. How can I do that? How will it shows on mobile screen if I do?
This venture proved to be more challenge than I realised.
-
Hi,
the template repository shows its pages in the last template you personally tested, so nobody else knows which template you mean. Please tell us the name of the template.
-
Hi,
the template repository shows its pages in the last template you personally tested, so nobody else knows which template you mean. Please tell us the name of the template.
Oops, it is the responive blue and daflekk. Particularly the daflekk.
Thanks
-
Particularly the daflekk. http://WebsiteBaker.at/wb-templates/example.html
Thanks
-
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.
-
Generally spoken, a left column for showing the sub navigation is not particularly needed as all childpages are listed in the main navigation bar.
Thanks for taking the time to fix this. Greatly appreciated. I think what I needed is the sub-menus showing on all the pages on the left. Your template is not showing at the moment. I don't want showing from the main menu. How can I get it showing on all the pages? Cheers
-
Have a look at the index.php of the template, at line 91ff. you'll find two show_menu calls.
Refer to Tutorial link removed 404 to find out how to change the sm2 calls to show only the root elements in the main navigation and always the child elements in the left column.
-
Have a look at the index.php of the template, at line 91ff. you'll find two show_menu calls.
Hi again, I spent last few hours trying to work this out. I have used show_menu2(0, SM2_ROOT+1, SM2_START, SM2_ALL for the childpages and my result show:
[a][menu_title]
[a][menu_title]
[a][menu_title]
[a][menu_title]
[a][menu_title]
[a][menu_title]
Any idea where went wrong? :?
-
Looks for me like an error with the ' signs in the SM2 call.
-
Looks for me like an error with the ' signs in the SM2 call.
It still doesn't make sense to me. Do you mind have a look and let me know where I have gone wrong please? My code at present below.
/*Men?s*/
ob_start();
show_menu2(1, SM2_ROOT, SM2_ALL, SM2_ALL, '<li class="[class]"><a href="[url]" class="[class]"><span>[menu_title]</span></a>', "</li>", '<ul>', '<li class="ulend"></li></ul>', true, '<ul id="mobile" class="nav">');
$topmenu = ob_get_contents();
ob_end_clean();
$childpages = '';
ob_start();
show_menu2(0, 19, SM2_ALL, SM2_ALL, '', '<li class="[class]">[a][menu_title]</a></li>', '', '', '', '');
$childpages = ob_get_contents();
ob_end_clean();
?>
-
Your sm2 calls are wrong. You added an page id at the 2nd position, so the other parameters are not at the right place any more. The order and position of the parameters are very important.
When modifying and testing, it might be easier to use the "long call" with the variable names, so you see at once where to change what:
<?php
show_menu2(
$aMenu = 0,
$aStart = SM2_ROOT,
$aMaxLevel = SM2_CURR+1,
$aOptions = SM2_TRIM,
$aItemOpen = '[li][a][menu_title]</a>',
$aItemClose = '</li>',
$aMenuOpen = '[ul]',
$aMenuClose = '</ul>',
$aTopItemOpen = false,
$aTopMenuOpen = false
)
So in your case sth. like this
<?php
show_menu2(
$aMenu = 0,
$aStart = 19,
$aMaxLevel = SM2_ALL,
$aOptions = SM2_ALL,
$aItemOpen = '<li class="[class]">[a][menu_title]</a></li>',
$aItemClose = '',
$aMenuOpen = '',
$aMenuClose = '',
$aTopItemOpen = false,
$aTopMenuOpen = false
)
Furthermore, it usually doesn't make sense to hardcode the page id for the start of a submenu into the template. In your code (if it would be working), you would see the childpages of page 19 on every other page too. I'm not sure if it is that what you wanted to reach.
The menu configuration is probably the most complicated point of building a WB template.
You will find more information and typical menu calls here in the forum (http://forum.WebsiteBaker.org/index.php/topic,23004.0/topicseen.html) (german)
Edit:
See also here (http://forum.WebsiteBaker.org/index.php/topic,11381.0.html)
-
Furthermore, it usually doesn't make sense to hardcode the page id for the start of a submenu into the template. In your code (if it would be working), you would see the childpages of page 19 on every other page too. I'm not sure if it is that what you wanted to reach.
The menu configuration is probably the most complicated point of building a WB template.
You will find more information and typical menu calls here in the forum (http://forum.WebsiteBaker.org/index.php/topic,23004.0/topicseen.html) (german)
Hi, the codes works fine on my old template. Yes, that's correct. I want all the child pages showing on all my pages. I am trying to implement the same thing on the template daflekk or responsive-blue but it doesn't work on them.
Sorry, I can't read German :(
-
I have attached an image to explain what I am trying to achieve. The submenu or childpages showing on all pages. Can anyone help please? Tried the suggestions and still not working. I am not an expert in this and can't find my head round it. Thanks.
-
try this .. maybe it helps..
<?php
// create main menue
$sMainNavi = show_menu2(
1,
SM2_ROOT,
SM2_START + 1,
SM2_ALL|SM2_PRETTY|SM2_CURRTREE|SM2_BUFFER,
'<li class="[class]"><a href="[url]" class="[class]" title="">[if(class==menu-current && level>1){&#10144; }][menu_title]</a>',
'</li>',
'<ul class="[class]">',
'</ul>',
'<li class="[class]"><a href="[url]" class="[class]" title="">[menu_title]</a>',
'<ul class="[class]">'
);
// create sub menue title
$sSubNaviTitle = show_menu2(
1,
SM2_ROOT,
SM2_START,
SM2_TRIM|SM2_BUFFER,
'[if(class = menu-current || class = menu-parent){[menu_title]}]',
'',
'',
'',
'',
''
);
// remove possible comments and whitespaces from result
$sSubNaviTitle = trim(preg_replace('/<\!--.*?-->/siu', '', $subMenuTitle));
// create main menue sub
$sSubNavi = show_menu2(
1, SM2_ROOT+1, SM2_CURR+1, SM2_SIBLING|SM2_CURRTREE|SM2_PRETTY|SM2_BUFFER,
'[li][ac][if(class==menu-current){&#10144; }][menu_title]</a>',
'</li>',
'<ul>',
'</ul>',
'',
''
);
// remove possible comments and whitespaces from result
$sSubNavi = trim(preg_replace('/<\!--.*?-->/siu', '', $sSubNavi));
// show all
echo '<div>'.$mainNavi.'</div>';
// [...] output something others
if ($sSubNavi) { // show submenu only if sub items exists
echo '<div>'.$sSubNaviTitle.'</div>';
echo '<div>'.$sSubNavi.'</div>';
}
Manuela
-
The following finally should do the trick. It shows in the left column permanently all child items of page 19.
/*Menüs*/
ob_start();
show_menu2(
$aMenu = 0,
$aStart = SM2_ROOT,
$aMaxLevel = SM2_START,
$aOptions = SM2_ALL,
$aItemOpen = '<li class="[class]"><a href="[url]" class="[class]"><span>[menu_title]</span></a>',
$aItemClose = '</li>',
$aMenuOpen = '<ul>',
$aMenuClose = '<li class="ulend"></li></ul>',
$aTopItemOpen = true,
$aTopMenuOpen = '<ul id="mobile" class="nav">'
);
$topmenu = ob_get_contents();
ob_end_clean();
$childpages = '';
ob_start();
show_menu2(0,19, SM2_ALL, SM2_ALL, '<li class="[class]">[a][menu_title]</a></li>', '', '', '', '');
$childpages = ob_get_contents();
ob_end_clean();
In the 2nd menu call it's important that there's no " ,'' " after the 2nd SM2_ALL! Otherwise you well get the wrong "[a] [menu]" output. I've tested it.
You should maybe change the line
<div id="leftboxdesktop" class="leftbox desktops_only"><div class="inner">
to
<div id="leftboxdesktop" class="leftbox"><div class="inner">
otherwise the left column is not displayed on mobile devices.
-
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.
-
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).
-
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.
-
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
-
In the style.css add quite far down, just above
/* ================= (...and some more of these) */
/* Smaller Screens */
the following code
.leftbox li {
list-style-type:none;
}
-
.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.
-
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
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:
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
a#mobilemenu {and change it to
a#mobilemenu, a#mobilesubmenu {
Find
a#mobilemenu span {display:block; padding: 10px 15px ; font-weight: bold;}and change it to
a#mobilemenu span, a#mobilesubmenu span {display:block; padding: 10px 15px ; font-weight: bold;}
Find
ul#mobile {display:none;}and change it to
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
'<ul id="mobilesub">'(including the inverted commas!)
Above the
<?php
echo $childpages;
echo $page_content_2; ?>
add
<a id="mobilesubmenu" href="javascript:showsubmenu();"><span>Submenu</span></a>
so it looks like
<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.
-
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
show_menu2 call for $childpages, replace the last '' : Beside that there is no '<ul id="mobilesub">' in my index.php page
$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();
-
Replace
show_menu2(0, SM2_ROOT+1, SM2_START, SM2_ALL, '<li class="[class]">[a][menu_title]</a></li>', '', '', '', '');
with
show_menu2(0, SM2_ROOT+1, SM2_START, SM2_ALL, '<li class="[class]">[a][menu_title]</a></li>', '', '', '', '<ul id="mobilesub">');
-
Replace
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.
-
*sigh*
See attachment.
-
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. :?
-
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.
-
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.
-
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.
-
In the script.js, replace
function menuremove() {
mm = document.getElementById("mobile").style.display;
if ( mm == 'block') {
document.getElementById("mobile").style.display = 'none';
document.getElementById("mobilemenu").style.display = 'block';
}
}
with
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.
-
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
-
This should be possible by adding a background image to the submenu items, e.g.
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 */
}
-
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?
-
You are using dafleck or Sypiags?
<?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
<?php if ($page_id == 4000 ) {....(you wont have a page 4000, so no page is the startpage)
-
You are using dafleck or Sypiags?
I am using dafleck. Where do I find the code please?
Thanks
-
/templates/daflekk/index.php
-
<?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
<?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');
-
<?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
<?php if ($page_id == 4000 ) {....
Ok, it works now. Thanks
-
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.