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


Initial Email From:
John
Initial Email Subject: Web Tabs Builder - How to style Tab Header text to give 'highlighter' effect?
Support Case Month: June 2013

Dear Kostas & team

In AllWebMenus we are able to style menu items with a highlighter effect on mouseover

e.g.

Text (HTML formatting) 

normal : Home

mouseover: <span style="background-color: yellow">Home</span>

mouseclick: <span style="background-color: yellow">Home</span>

This highlights just the text, and does not change the background colour of the whole item.

I would like the text within the tab headers (not the whole of the tab header) in Web Tabs Builder to have the same behaviour.  How can I do this?

Many thanks

John

Reply From: Likno Customer Support

Hello John,

In case you need only the same highlight color in all  states of the header text then you just go to the Tabs Header Text/HTML and do the same as in AllWebMenus. (see image below)

tab header highlight text

In case you need different colors in each state, I would propose you to go to Tab_1 Header Text/HTML and create a class there in <style> tags. Note that then you will be able to call this class in all items.

inline style tab

hightlight class

And the result will be like in the following image:

highlight text in tabs

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!

Reply From: John

Hi Aggelos

Many thanks for your rapid response.  I see what you are saying for tabs with headers and bodies populated within Web Tabs Builder.

How would your suggestion apply where the tabs are populated through divs?  (inside the page)

Best,
John

Reply From: Likno Customer Support

Hello John,

When you populate your tabs through DIVs, this means that tabs' content is inside your page. You can have the class I sent you before inside your page in <style> tags or have this in your external CSS file. Also, you can just have inline style in each tab header your want.

See the example code below:

<!DOCTYPE html>
<html>
<head>
     <style>
        .highlight{background-color:#FF0000;}
        .highlight:hover {background-color:yellow;}
     </style>
</head>
<body>
<!-- ******** BEGIN LIKNO WEB TABS CODE FOR highlightHeaders ******** -->
<script type="text/javascript">var lwtbLinkedBy="LiknoWebTabs [1]",lwtbName="highlightHeaders",lwtbBN="220";</script><script charset="UTF-8" src="likno-scripts/highlightHeaders.js" type="text/javascript"></script>
<!-- ******** END LIKNO WEB TABS CODE FOR highlightHeaders ******** -->

<div class="liknotabs_header" style="display: none;">
    <span class="highlight">Header 1</span>
</div>

<div class="liknotabs_header" style="display: none;">
    Header 2
</div>

<div class="liknotabs_header" style="display: none;">
    <span style="background-color:#FFFFFF;">Header 3</span>
</div>

<div class="liknotabs_body" style="display: none;">
    <p>Here is the text of the <b>first tab body</b>.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="liknotabs_body" style="display: none;">
    <p>Here is the text of the <b>second tab body</b>.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="liknotabs_body" style="display: none;">
    <p>Here is the text of the <b>third tab body</b>.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</body>
</html>

And the result:

tabs highlight text

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!

Reply From: John

Thanks Aggelos, that works for me!

John

 

Tags: , , , , , , , , ,

 

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


Initial Email From:
User
al Email Subject: Allwebmenus Pro
Support Case Month: February 2013

I am looking to make a wordpress site that resembles  http://diablo3blog.blogspot.com/ I want my blog and pages to have the ability to have multiple top menus like the above link as well as a side bar link menu using http://wpmegamenu.com/help/  or your floating menu .
Is this something your program would be able to do without using any drop down menus of any sort?  Is your plugin compatible with most wordpress themes or do I need a theme made by you?

Reply From: Likno Customer Support

Hello,

You can easily achieve the specific “multiple menu” effect in two ways:

1) You can actually have multiple menus linked into WordPress, or even better

2) You can create a single menu with multiple rows:

multi row horizontal menu

Regarding the left menu, this is a pretty simple vertical menu, so no problems here either. The only thing that we do not support is this specific mouse-over effect in the menu items.

Overall, AllWebMenus will allow you to create and add as many menus as you want in your WordPress site. Each menu can have any menu type you want (horizontal, vertical, sliding), with multiple rows/columns (or not), with or without submenus (sliding or floating), etc.

Of course our menus will work with all WordPress themes, and in all the latest browsers and mobile devices.

Best Regards,
Kostas
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: , , , , , , , , , , , , ,

 

Hello! We have released a new version of Likno Web Scroller (jQuery Slider) Builder: Version 2.0 build #130.

Check out What's New

- Added a user-friendly WYSIWYG CSS Editor for all CSS-related properties, making the software much easier to use.

jquery slider scroller css editor

- Added Example 12 (BBC mockup): Similar scroller to the live scroller on bbc.com (as of Jan 29, 2013). Use of a "Bullets" only navigation. Use of "Arrow CSS Classes" and "Arrow Container CSS Classes". Use of "Pause when mouse is over the Scroller". Use of "Content CSS Classes".

jquery slider scroller bbc

- Added the ability to change the "Navigation Buttons" order.

- Added the "Arrow button speed multiplier" feature.

- Added the "Center the selected item" feature.

- Added the "Content CSS Classes" property.

- Added support for jQuery 1.8.

- Major rewrite in the transition effect engine (smaller, more flexible & more efficient).

- Fixed a bug in the "Play/Pause" reverse toggle button.

All features here: http://www.likno.com/jquery-scroller/index.php

Download the new version of our web scroller (jquery slider) builder at http://www.likno.com/jquery-scroller/download.php

 

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

 

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


Initial Email From:
Daniele
Initial Email Subject: Tabs
Support Case Month: November 2012

Hello, can you take a look at this Likno Tabs file? (I know I'm very tedious, but I'm working quite a lot and using Likno software a whole lot).

When I activate the fade-in effect, the second time I click on a tab makes the padding-top value reset to zero. You can see it happen in the preview tab, no need for a specific web page.

If I edit the css and set padding-top to zero, the problem goes away.

Thanks, best regards,
Daniele

Reply From: Likno Customer Support

Dear Daniele,

I noticed that your Tabs project was saved with an older version.

In the latest Tabs release (build 216) we have changed several things in the effect engine, and when I opened your project I was not able to see any problems, so it is most likely that the problem is already solved there.

Can you please download the latest Tab Builder version and try recompiling your project?

If you still see the problem, please let me know which version of windows and IE you have installed.

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Daniele

Thanks, now it works. Preview is fine too. I guess I missed some need-to-update emails

 

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

 

Hello! We have released a new version of Likno Web Scroller (jQuery Slider) Builder: Version 1.0 build #124.

Check out What's New

- Added Example 10 (Google Analytics mockup): Similar scroller to the live scroller used on Google Analytics (as of Oct 9, 2012). Use of a "Bullets" only Navigation Bar. Use of "Navigation Arrows". Use of *Play on Page Load* (automatic play). Use of "Pause when mouse is over the Scroller".

HTML jQuery slider scroller Google Analytics mockup example

- Added Example 11 (WordPress mockup): Similar scroller to the live scroller used on WordPress (as of Oct 15, 2012). Use of character-based (HTML) "Navigation Arrows". Use of *Play on Page Load* (automatic play). Use of "Pause when mouse is over the Scroller". Use of "Slide" effect.

HTML jQuery slider scroller WordPress mockup example

- Added the Fade "blending" options.

Slider Scroller Fade Blending

- Added the "Rewind" option when the "Transition" is of the "Continuous" type.

Slider Scroller Rewind

- Added a Vertical Offset (or Horizontal for vertical scrollers) to the Navigation Arrows.

HTML Slider Scroller Arrows Offset

- Updated all Examples that were using CSS-based vertical arrow offsets to use the new property instead.

- Fixed an issue where the style was changing when using the item Link property.

- Fixed an issue where IE produced a horizontal scrollbar if the parent of the positioning item had a fixed width & height AND 'float: left;'.

- Fixed an issue where items with links had a border in IE.

All features here: http://www.likno.com/jquery-scroller/index.php

Download the new version of our web scroller (jquery slider) builder at http://www.likno.com/jquery-scroller/download.php

 

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

 


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