Flatsome

https://docs.uxthemes.com/
Admin
Flatsome is a modern WordPress theme designed for creating professional e-commerce websites with...
Tokens:7,525
Snippets:148
Trust Score:9.3
Update:3 months ago
Show doc for...
Tokens:
Raw
### Basic Lightbox Example

Source: https://docs.uxthemes.com/article/229-lightbox-shortcode

Use this snippet to create a simple lightbox triggered by a button. Ensure the button's link ID matches the lightbox's ID.

```shortcode
[button text="Lightbox Button" link="#test"]
[lightbox id="test" width="600px" padding="20px"]
Insert lightbox content here...
[/lightbox]
```

--------------------------------

### Newsletter Lightbox Example

Source: https://docs.uxthemes.com/article/229-lightbox-shortcode

Embed a newsletter signup form within a lightbox, triggered by a link with an icon. The lightbox content includes a banner and a form shortcode.

```shortcode
<a href="#newsletter-signup-link"><span class="icon-envelop"></span> Newsletter Signup</a>

[lightbox id="newsletter-signup-link" width="600px" padding="20px"]

[ux_banner bg="http://imageurl" height="400px" link="" animation="fadeInLeft" text_align="left" text_pos="left top" text_color="dark" text_width="40%"]
<h3>Sign up for Newsletter</h3>
<div class="tx-div medium"></div>
[ninja_forms_display_form id=1]

[/ux_banner]

[/lightbox]
```

--------------------------------

### Configure Pjax Selectors and Processing Elements

Source: https://docs.uxthemes.com/article/430-pjax

Configure Pjax behavior by defining 'selectors' for triggering requests, 'elements' to be replaced, 'processing_elements' for loading indicators, and 'scroll_to' for post-request scrolling. This example targets pagination links within a container.

```php
<?php 
$args['entries'][] = [
  // 'selectors' is an array that specifies the CSS selectors for the elements that will trigger the PJAX request when clicked.
  'selectors' => [ '#container .pagination a' ],
  
  // 'elements' is an array that specifies the CSS selectors for the elements that will be replaced with the new content fetched by the PJAX request.
  // If this is omitted, the elements specified in '$args['elements']' will be used.
  'elements' => [ '#container' ],
  
  // 'processing_elements' is an array that specifies the CSS selectors for the elements that will show a loading indicator while the PJAX request is being processed.
  // If this is omitted, the elements specified in '$args['processing_elements']' or the entry elements (if provided) will be used as processing elements.
  'processing_elements' => [
  '#container' => [
  // 'style' specifies the style of the loading indicator. In this case, 'spotlight' is used.
  'style' => 'spotlight',
  
  // 'position' specifies the position of the loading indicator. In this case, 'sticky' is used.
  'position' => 'sticky',
  ],
  ],
  
  // 'scroll_to' specifies the CSS selector for the element that the page will scroll to after the PJAX request is completed.
  // If this is omitted, the element specified in '$args['scroll_to']' will be used.
  'scroll_to' => '#container',
];
```

--------------------------------

### Initialize and Open Magnific Popup

Source: https://docs.uxthemes.com/article/420-magnific-popup

Loads the Magnific Popup library and then opens a YouTube iframe popup. Ensure the library is available before calling open.

```javascript
jQuery(function ($) {
  // Load magnific popup library.
  $.loadMagnificPopup().then(() => {
  // Initialise and open popup.
  $.magnificPopup.open({
  items: {
  src: 'http://www.youtube.com/watch?v=0O2aH4XLbto'
  },
  type: 'iframe'
  })
  })
 })
```

--------------------------------

### Automatically Open Lightbox (Always Displayed)

Source: https://docs.uxthemes.com/article/229-lightbox-shortcode

Configure a lightbox to automatically open for every visitor using `auto_show="always"`. Set `auto_open="true"` and `auto_timer` for timed display.

```shortcode
[lightbox auto_open="true" auto_timer="3000" auto_show="always" id="newsletter-signup-link" width="600px" padding="20px"]

[ux_banner bg="http://imageurl" height="400px" link="" animation="fadeInLeft" text_align="left" text_pos="left top" text_color="dark" text_width="40%"]
<h3>Sign up for Newsletter</h3>
<div class="tx-div medium"></div>
[ninja_forms_display_form id=1]

[/ux_banner]

[/lightbox]
```

--------------------------------

### Automatically Open Lightbox (Displayed Once)

Source: https://docs.uxthemes.com/article/229-lightbox-shortcode

Use `auto_show="once"` to ensure a lightbox only appears once per visitor. This is useful for introductory messages or special offers.

```shortcode
[lightbox auto_open="true" auto_timer="3000" auto_show="once" id="newsletter-signup-link" width="600px" padding="20px"]

[ux_banner bg="http://imageurl" height="400px" link="" animation="fadeInLeft" text_align="left" text_pos="left top" text_color="dark" text_width="40%"]
<h3>Sign up for Newsletter</h3>
<div class="tx-div medium"></div>
[ninja_forms_display_form id=1]

[/ux_banner]

[/lightbox]
```

--------------------------------

### Handle Pjax Request Completion

Source: https://docs.uxthemes.com/article/430-pjax

Listen for the experimental-flatsome-pjax-request-done event on the body to reinitialize scripts after Pjax content loads. This is crucial for plugins that require re-attachment.

```javascript
jQuery(document.body).on('experimental-flatsome-pjax-request-done', function (event, res, url) {
  console.log('Flatsome Pjax request done!', res, url)
  // Re-attach or re-init some JS here.
})
```

--------------------------------

### Enqueue Child Theme JavaScript with Dependencies

Source: https://docs.uxthemes.com/article/420-magnific-popup

Registers and enqueues a child theme's main JavaScript file in WordPress. It specifies jQuery and flatsome-js as dependencies, ensuring they are loaded first.

```php
<?php 
 add_action( 'wp_enqueue_scripts', function () {
 wp_register_script(
 'child-main-js',
 get_stylesheet_directory_uri() . '/main.js',
 array( 'jquery', 'flatsome-js' ),
 '0.0.1',
 true
 );
 
 wp_enqueue_script( 'child-main-js' );
 } );
```

--------------------------------

### Insert UX Banner Shortcode

Source: https://docs.uxthemes.com/article/233-how-to-edit-shop-header-with-ux-builder

Use this shortcode within a UX Block to create a banner that can be edited in UX Builder. This is the first step in customizing the shop header.

```shortcode
[ux_banner] Edit me [/ux_banner]
```

--------------------------------

### Pjaxify WooCommerce My Account Links

Source: https://docs.uxthemes.com/article/430-pjax

Use the 'experimental_flatsome_pjax' filter to conditionally apply Pjax to WooCommerce My Account navigation links. This targets specific dashboard links and defines the content area to be updated.

```php
<?php 
add_filter( 'experimental_flatsome_pjax', function ( $args ) {
  // Only apply if we are on the WooCommerce account page.
  if ( is_woocommerce_activated() && is_account_page() ) {
  $args['entries'][] = [
  // Target dashboard nav links.
  'selectors' => [ '.woocommerce-MyAccount-navigation-link a' ],
  // Specify the element to show overlay/processing during Pjax operation.
  'processing_elements' => [ '.woocommerce-MyAccount-content' ],
  ];
  }
  
  return $args;
} );
```

--------------------------------

### Lazy Load and Open Magnific Popup on Click

Source: https://docs.uxthemes.com/article/420-magnific-popup

Initializes Magnific Popup on elements with the class 'open-popup', allowing for lazy loading of the popup content, such as a YouTube iframe.

```javascript
jQuery(function ($) {
  // Initialise and open popup if clicked on element with class open-popup.
  $('.open-popup').lazyMagnificPopup({
  items: {
  src: 'http://www.youtube.com/watch?v=0O2aH4XLbto'
  },
  type: 'iframe'
  })
 })
```

--------------------------------

### Set Base Font in Flatsome

Source: https://docs.uxthemes.com/article/224-add-custom-fonts-to-flatsome

Apply a custom font to the entire body of your website. Ensure 'Custom Font Name' matches your uploaded font.

```css
body{font-family:  "Custom Font Name",  sans-serif}
```

--------------------------------

### Set Alternative Font in Flatsome

Source: https://docs.uxthemes.com/article/224-add-custom-fonts-to-flatsome

Apply a custom font to elements with the 'alt-font' class. Ensure the font name is correctly specified.

```css
.alt-font{font-family: "Custom font name", sans-serif;}
```

--------------------------------

### Set Navigation Font in Flatsome

Source: https://docs.uxthemes.com/article/224-add-custom-fonts-to-flatsome

Customize the font used for navigation links, including main and sub-menu items. Replace 'Custom Font Name' with your font's actual name.

```css
.nav > li > a, .mobile-sidebar-levels-2 .nav > li > ul > li > a {font-family:  "Custom Font Name", sans-serif;}
```

--------------------------------

### Set Heading Font in Flatsome

Source: https://docs.uxthemes.com/article/224-add-custom-fonts-to-flatsome

Define the font for all heading elements (h1-h6) and specific heading classes. Use your custom font's name.

```css
h1,h2,h3,h4,h5,h6, .heading-font, .off-canvas-center .nav-sidebar.nav-vertical > li > a{font-family: "Custom Font Name", sans-serif;}
```

--------------------------------

### Hide an element using CSS

Source: https://docs.uxthemes.com/article/235-how-to-add-and-edit-custom-css

Use this CSS rule to hide a specific element by setting its display property to 'none'. This is useful for removing unwanted content from a webpage.

```css
p.name.product-title > a{ display:none }
```

--------------------------------

### Increase element font size with CSS

Source: https://docs.uxthemes.com/article/235-how-to-add-and-edit-custom-css

Apply this CSS rule to increase the font size of a selected element. The font size can be set to a percentage, pixel value, or other CSS units.

```css
p.name.product-title > a{ font-size: 200% }
```

--------------------------------

### Change element text color with CSS

Source: https://docs.uxthemes.com/article/235-how-to-add-and-edit-custom-css

Modify the text color of an element using this CSS rule. You can specify colors using hexadecimal codes, color names, or RGB values.

```css
p.name.product-title > a{ color: #777 }
```
Tokens:
Raw