Basic Page Styling
In this example we are going to utilize the built in Bootstrap 4 styling and give our
Demo a basic format with the use of the cards class. We are not going to dive too much into Bootstrap as there is plenty of useful documentation out there already.
Let's go ahead and use the data that we have already placed in the
Demo.php file. You can just copy and paste the following code to your
Demo.php file:
Code
<?php
$meta['title'] = "Demo Page Title";
$meta['description'] = "This is the Demo Page Description";
$meta['keywords'] = "Demo, Page, Test, UserCandy";
$meta['image'] = "https://www.usercandy.com/UserCandyLogo.png";
?>
<div class="col-12">
<div class="card mb3">
<div class="card-header h4">
<?=$meta['title']?>
</div>
<div class="card-body">
<?php echo "Hello World"; ?>
</div>
</div>
</div>
Now if we refresh the page, you will see that the page is styled with the Meta Title and Hello World displayed in the card. This is just a basic setup. Bootstrap has a ton of features that you can adapt to your pages and style them any way you like.
Another nice feature with Bootstrap is the Breadcrumbs class. UserCandy Framework is designed to look for Breadcrumbs and display them at the top of the page just below the nav bar. Basically the Breadcrumbs is used to display links to pages that lead up to the current page. For example the Demo page is after the Home page. So we will want to let the Breadcrumbs know that. Add the following code to your
Demo.php file:
Code
$data['breadcrumbs'] = "<li class='breadcrumb-item active'>".$meta['title']."</li>";
Like the Meta Data the Breadcrumbs data is saved to the database so that it can be loaded in the header. Give your page an extra refresh and you will see that the Breadcrumbs is now displayed at the top of your page.
Your
Demo.php file should look similar to the following:
Code
<?php
$meta['title'] = "Demo Page Title";
$meta['description'] = "This is the Demo Page Description";
$meta['keywords'] = "Demo, Page, Test, UserCandy";
$meta['image'] = "https://www.usercandy.com/UserCandyLogo.png";
$data['breadcrumbs'] = "<li class='breadcrumb-item active'>".$meta['title']."</li>";
?>
<div class="col-12">
<div class="card mb3">
<div class="card-header h4">
<?=$meta['title']?>
</div>
<div class="card-body">
<?php echo "Hello World"; ?>
</div>
</div>
</div>
Get suck and need help? Please use the UserCandy Forum. We are happy to assist with your project.
