Welcome ,

PageCarton Documentation

Interested in coding widgets, classes, or methods? Check out the Code section!

Changing Number of Posts to Display on a Widget

Share

Documentation Article by Ayoola Falola in

Another interesting customization feature just came in the latest PageCarton. Users of PageCarton can now change the number of post shown in embedded widget from the admin panel. For example, be...

Another interesting customization feature just came in the latest PageCarton. Users of PageCarton can now change the number of post shown in embedded widget from the admin panel.

For example, before now, when a theme developer set that a theme can only have 3 slideshow pictures on the home page, it was impossible for the user of the theme to make it show 5 slideshow pictures instead. They would have to alter the theme and only users that know html could do that.. But with this new feature, while the user is adding dynamic content through the 'Publish Content' section, they can override the developer's default settings for each post sections on the page easily.

The Publish Content section has also been improved to allow some easy access to individual page settings.And also, it is possible to turn off a whole widget section. 

What do you think about this feature?

1 wk ago

Installing PageCarton via Composer

Share

article by Ayoola Falola in Installation , Advanced Topics

If you have Composer installed on your computer, you can easily get PageCarton up by running the following commands on your command line.  # download PageCarton via composer composer c...

If you have Composer installed on your computer, you can easily get PageCarton up by running the following commands on your command line. 


# download PageCarton via composer
composer create-project pagecarton/pagecarton --prefer-dist -s dev

# go into the project
cd pagecarton

# set up your web root
cp -r pagecarton/core/local_html/* html

# start your development server
# You can change 8001 to any port of your choice
cd html && php -S localhost:8001 -c ../pagecarton.php.ini

# You can now go to localhost:8001 on your browser


With this, you do not need to install any other server. Easy, right? We think so too.

Now you can open PageCarton on your browser by going to http://localhost:8001

1 yr ago

Setting up PageCarton via Docker

Share

article by Ayoola Falola in Installation , Advanced Topics

PageCarton now has a few files in its GitHub repository that helps to set it up on Docker easily. If you are familiar with Docker or a newbie, you should be able to get started with PageCarton...

PageCarton now has a few files in its GitHub repository that helps to set it up on Docker easily. If you are familiar with Docker or a newbie, you should be able to get started with PageCarton on Docker without stress. 

The beauty of working with Docker is that you do not have to worry about setting up your server or configuring it. We have created a few settings in the Docker file to ensure the system will be using a compatible server to run your PageCarton in its container. 

Follow these steps to set up PageCarton on Docker

  1. Install Docker Desktop (If you have not done that already). Go to https://docs.docker.com/get-docker/ to learn how to install Docker Desktop for your operating system.
  2. Start up Docker Desktop and ensure it is running


     
  3. Clone PageCarton from Github to your local system. For this, you need to launch your command line or terminal and enter the clone command
    git clone https://github.com/pagecarton/pagecarton.git
    
  4. Still on the command line, change directory into the cloned 'pagecarton' directory.
    cd pagecarton

     

  5. Build PageCarton image on Docker by entering the following command on the command line
    docker-compose up -d

     

That is it, PageCarton is live and you can go ahead to personalize it!

1 yr ago

Steps in Creating a PageCarton Website Offline

Share

article by Tolulope in Design and Layout

Creating a website has now been made easy with the use of Pagecarton, it's not necessary to know much about coding. If you have your contents ready, and the style of how your website wants to...


Creating a website has now been made easy with the use of Pagecarton, it's not necessary to know much about coding. If you have your contents ready, and the style of how your website wants to look, your website creation with pagecarton is as easy as ABC. 
For this tutorial, we will be using an offline server called LOCALHOST. After installing your favorite offline server, pagecarton will be needed to install on it so that we can access the pagecarton admin panel locally. If you don't have pagecarton installed on your pc, you can download the latest version of pagecarton on Latest PageCarton Update, and go to Installing PageCarton for the simplified instructions on how to install pagecarton on your offline server.
So when successfully installed, go to the PageCarton admin Panel to access your admin panel and get started on your website creation. A pictorial example of the page is shown below: 
 

As shown above, there are 7 steps needed to complete the website creation, and after completing a step, you will get access to start the next step. You can also preview your site (using the 'Preview Site' button) to check for the changes you make on the website.


STEP 1 (Update Basic Info): You get to update the details of the site information, which include the site headline, site description, brand logo and the favicon of the website. When they have all been updated, click on continue to go to the next step.

STEP 2 (Choose Theme): Here, you get to pick your desired theme, according to how you want your website to look. Click on the 'Install' button below the theme you wish to use, then click on 'Install theme' in the next page loaded. Click on 'Set as Default Theme' to make it updated automatically on our website.
 

STEP 3 (Choose Color): You get to choose the font color and the background color you want, but you can ignore it if you are cool with the way your website looks with the default color.
 

STEP 4 (Set Static Content): On this page, you can set your static texts to what your website is. You get to update your organization name, the short description about organization, the social media links of the website, location, etc.
 

STEP 5 (Update Pictures): This contains all the pictures that is being used on your website. It's just like your website's gallery. You can add and delete pictures in this section too.
 

Click on the 'More in File Manager' to see all the uploaded pictures in detail. You can also view, replace and upload more files in this page. To delete any file or p[icture in this section, tick the checkbox ☑ at the left -hand side of the file you want to delete, then go to the bottom of the page where the list of pictures are, then click on the 'Delete' button.

  

STEP 6 (Publish Content): This is where the main content of the page is updated or uploaded. You can get to upload the contents of your slideshow, testimonials, features, team-members, etc depending on the pattern of your website 


Update the necessary information and contents needed in each step. When you are done, you can choose to share your website online or buy a domain to give you the full access to your website.


1 yr ago

Steps in Creating a PageCarton Theme

Share

article by P5Peter in Code , Design and Layout , Working with PageCarton

Creating a PageCarton theme isn't actually a difficult task, but just that it might involve a long process and a little bit of how programming codes work. The main purpose of having a PageCarto...

Creating a PageCarton theme isn't actually a difficult task, but just that it might involve a long process and a little bit of how programming codes work. The main purpose of having a PageCarton theme is to ensure other users get an easy and fast customization of their own personal websites with the use of the themes(which serve as a template) created by other users.

Getting an HTML Template File

Download your desired already-designed template file. These kind of templates are most times in a .zip file or other file extensions. In the template will consist of different html and css files; the template can be a personal template or website designed by you. You may get a clean and well-arranged HTML-based template from free-css.com or other sites related to it. There are some other sites you can easily get your already-designed websites, check where to get html templates.


Uploading Template File into PageCarton Admin Panel

After the complete download of your clean already-designed template file(.zip file), the next step is to import it into your PageCarton Admin panel so your PageCarton theme creation and development start from there. If you don't have pagecarton installed on your pc, you can download the latest version of pagecarton on Latest PageCarton Update, and go to How To Install PageCarton for the simplified instructions on how to install pagecarton on your offline server.
So go to the pagecarton admin panel of your local server to start with your theme creation.

  1. Navigate to 'Appearance' from the next screen shown.
  2. Proceed to 'Themes'.
  3. Click on 'Upload New Theme'.
    • Input your desired name of theme in the required space. (Preferably the same name of the template downloaded from the other source)
    • Upload your theme file
    • Leave the theme update options as they are, to avoid future problems or bugs
    • Click on 'Save'.
  4. Close pop-up screen shown
  5. Then your new theme should be listed on the 'My Themes' section
  6. Click on 'Options' on the row of your new theme
  7. Click on 'Preview' from the dropdown options, to check if the theme is working perfectly fine as to the template that was downloaded.

The picture above shows how your page should look when you are about to preview your theme.


Importing the Theme into your Code Editor

After the confirmation and everything is working fine, then you can go on the next step to editing your theme and making it easy for others to use your themes. There are different ways to edit your theme, and they are listed below, the best and suitable way will be showed after the whole explanation of how to edit your theme to make it reusable for other users.
The suitable method is to use any code editor of your choice, either a text editor or an IDE, like VS Code, Sublime Text, Atom and the likes. Using this method, it will be ideal to use an offline server like localhost, so the steps to open it on a code editor(VS Code to be precise) will be outlined below:

  • Open your VS Code App
  • Navigate to File, Click on 'Open Folder' or press Ctrl + K + O
  • Go to your Local Disk
  • Locate your local(offline) server folder (e.g. xampp)
  • Go to pagecarton, then to sites, to default, to application, to document, to layout
  • Then left-click the folder with the name of your uploaded theme
  • Click on the 'Select Folder' box at the bottom right corner of the page.

After carefully following the above steps, the folder should be loaded on your code editor. The directory should be like the one below...

Editing the Header and Footer

Now that the theme folder has been imported to your code editor, we can start editing and integrating different pagecarton functions into the necessary html codes. So to start with, the navigation bar menu, header and footer are meant to be edited first and it's very important to note that the 'header' and 'footer' section are meant to be edited in the 'templateraw' file on your code editor, and other codes can be edited on 'index.html' and other menus. The 'templateraw' file can be found in the Left-Side Bar of your VS Code, or you can use the shortcut Ctrl+Shift+E to open the Explorer Bar.

For the navigation bar, you will need to add a widget for url link so if other users want to add another menu on their website while using your theme, the widget will help with that. To do that, the code below will be used in the appropriate section where the other nav menus are placed:

<widget parameters='{"class": "Ayoola_Menu"}'>
      <a href=""></a>
</widget>


 

The next is to update the logo in the header and footer of the template, so the logo uploaded in your website wizard can reflect instead of the default logo in your template. The code below should be replaced with the one in the logo tag in the code: 

<img style="max-height: 100px;" src="/img/logo.png" alt="{Organization Name}">

 

 


Using Standard Replaceable Texts 

Some dummy contents should be noted in your template, dummy texts like lorem ipsum dolor and the likes, so that's where standard replaceable texts come in. It is highly recommended to use standard replaceable texts so users changing themes won't need to update new contents. Check how to use standard replaceable texts here to have more understanding of how and where to use standard replaceable texts in your theme. 

Integrating Template Forms to PageCarton Forms

Next is to integrate your html template form(s) to work as pagecarton forms by embedding  the in-built widgets using this guide: Linking HTML forms to PageCarton Forms. There are different kind of forms which can be on a website. Examples are Sign Up Form, Email Opt-in Form, Contact Form, etc. But you are to check your template well and know the kind of form that is on the website, and by then you can choose the 'form widget', 'widget url' and 'method' to use.
For example, if the form on your template is a contact form, the 'form action' attribute should be set to '/widgets/PageCarton_Conatct_Form' and the 'method' attribute set to 'POST' (all without the quotes).
 

Editing Main Content using Post Types Parameters and Widgets

Most times, there are categories like posts in the different sections of websites, so to integrate that into something relatable to the pagecarton admin panel, we embed them so they can be automated using 'Application_Article_ShowAll' or other types of widgets available on pagecarton. Check how to use standard post types parameters in embedding widgets to see different Post Types parameters in embedding widgets. Ensure you use only standad post types so users won't need to update contents again when they change themes. Other parameters to note are:

  •  'add_a_new_post' - the number of posts to be displayed
  • length_of_title - the maximum number of characters to display in an article_title
  • length_of_description - the maximum number of characters to display in an article_description

A pictorial example is shown below. 

 
Other widgets that can be added are:

  • Application_SiteInfo - to access the site headline, description and the banner image from the database
  • Ayoola_Menu - to display navigation options

Editing Dominant Colors and other Sections

So the next step to do is to change the dominant color(s) in your template into the pagecarton background color or font color, so check out for the main theme colors(i.e. the colors that are frequently used in the 'style.css' file in your code editor). The easy way to change the color is to use the 'Application_SearchReplace' widget and this widget code should be used at the beginning of the stylesheet. The dominant color will then be replaced with the background color set in the pagecarton admin panel. The code to use is shown below: (using '#ff0000' and '#e90102' as your frequently used colors in this context)

/*
<widget parameters='{"class": "Application_Global"}'>

<widget-inner parameters='{ "class": "Application_SearchReplace", "search": ["#ff0000", "#e90102"], "replace": ""}'>
#ff0000 - 
 */  

And there should be a closing tag at the end of the 'style.css' stylesheet too, as shown below:

/*
     </widget-inner>
     </widget>
*/

 

 So, upon the completion of the steps above, your pagecarton theme should be set and ready for upload.

1 yr ago

HTML Syntax & API for Embedding Widgets

Share

article by Ayoola Falola in Code , Advanced Topics , Design and Layout , Working with PageCarton , PageCarton Lessons

In an update to PageCarton that was available from August 2020, we added a new way to create and customize PageCarton Themes. In addition to existing ways of creating ...

In an update to PageCarton that was available from August 2020, we added a new way to create and customize PageCarton Themes. In addition to existing ways of creating and customizing themes, you can now customize themes completely from the raw HTML code section using your favorite code editor.

Before now, most of the theme layout design functions has been limited to the visual Page Editor in the PageCarton Admin Panel, we noticed that this has proved to be difficult for developers who have become familiar and comfortable using IDEs and standalone Advanced Code Editors. So we thought to build this new feature specifically for developers - basically those who are comfortable writing their own HTML codes.

New Features

  • Ability to compose PageCarton themes using any code editor of your choice
  • Use HTML/JSON syntax to embed PageCarton Widgets in your theme design
  • Include one HTML document in another recursively so you can reuse code easily
  • Automatic HTML file to PageCarton Page conversion
  • Embed PageCarton Widgets into any text-based files; so you can include dynamic contents in JavaScript and CSS files
  • Recursively Embed PageCarton Widgets into other Widgets within HTML codes
  • Use all existing PageCarton Theme design syntax interchangeably with new ones. E.g. Embed Static Replaceable Texts, PageCarton Logo, etc.
  • Pass parameters into PageCarton Widget with JSON right in your HTML code.

How to use widgets in HTML Files

PageCarton Widgets are usually "embedded" in HTML codes to add some "dynamic" nature to the page. E.g. to display posts, display site categories, etc. Here is how to use the new syntax to embed a PageCarton widget in any HTML document

Embedding Widget

Use <widget> element to Embed PageCarton Widgets
 

<widget>

  ...

  <!-- Your  Regular HTML Content for the widget goes here  -->

  ...

</widget>

 

Passing Parameters

You would need to pass parameters to the widget to allow them to function properly. There are currently two methods to pass parameters to widgets in an HTML code. The parameters must be set to a valid JSON string.  The "class" parameter is required for all widget because that is how the system will know which widget to embed for you. Other parameters would be optional and based on the widget being used.

Setting Parameters Through Attributes

You can pass parameters to widgets as an attribute to the <widget> element. Attribute name to use should be "parameters" and value for the attrribute should be set to raw JSON string object for the parameters you want to set. A example code is shown below, Note that single quote has to be used to wrap the JSON Object because valid JSON must use double quotes. Wrong usage of single quotes and double quotes sometimes cause troubles with beginners:

<widget parameters='{ "class": "Sample_Widget_Class_Name", "parameter_name1": "parameter_value1" , "parameter_name2": "parameter_value2" }'>

  ...

  <!-- Your  Regular HTML Content for the widget goes here  -->

  ...

</widget>

Setting Parameters Through A Script Tag (Recommended)

Sometimes, some parameters can be too complicated to fit into an attribute.  Here is another way to pass parameters to widgets. This is actually the preferred way to pass parameters to a widget because passing parameters via attributes can be problematic for beginners. So to avoid troubles, we recomment always passing parameters using the script tag method. Example is shown below:

<widget>

  <script type="application/json">
  {

    "class": "Sample_Widget_Class_Name",

    "parameter_name1": "parameter_value1",

    "parameter_name2": "parameter_value2"

  }

  </script>

  ...


</widget>

Embedding Widget Recursively

Some advanced widget operations require that you insert a widget into another one. So you can recursively nest widgets into one another. Please note that inner widgets are always processed first when embedding widgets recursively by nesting <widget> element in another <widget> element. So the values of the variables of the inner widgets will be available first before that of the outer widgets.

<widget>

  ...

  <widget>

    ...

  </widget>

  ...

</widget>

 

To make the outer widget process first, use <widget-inner> for inner elements instead.

<widget>
  
  ...

  <widget-inner>

    ...

  </widget-inner>

  ...

</widget>

You can also use "-inner" suffix syntax recursively. To help guide the system on the order, when processing the widget

<widget>
         
  ...

  <widget-inner>

    ...

    <widget-inner-inner>

    ...

    </widget-inner-inner>

  ...

  </widget-inner>

  ...

</widget>

 

Widget Variables

Widgets usually have some data populated as variables internally. You can use these variables to output the data in your HTML code. For instance Application_Article_View widget is used to view a post on the page. The widget usually would have the Post Title populated as '' variable. So if you want to display the Post Title in the widget, you would use the variable in the HTML Code. Variables usually have '' format. See example of variable usage in the examples below:


<!-- Example of how to display a Post Content  -->
<widget>

  <!-- Pass relevant parameters -->
  <script type="application/json">
  {
    "class": "Application_Article_View",
    "article_url": "/2020/12/12/sample-post.html",
  }
  </script>

  <!-- Below will output the Post Title content  -->
  <h1></h1>
  
  <!-- Below will output the Post Description content  -->
  <blockquote>In an update to PageCarton that was available from August 2020, we added a new way to create and customize PageCarton Themes. In addition to existing ways of creating ...</blockquote>

  <!-- Below will output the main Article content  -->
  <div></div>

</widget>

<!-- Example of how to display a Site Info Data  -->
<widget>

  <!-- Pass relevant parameters -->
  <script type="application/json">
  {
    "class": "Application_SiteInfo",
  }
  </script>

  <!-- Below will output the Site Headline content  -->
  <h1></h1>
  
  <!-- Below will output the Site Description content  -->
  <p></p>

</widget>

Dealing with Recursion And Displaying Multidimentional Array Variable Data

Sometimes we have a multi-dimensional array data varriable in a widget. e.g. when displaying a multiple posts (with Application_Article_ShowAll) or site categories (with Application_Category_ShowAll). Though not all widget support recursion - only widgets with multidimensional data would function this way. See the following syntax to learn the general syntax to repeat HTML content for a multidimensional dataset. 

Using the <repeat> syntax

We use the <repeat> syntax when we want to repeat a multidimensional dataset in a way that the html content would be the same form.

<repeat>

<!-- HTML content to repeat goes in here e.g. when showing posts or menu items  -->

</repeat>

<!-- Example of how to display a set of posts, e.g. Slideshow, Blog, etc  -->
<widget>

  <!-- Pass relevant parameters -->
  <script type="application/json">
  {
    "class": "Application_Article_ShowAll",
    "article_types": "blog-post",
    "add_a_new_post": 3,
    "length_of_title": 20,
    "length_of_description": 300,
    "no_of_post_to_show": 6
  }
  </script>

  <div>

    <h1>Recent Blog Posts</h1>

    <!-- Below will repeat the post content for all the available post -->
    <repeat>
      <div>
          <h2></h2>
          <p>In an update to PageCarton that was available from August 2020, we added a new way to create and customize PageCarton Themes. In addition to existing ways of creating ...</p>    
      </div>
    </repeat>

  </div>

</widget>

The above code will output something similar to


<!-- All the widget syntax codes would have disappeared in the main output  -->
<!-- Remaining only the main html codes and variable values  -->

<div>

    <h1>Recent Blog Posts</h1>

    <!-- Repeated code will show like this -->
    <div>
        <h2>Post 1</h2>
        <p>Description of Post 1 will display here</p>    
    </div>

    <div>
        <h2>Post 2</h2>
        <p>Description of Post 2 will display here</p>    
    </div>

    <div>
        <h2>Post 3</h2>
        <p>Description of Post 3 will display here</p>    
    </div>

    ...

</div>

Using <data-n> syntax

We use this method to specificallyy display the nth  data in the multidimensional set. Sometimes it may be required to use this method of displaying multi-dimensional data instead of <repeat> . Especially when the HTML to display each data set isn't quite the same. 'n' represents numbers from 0, 1, 2, 3 etc.

<data-n>

<!-- HTML Content to display the nth  data in the set -->

</data-n>

Repeat a specific column in the dataset - used when there is a child-multi-dimensional dataset

<repeat-data_column_name>

<!-- HTML content to repeat goes in here e.g. when showing posts or menu items  -->

</ repeat-data_column_name >

 

Including Another HTML Document

We want to make reusing code easy while building PageCarton themes, so we allow the use of the <include> tag to recursively insert codes from another file dynamically. Use this syntax to bring codes from an HTML file into another file recursively.

<include href="another.html">

Examples

Here are examples of these functionalities in action. You can paste them into your code and start practicing them. You can use them intuitively or adapt them in your own design

Show Page Info


<!-- Example of how to display a Page Meta Info Data  -->
<widget>

  <!-- Pass relevant parameters -->
  <script type="application/json">
  {
    "class": "Ayoola_Page_Info",
  }
  </script>

  <!-- Below will output the current Page Headline content  -->
  <h1></h1>
  
  <!-- Below will output the current page Description content  -->
  <p></p>

</widget>

 

Display Site Categories

<widget>

    <script type="application/json">

    {

        "class": "Application_Category_ShowAll",

        "add_a_new_post": 3,

        "no_of_post_to_show": 6

    }   

    </script>

    <repeat>

        <li><a href="/2020/07/11/html-syntax-api-embedding-widgets.html"></a></li>

    </repeat>

</widget>

Display Shopping Cart

<widget parameters='{ "class": "Application_Subscription_Cart" }'>

    <a href="cart"></a>

    <!-- Shopping Item -->

    <div class="shopping-item">

        <div class="dropdown-cart-header">

            <span> Items</span>

            <a href="/cart">View Cart</a>

        </div>

        <ul class="shopping-list">

            <!--

            <li>

                <a href="" class="remove" title=" "><i

                        class="fa fa-remove"></i></a>

                <a class="cart-img" href=""><img src="?width=70&height=70"></a>

                <h4><a href=""></a></h4>

                <p class="quantity"> x - <span class="amount"></span></p>

            </li>

            -->

        </ul>

        <div class="bottom">

            <div class="total">

                <span>Total</span>

                <span class="total-amount"></span>

            </div>

            <a href="/cart" class="btn animate">Checkout</a>

        </div>

    </div>

    <!--/ End Shopping Item -->

</widget>

 

Effecting URL Whitelisting on a Widget

<widget parameters='{ "class": "Application_Global", "url_whitelist": "/test" }'>

    <div class="col-lg-9 col-12">

        <p>This content will only show on a page with URL "/test"</p>

    </div>

</widget>

 

Effecting a URL blacklist on a Widget

<widget parameters='{ "class": "Application_Global", "url_blacklist": "/test" }'>

    <div class="col-lg-9 col-12">

        <p>This content will be hidden on a page with URL "/test"</p>

    </div>

</widget>

 

Sample Implementation of a Navigation System

<ul class="nav main-menu menu navbar-nav">

    <li class="active"><a href="/">Home</a></li>

    <!--Display default PageCarton Navigation-->

    <widget parameters='{ "class": "Ayoola_Menu" }'>

        <li><a href=""></a></li>

    </widget>

    <li>

        <a href="#">Shop<i class="ti-angle-down"></i><span

                class="new">New</span></a>

        <ul class="dropdown">

            <!--Dynamically create a new PageCarton Navigation named "shop-option"-->

            <widget parameters='{ "class": "Ayoola_Menu", "menu_name": "shop-option" }'>

                <li><a href=""></a></li>

            </widget>

        </ul>

    </li>

    <li>

        <a href="#">Blog<i class="ti-angle-down"></i></a>

        <ul class="dropdown">

            <!--Dynamically create a new PageCarton Navigation named "blog-option"-->

            <widget parameters='{ "class": "Ayoola_Menu", "menu_name": "blog-option" }'>

                <li><a href=""></a></li>

            </widget>

        </ul>

    </li>

    <li><a href="/contact">Contact Us</a></li>

</ul>

Displaying Site Info
 

<widget>

    <script type="application/json">

        {

            "class": "Application_SiteInfo"

        }

    </script>

    <h1>{Organization Name} - </h1>

    <p></p>

</widget>


Using <widget-inner> and <data-n>

 <div class="col-12">
            <div class="tab-content">
                <widget parameters='{ "class": "Application_Category_ShowAll", "add_a_new_post": 3 }'>
                    <data-0>
                        <div>
                            <widget-inner parameters='{ "class": "Application_Article_ShowAll", "category": "", "add_a_new_post": 4, "true_post_type": "product", "trending": 100 }'>
                                    <div>
                                        <repeat>
                                                <h3><a href="/2020/07/11/html-syntax-api-embedding-widgets.html"></a></h3>
                                                <div class="product-price">
                                                    <span></span>
                                                </div>
                                        </repeat>
                                    </div>
                            </widget-inner>
                        </div>
                    </data-0>
                    <data-1>
                        <div>
                            <widget-inner parameters='{ "class": "Application_Article_ShowAll", "category": "", "add_a_new_post": 4, "true_post_type": "product", "trending": 100 }'>
                                    <div>
                                        <repeat>
                                                <h3><a href="/2020/07/11/html-syntax-api-embedding-widgets.html"></a></h3>
                                                <div class="product-price">
                                                    <span></span>
                                                </div>
                                        </repeat>
                                    </div>
                            </widget-inner>
                        </div>
                    </data-1>
                    <data-2>
                         - In an update to PageCarton that was available from August 2020, we added a new way to create and customize PageCarton Themes. In addition to existing ways of creating ...
                    </data-2>
                </widget>
            </div>
        </div>

Using "pc_post_item_0" instead of <data-0>

<widget parameters='{ "class": "Application_Category_ShowAll", "add_a_new_post": 5 }'>
    <div class="row">
        <repeat>
            <img src="/widgets/name/Application_IconViewer?url=&width=600&height=370">

            <div class="content">

                <p>In an update to PageCarton that was available from August 2020, we added a new way to create and customize PageCarton Themes. In addition to existing ways of creating ...</p>

                <h3></h3>

                <a href="/2020/07/11/html-syntax-api-embedding-widgets.html">Shop Now</a>

            </div>
        </repeat>
        

        
    </div>
</widget>

 

Embedding Widget in comment section in a CSS File

This sample shows how to set the PageCarton Site color in CSS

/*

<widget parameters='{ "class":  "Application_Global" }'>

<widget-inner parameters='{ "class":  "Application_SearchReplace", "search":  ["#F7941D", "#f6931d"], "replace":  "" }'>

*/
.preloader-icon span {
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background:#F7941D;
  -webkit-animation: preloader-fx 1.6s linear infinite;
  animation: preloader-fx 1.6s linear infinite;
}

#scrollUp i:hover{
    background:#F7941D;
    color:#fff;
}

.header .nav li .dropdown li .dropdown.sub-dropdown li a:hover{
    color:#fff;
    background:#F7941D;
}

/*

</widget-inner>

</widget>

*/

 

For more information on the variables and parameters, consult the codes of the widget using link similar to this:

4 yrs ago
Next →