Knowledge Base support case for Likno Web Tooltips Builder, abstracted and stripped of all user’s private info.


Initial Email From:
Joe 
Initial Email Subject:   Border width
Support Case Month: November 2013

Hi,

In Web Tooltips Builder, is there a way I can decrease the border width below 5 pixels on example 01? I used that example to build my tooltips.

Thanks!

Reply From: Likno Customer Support

Hello,

You can decrease the width of the tooltip's border by clicking on Style Editor Tab > Tooltip CSS > Border and decrease the border size to what is best for your design.

jquery tooltip border width

Then, you need to re-compile your tooltip project and re-upload the produced files to your server.

Thank you!

Kind Regards,  

Aggelos Tsakonas
www.likno.com
Powerful javascript menus (CSS menus/drop-down menus/sliding menus), web trees, buttons, tabs, modals, tooltips, accordions, scrollers, designs for your websites!

Reply From: Joe

Thanks so much for your help.
Joe

 

Tags: , , , ,

 

Knowledge Base support case for AllWebMenus, abstracted and stripped of all user’s private info.


Initial Email From:
Todd
Initial Email Subject:  Buttons with same (i.e. equal) width
Support Case Month: July 2013

Greetings. 
How am I capable of making all of the buttons in my menu to be the same, equal width?  I cannot seem to find a way to do this.

Thanks!
Todd

Reply From: Likno Customer Support

Hello Todd,

The property for what you want to achieve is Uniform Items.

Click on Menu Type and then check Uniform Items.

Then all the items will have the same width according the biggest width item in your menu.

uniform menu items

Let me know if you need more information.

Thank you!

Kind Regards, 
Aggelos Tsakonas
www.likno.com
Powerful javascript menus (CSS menus/drop-down menus/sliding menus), web trees, buttons, tabs, modals, tooltips, accordions, scrollers, designs for your websites!

Reply From: Todd

Superb!  Thank you so much!  Smile

 

Tags: , , , , , ,

 

Knowledge Base support case for AllWebMenus Pro, abstracted and stripped of all user’s private info.


Initial Email From:
Fred
Initial Email Subject: all web menus pro
Support Case Month: July 2013

Sir/Madam:

I downloaded AllWebMenusPro and having been previewing it. I am not currently a customer. I do have a couple of technical questions that would facilitate my preview:

1)    How do I get rid of the + on the menu item when there is a submenu?

2)    Is it possible for the menu items to have a different width than the submenu groups? For example, I might have a short menu name (i.e., Reports) and a submenu item might have a long name (i.e., Custom Member Reports). It seems that the menu item's with is set to the width of the largest submenu item. This makes the layout of the menu look weird (if the menu items are left justified.

Thank you for your response,

Fred

Reply From: Likno Customer Support

Hello Fred,

First, thank you for your interest in our Likno products.

1) This is where you choose this (for each submenu level):

menu has submenu image property

2) Please click the "Menu Type" button. I believe that you want to remove the "Uniform Items" checkbox.

menu type uniform menu items

Thank you!

Regards, 
Aggelos Tsakonas
Likno Customer Support
www.likno.com
Powerful javascript menus (CSS menus/drop-down menus/sliding menus), web trees, buttons, tabs, modals, tooltips, accordions, scrollers, designs for your websites!

 

Tags: , , , , , , ,

 

 

In this article we will see how we can change the Default Drop-Down (Horizontal and Vertical) menus from JavaScript to CSS menus. Then, we will see how to compile them and insert both of them in a page.

Step 1: We open the AllwebMenus, we create a new project and we select (Default Drop-Down) as the menu theme for the first window that appears.

SNAGHTML4942d9c

Then, we save the menu project and let's give it the name HorizontalMenu for example. You can give whatever name you want.

Step 2: We select the "Populate menu inside your page through UL/LI items" and as the Menu Genre we select "CSS menu (light, 508/WCAG)"

image

Step 3: We need to set minimum width/height values for the menu items in order for the CSS to work. In a CSS version of the menu we cannot have auto width/height.

Click on Main Items Style, then Size and set (for this example) at least 127px width and at least 30px height. In your projects you could set the width/height values that best fit your design.

image

Step 4: Click on Compile Menu. On the window that appears on Folder and Files, we select the Site_Root folder and we change the Compiled menu name to Custom and we set HorizontalMenu.js.

image

 

Let's create the Vertical Menu now.

Step 1: We open the AllwebMenus, we create a new project and we select (Default Drop-Down)[v] as the menu theme for the first window that appears.

SNAGHTML4ad239e

Then, we save the menu project and let's give it the name VerticalMenu for example. You can give whatever name you want.

Step 2: We select the "Populate menu inside your page through UL/LI items" and as the Menu Genre we select "CSS menu (light, 508/WCAG)" (same as in the HorizontalMenu).

Step 3: We need to set minimum width/height values for the menu items in order for the CSS to work. In a CSS version of the menu we cannot have auto width/height.

Click on Main Items Style, then Size and set (for this example) at least 127px width and at least 30px height. In your projects you could set the width/height values that best fit your design.

Step 4: Click on Compile Menu. On the window that appears on Folder and Files, we select the Site_Root folder and we change the Compiled menu name to Custom and we set VerticalMenu.js.

image

 

After that we can create the HMTL page in which we want both of the menus to appear.

The basic structure of our page could initially be:

<!DOCTYPE html>
<html>
<head>
<title>CSS menus</title>
</head>

<body>
</body>
</html>

and we are going to give it the name CSSmenus.html

Then, we need to go back to our AllWebMenus projects and Link the menus to the page.

First, we go to HorizontalMenu.awm and we click on Link Menu, we select the html file(s), in this example the CSSmenus.html, we click on right arrows to select it and finally we click on Link.

image

We do the same process for the VerticalMenu.awm

In the next step we need to add the UL/LI structure for our menus in the CSSmenus.html page (as in a CSS menu we need to insert the ul/li structure in the page).

So, we go back to HorizontalMenu.awm and we click on Settings as shown in the following screenshot. Then, we click on "OR <UL><LI> structure based on your current project's structure" tab, we select all the structure and we copy it. We go to our html page and we paste that structure.

image

We do the same step for the VerticalMenu.awm.

Last step but not least is to set the correct positioning for our menus.

I would suggest to select the Menu Positioning relative to an element. So, we click on Menu Positioning, we select Relative to an Element and we can leave the Default ID. We copy that value in order to paste it in the page in an element we are going to create.

After that, we need to re-compile the project, just click Compile.

image

Then, we go to the HTML page and we create the element with the ID we copied. The element could look like :
<div id="awmAnchor-HorizontalMenu"> &nbsp; </div>
and we place it before the UL/LI structure for the horizontal menu.

Then, we do the same process for the vertical menu and the element in the page could look like:
<div id="awmAnchor-VerticalMenu"> &nbsp; </div>

The final result in our page will be:

image

and the code is:

<!DOCTYPE html>
<html>
<head>
<title>CSS menus</title>
<!-- ******** BEGIN ALLWEBMENUS CODE FOR HorizontalMenu (CSS MENU)******** -->
<link href="HorizontalMenu.css" rel="stylesheet" type="text/css">
<script charset="UTF-8" src="HorizontalMenu.js" type="text/javascript"></script>
<!-- ******** END ALLWEBMENUS CODE FOR HorizontalMenu (CSS MENU)******** -->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR VerticalMenu (CSS MENU)******** -->
<link href="VerticalMenu.css" rel="stylesheet" type="text/css">
<script charset="UTF-8" src="VerticalMenu.js" type="text/javascript"></script>
<!-- ******** END ALLWEBMENUS CODE FOR VerticalMenu (CSS MENU)******** -->
</head>

<body>

<div id="awmAnchor-HorizontalMenu"> &nbsp; </div>
<ul id="awmULLI-HorizontalMenu" style="display:none;">
  <li><a href="#">Main Item 1</a></li>
  <li><a href="#">Main Item 2</a>
    <ul>
      <li><a href="#">Sub Item 1</a></li>
      <li><a href="#">Sub Item 2</a>
        <ul>
          <li><a href="#">Sub Item 4</a></li>
          <li><a href="#">Sub Item 5</a></li>
          <li><a href="#">Sub Item 6</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Item 3</a></li>
    </ul>
  </li>
  <li><a href="#">Main Item 3</a></li>
</ul>

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<div id="awmAnchor-VerticalMenu"> &nbsp; </div>
<ul id="awmULLI-VerticalMenu" style="display:none;">
  <li><a href="#">Main Item 1</a></li>
  <li><a href="#">Main Item 2</a>
    <ul>
      <li><a href="#">Sub Item 1</a></li>
      <li><a href="#">Sub Item 2</a>
        <ul>
          <li><a href="#">Sub Item 4</a></li>
          <li><a href="#">Sub Item 5</a></li>
          <li><a href="#">Sub Item 6</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Item 3</a></li>
    </ul>
  </li>
  <li><a href="#">Main Item 3</a></li>
</ul>
</body>
</html>

When we are done we need to upload to our server the following:

image

Which are the HTML page containing the menus, the CSS files and JS files produced after we compiled the 2 projects and the awmdata folder.

 

Tags: , , , , , , , , , ,

 

Knowledge Base support case for Likno Web Modal Windows Builder,  abstracted and stripped of all user’s private info.


Initial Email From:
User
Initial Email Subject: Different height/width modal window 
Support Case Month: August 2013

Hi,

I have a modal window project and I need to open the modal window in different width/height each time. How can I do that with your new data-lwmw-width and data-lwmw-height attributes?

Thanks

Reply From: Likno Customer Support

Hello,

You can call (open) the modal window in different width/height as:

<a href="#" target="Modal_Window_1" data-lwmw-width="500px" data-lwmw-height="40%">Open Modal Window (500px width)</a>

and you can have another element that opens the same modal window in different dimensions.

<a href="#" target="Modal_Window_1" data-lwmw-width="auto" data-lwmw-height="auto">Open Modal Window (auto)</a>

and so on, you can use different width/height values each time you call the modal window.

The above links will open the modal window with a width of 500px and height of 40% in the first case and with auto width and auto height in the second case.

or if you use an ID or a Class to trigger the modal window

<span id="Modal_Window_1" data-lwmw-width="500px" data-lwmw-height="40%">Open Modal Window (500px width)</span>

<p id="Modal_Window_1" data-lwmw-width="auto" data-lwmw-height="auto">Open Modal Window (auto)</p>

<span class="Modal_Window_1" data-lwmw-width="500px" data-lwmw-height="40%">Open Modal Window (500px width)</span>

<p class="Modal_Window_1" data-lwmw-width="auto" data-lwmw-height="auto">Open Modal Window (auto)</p>

You can also use TD, DIV, IMG, INPUT to trigger the modal window.

For the data-lwmw-width and data-lwmw-height you can have any value you want as long it is px or % or you can have it as auto.

Thank you!

Best Regards,
Aggelos Tsakonas
Likno Customer Support
www.likno.com
Powerful javascript menus (CSS menus/drop-down menus/sliding menus), web trees, buttons, tabs, modals, tooltips, accordions, scrollers, designs for your websites!

 

Tags: , , , , , , ,

 


© 2009-2013 Likno Blog – Drop-Down Menus, Javascript Menus, CSS Menus, jQuery Scrollers/Sliders, Modal Windows