WebsiteBaker Community Forum

WebsiteBaker Support (2.13.x) => General Help & Support => Topic started by: applepie on September 13, 2023, 02:56:48 PM

Title: Template question 1
Post by: applepie on September 13, 2023, 02:56:48 PM
I like the style on the Revero header (image attached) but I dont seem to able to adapt to other template. Below is my codes. Is there something else missing I should add?

On the index.php file under footer:

<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>

In the CSS file:

.back-to-top {
  position: fixed;
  display: none;
  background: #febd01; /*#50d8af;*/
  color: #fff;
  padding: 6px 12px 9px 12px;
  font-size: 16px;
  border-radius: 2px;
  right: 15px;
  bottom: 15px;
  transition: background 0.5s;
}

.back-to-top:focus {
  background: #febd01; /*#50d8af;*/
  color: #fff;
  outline: none;
}

.back-to-top:hover {
  background: #febd01; /*0c2e8a;*/
  color: #fff;
}

Title: Re: Template question 1
Post by: dbs on September 13, 2023, 04:15:26 PM
Your attachement schows no back to top. only social icons.
What do you want?
Title: Re: Template question 1
Post by: sternchen8875 on September 13, 2023, 04:25:37 PM
the code show's a link to the top of the page and use a icofont-icon, here a simple arrow like this (https://i.gyazo.com/e603ee73cf7b2a1703abfb3897c583b9.png).
This Icon-Font use a minified css-file and a font-file or, in a different variant, only a minified (s)css-File. Do you use it also in your template? Take a look to this "How to use (https://icofont.com/how-to-use)" and search in your template for a link to the needed files like this

Code: [Select]
<link rel="stylesheet" href="your_project/templates/xxxxx/icofont/css/icofont.min.css">
Title: Re: Template question 1
Post by: applepie on September 13, 2023, 06:28:49 PM
Your attachement schows no back to top. only social icons.
What do you want?

Sorry, gave the wrong link.
The back to top icon/link on the footer of my index.php file

<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
Title: Re: Template question 1
Post by: crnogorac081 on September 14, 2023, 07:58:56 AM
From the template where you found this code, search for .js file. Search and copy the the code where "back-to-top" is called
Title: Re: Template question 2
Post by: applepie on September 28, 2023, 02:10:20 AM
Why is the fontawesome for the new twitter x icon does not show? From what I understand the code is
<i class="fa-brands fa-x-twitter"></i>
Nothing came up at all when I used the code above. Anyone has the answer?
Title: Re: Template question 1
Post by: applepie on October 03, 2023, 09:04:13 AM
I found the answer for fa fa x-Twitter. The font in the codes need updating. Can someone tell me how do I add menu links at the footer and with own layout id?
Thanks
Title: Re: Template question 1
Post by: sternchen8875 on October 03, 2023, 10:10:28 AM
https://help.WebsiteBaker.org/en/designer-guide/multiple-menus.php
Title: Re: Template question 1
Post by: applepie on October 05, 2023, 02:05:44 PM
https://help.WebsiteBaker.org/en/designer-guide/multiple-menus.php
Maybe I am not making myself clear. I would like the same menu on the header and footer but different CSS id. To create $menu[2] = 'Foot-Navigation'; it would mean my footer menu will have different page. On the admin I can only assign my menu to top or footer. Is that correct?
Title: Re: Template question 1
Post by: sternchen8875 on October 05, 2023, 03:06:57 PM
i understand...

a simple example.....
you've a div like this around the menu-call

Code: [Select]
<div class="topmenu">

<?php //show_menu(); ?>
            <?php show_menu2(1,SM2_ROOTSM2_CURR+1SM2_TRIM,&#39;<li><a href="[url]" class="[class]" title="[page_title]">[menu_title]</a>&#39;, &#39;</li>&#39;,
                                            
&#39;<ul>&#39;, &#39;</ul>&#39;,&#39;&#39;,&#39;&#39;, 0);
                            
?>

</div>

copy this menu-code and use a new & different id or class like this for the footermenu

Code: [Select]
<div class="footermenu">

<?php //show_menu(); ?>
            <?php show_menu2(1,SM2_ROOTSM2_CURR+1SM2_TRIM,&#39;<li><a href="[url]" class="[class]" title="[page_title]">[menu_title]</a>&#39;, &#39;</li>&#39;,
                                            
&#39;<ul>&#39;, &#39;</ul>&#39;,&#39;&#39;,&#39;&#39;, 0);
                            
?>

</div>

if you use a extented version of the menu code like this

Code: [Select]
<div class="w3-right w3-hide-small" id="nav" style="margin-right:20px!important;">
            <?php
            
            $sItemOpen 
= &#39;<li class="lev[level]  [if(level==0){toplevel w3-border-right w3-large }else{w3-border-0}] w3-hide-small [class]"><a href="[url]" class="[class]"><span>[menu_title]</span></a>&#39;;
                
echo show_menu2(
                    
$aMenu          1,
                    
$aStart         SM2_ROOT,
                    
$aMaxLevel      SM2_ALL,
                    
$aOptions       SM2_ALL|SM2_PRETTY|SM2_BUFFER,
                    
$aItemOpen      $sItemOpen,
                    
$aItemClose     = &#39;</li>&#39;,
                    
$aMenuOpen      = &#39;<ul style="max-width:250px;">&#39;,
                    
$aMenuClose     = &#39;</ul>&#39;,
                    
$aTopItemOpen   false,
                    
$aTopMenuOpen   = &#39;<ul id="header_menu" class="menu w3-white">&#39;
                
);
            
?>

        </div>

see the ID in the last line ($aTopMenuOpen). Use there a different ID instead of ul id="header_menu"

and in you CSS, you need two definitions, for every class or ID
Title: Re: Template question 1
Post by: applepie on October 05, 2023, 07:23:50 PM
I will give it a go. Thank you.
Title: Re: Template question 1
Post by: applepie on October 07, 2023, 01:53:25 AM
Hi, I copied and paste the code below to index.php file on the footer

<div class="footermenu">
   
         <?php //show_menu(); ?>
            <?php show_menu2(1,SM2_ROOT, SM2_CURR+1, SM2_TRIM,&#39;<li><a href="[url]" class="[class]" title="[page_title]">[menu_title]</a>&#39;, &#39;</li>&#39;,
                                            &#39;<ul>&#39;, &#39;</ul>&#39;,&#39;&#39;,&#39;&#39;, 0);
                            ?>
</div>


and created CSS

}
.footermenu {
  overflow: hidden;
  background-color: none;
  color: #333;
}

etc...

The message below appeared on my index.php page. I am not sure what went wrong. Please help. Thanks.

There was an uncatched exception
syntax error, unexpected token "&", expecting ")"
in line (338) of (/templates/revero/index.php):


Title: Re: Template question 1
Post by: ruebenwurzel on October 07, 2023, 06:48:47 AM
try it with:

Code: [Select]
<div class="footermenu">
      <?php //show_menu(); ?>
          <?php show_menu2(1,SM2_ROOTSM2_CURR+1SM2_TRIM,&#39;<li><a href="[url]" class="[class]" title="[page_title]">[menu_title]</a>&#39;,&#39;</li>&#39;,&#39;<ul>&#39;, &#39;</ul>&#39;,&#39;&#39;,&#39;&#39;, 0);
     
?>

</div>

&#39; is the HTML-Entity for an Apostroph '
Title: Re: Template question 1
Post by: ruebenwurzel on October 07, 2023, 06:55:25 AM
I see just, that the forums Software seems always to convert the Apostroph to an HTML-Entity in Code-View. So here the code as text:

*****
<div class="footermenu">
      <?php //show_menu(); ?>
          <?php show_menu2(1,SM2_ROOT, SM2_CURR+1, SM2_TRIM,'<li><a href="[url]" class="[class]" title="[page_title]">[menu_title]</a>','</li>','<ul>', '</ul>','','', 0);
     ?>
</div>
****
Title: Re: Template question 1
Post by: sternchen8875 on October 07, 2023, 12:54:30 PM
sorry for the trouble and thanks for the "correct" code   (Y)
Title: Re: Template question 1
Post by: applepie on October 08, 2023, 09:43:33 PM
My top menu I gave the id  ".nav-menu" and the footer id is ".footermenu" But somehow my footer menu is still reading from the top menu CSS. What have I done wrong?

Top Menu
.nav-menu,
.nav-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}

etc...

Footer Menu
.footermenu {
  overflow: hidden;
  color: #febd01;
}

etc...
Title: Re: Template question 1
Post by: ruebenwurzel on October 09, 2023, 10:07:01 AM
Hello,

your menu calls uses both the same classes.

Quote
CLASS           ATTACHED TO
    ------------    -------------------------------------------------------
    menu-top        First menu tag only
    menu-parent     Every parent menu item of the current page.
    menu-current    Only the menu item for the current page.
    menu-sibling    Every sibling of the current page.
    menu-child      Every sub-menu of the current page.
    menu-expand     Every menu item with children.
    menu-first      First item in any menu or sub-menu.
    menu-last       Last item in any menu or sub-menu.

look at the doku in modules/show_menu2/DOC

Please check your .css if this classes are configured. If yes, both menu calls use this classes. If you wanna have different classes for the menues you can configure the show_menu2 call to use your own classes. You also can adapt your css files. f.e.

Code: [Select]
.class .class {}
.nav-menu .menu-current {color: #ffffff;}
.footermenu .menu-current {color: #000000;}
Title: Re: Template question 1
Post by: applepie on October 10, 2023, 01:27:06 AM
Sorry, I dont understand what you mean by using the same class. The ID are different, so how can it be reading from the same class. I am sure I am not understanding it correctly.

The CSS I generated and attached here is intended to generate basic horizontal footer links with submenus. I know it's wrong, but I'm not sure where it has gone wrong.

Thanks.
Title: Re: Template question 1
Post by: crnogorac081 on October 10, 2023, 01:40:29 AM
Hi, is there a possibility to post your project online ? There are several free hosting peoviders. Its hard to help like this
Title: Re: Template question 1
Post by: ruebenwurzel on October 10, 2023, 10:08:00 AM
Sorry, I dont understand what you mean by using the same class. The ID are different, so how can it be reading from the same class. I am sure I am not understanding it correctly.

The CSS I generated and attached here is intended to generate basic horizontal footer links with submenus. I know it's wrong, but I'm not sure where it has gone wrong.

Thanks.

You use classes and no ID's in your css. Classes start with '.', ID's with '#'
https://www.w3schools.com/html/html_id.asp
Title: Re: Template question 1
Post by: applepie on October 12, 2023, 02:04:11 AM
You use classes and no ID's in your css. Classes start with '.', ID's with '#'
https://www.w3schools.com/html/html_id.asp

Thank you, got it fixed now.