By continuing your navigation on this site, you accept the use of cookies to offer you contents and adapted services. Legal Notice.
 
 

GuppY Help Center, help online, documentation and tutorials

 
Search
 
Close

GuppY 5.02

telecharger.png

 
You are here :   Welcome » Tabs, Accordions, modal window
 
Preview  Print...  Print this page...
Preview  Print...  Print this section...

FAQ GuppY v 5.02.xx

Here you will find FAQs on Guppy version 5.02.xx.

 ↑  

FAQ system

These FAQs address issues related to hosting and the system in general.

Documentation

In this box you will find documentation and tutorials

 ↑  

Legal

Here you will find important information regarding regulations and copyright

 ↑  

Update  Tabs, Accordions, modal window

rss This article is available in the standard RSS format for publication on your website :
https://ghc.freeguppy.org/data/en-articles.xml

config_look_en_17.jpg


TABS:

These are the tabs used in the Technical box of the demo database by clicking on Demo and then Demo jQuery. and then on the secondary page in the box "JQuery scripts used", and for the READ-MOI in the Presentation box and then GuppY of the demo database.

  • Background (tabs): Set the background color of non-active tabs,
         - Text color: Choose the color of the tab text, here #404040,
     
  • Borders (tabs): Add the color of the border of the tabs, always #60C4EA for this skin,
         - Border size: 1px, usually this size is used
         - Radius of rounded corners: 0px, no rounded corners, if you put 10px 10px 10px 0 0, both top corners will have a rounding of 10px,
     
  • Background (active tab): Set the background color of the active tab, look at the Preamble color when opening the READ-MOI, here #B4EBFA
         - Text color (active tab): Set the text color of the active tab according to the background color,
     
  • Background (panel content): Add the background color of the panel that will contain your text, here #FFFFFFFF
     
  • Borders (panel contents): Add the color of the panel border, always #60C4EA for this skin,
         - Border size: 1px, just like the border of the tabs,
         - Radius of rounded corners: 0px, no rounded corners, if you set 0 0 10px 10px, both bottom corners will have a rounded 10px,

     

ACCORDIONS:

These are the accordion blocks used in the "JQuery Scripts used" box in the demo database.

  • Background (tabs): Set background color for non-active tabs, here #244459
         - Text color: Choose the color of the tab text, here #FFFFFFFF,
     
  • Borders (tabs): Add the color of the border of the tabs, always #60C4EA for this skin,
         - Border size: 1px, usually this size is used
         - Radius of rounded corners: 0px, no rounded corners, if you put 10px 10px 10px 0 0. Both top corners will have a rounding of 10px,
     
  • Background (active tab): Set the background color of the active tab, look at the Preamble color when opening the READ-MOI, here #B4EBFA
         - Text color (active tab): Set the text color of the active tab according to the background color,
     
  • Background (panel content): Add the background color of the panel that will contain your text, here #FFFFFFFF
     
  • Borders (panel contents): Add the color of the panel border, always #60C4EA for this skin,
         - Border size: 1px, just like the border of the tabs,
         - Radius of rounded corners: 0px 0px 0px 0px 0px, no rounded corners, if you put 0 0 10px 10px, both bottom corners will have a rounding of 10px,

MODAL WINDOW:

You will find an example in the Technical box of the demo database by clicking on Demo and then Demo jQuery.

You arrive on a secondary page and the first box "Modal window" with an invitation "Click me", you can click to display the modal window.

  • Color for fade: it is the color to darken the whole background of the screen under the modal window, so a dark color: #10101010
         - Opacity: 0.7, the choice is rather limited, you can try 0.8 (darker) or 0.6 (less darker).
     
  • Background: Set the background color of the window for text, here #FFFFFFFF is white
     
  • Borders: Add the color of the window border taking into account the dark background,
         - Border size: 5px, a little fancy, it's possible,
     
  • Radius of rounded corners: 10px, the four corners have a rounding of 10px, an original window if you want to try: 10px 0 10px 0.


Configuration is complete for this topic.


Creation date : 06/12/2016 @ 14:56
Last update : 05/12/2018 @ 17:58
Category : - Tutorial Config look
Page read 8318 times

You are here :   Welcome » Tabs, Accordions, modal window
 
Preview  Print...  Print this page...
Preview  Print...  Print this section...

Visits

 3258315 visitors

 79 visitors online

Help

aide_help.png
On each page in admin, if you click on this icon, you get the online help page.

Site registered in the CNIL under agrément 1040387.
You have a right of access, modification, rectification and deletion
of the data according to the Computer law and Freedom (article 34) of January 6th, 1978.