LinkedIn
Twitter
Hello Apigeeks,
Let me list out steps to create custom theme in Apigee Developer Portal for your own branding, styling with portal best practices for same below. Also, Find out how to change the look & feel of front page in this article.
Create a new theme out of Apigee Responsive Theme :
- Clone the Developer Portal to your local machine to get started. You need MAMP / LAMP / WAMP to work on local machine.Working on local machine is much faster compared to using ftp on pantheon. Only downside is you have to replicate configuration settings.
Note: You need local environment to work much faster & flexible. I prefer working on local setup portal. One downside is you need to do configurations twice since they are stored in database which will be local if you do local setup.You need to again in pantheon cloud instance.
If you don't want to pull your hair in setting local instance with MAMP, I would suggest ignore the above step, Pull to git code to local machine using pantheon git instance url, do the changes, push to pantheon using git & work directly on cloud portal.
- Create a new subtheme of Apigee Theme using starterkit theme in profiles/apigee/themes/apigee_responsive folder. Instruction are available in readme file inside sarterkit theme & here in Apigee Docs. You need codebase access of Apigee Developer Portal.
- Enable the subtheme you have created from "admin/appearance" page in Developer Portal as administrator & set it to default.
- Navigate to theme settings page to configure the basic colors of menu, footer, buttons that will applied across the theme. Appearance >> Settings >> Theme Name. Instructions are available here.
- Upload the logo & Favicon in above settings page. Save the settings
Remove the Front Page Default Blocks :
- Front page blocks are enabled using context module in Apigee Developer Portal. Navigate to Structure -> Context or "admin/structure/context" and click on Edit button next to home, delete all the blocks save settings.
- You will still see the welcome to text when you navigate to home page, You need to override this using custom template files.
- Copy below code to page--front.tpl.php & place the file inside sites/all/themes/{yourthemename}/templates folder.
<?php
/**
* @file
* Default theme implementation to display a single Drupal page.
*
* The doctype, html, head and body tags are not in this template. Instead they
* can be found in the html.tpl.php template in the ../system directory.
*
* Available variables:
*
* General utility variables:
* - $base_path: The base URL path of the Drupal installation. At the very
* least, this will always default to /.
* - $directory: The directory the template is located in, e.g. modules/system
* or themes/bartik.
* - $is_front: TRUE if the current page is the front page.
* - $logged_in: TRUE if the user is registered and signed in.
* - $is_admin: TRUE if the user has permission to access administration pages.
*
* Site identity:
* - $front_page: The URL of the front page. Use this instead of $base_path,
* when linking to the front page. This includes the language domain or
* prefix.
* - $logo: The path to the logo image, as defined in theme configuration.
* - $site_name: The name of the site, empty when display has been disabled
* in theme settings.
* - $site_slogan: The slogan of the site, empty when display has been disabled
* in theme settings.
*
* Navigation:
* - $main_menu (array): An array containing the Main menu links for the
* site, if they have been configured.
* - $secondary_menu (array): An array containing the Secondary menu links for
* the site, if they have been configured.
* - $breadcrumb: The breadcrumb trail for the current page.
*
* CUSTOMIZATIONS:
* - $myappslink: provides a link for the users my apps page (with glyphicon)
* - $profilelink: provides a link for the user profile page (with glyphicon)
* - $logoutlink: provides a link for the user to log out (with glyphicon)
* - $company_switcher: Provides the dropdown to switch companies if
* apigee_company module is enabled.
*
* Page content (in order of occurrence in the default page.tpl.php):
* - $title_prefix (array): An array containing additional output populated by
* modules, intended to be displayed in front of the main title tag that
* appears in the template.
* - $title: The page title, for use in the actual HTML content.
* - $title_suffix (array): An array containing additional output populated by
* modules, intended to be displayed after the main title tag that appears in
* the template.
* - $messages: HTML for status and error messages. Should be displayed
* prominently.
* - $tabs (array): Tabs linking to any sub-pages beneath the current page
* (e.g., the view and edit tabs when displaying a node).
* - $action_links (array): Actions local to the page, such as 'Add menu' on the
* menu administration interface.
* - $feed_icons: A string of all feed icons for the current page.
* - $node: The node object, if there is an automatically-loaded node
* associated with the page, and the node ID is the second argument
* in the page's path (e.g. node/12345 and node/12345/revisions, but not
* comment/reply/12345).
*
* Regions:
* - $page['help']: Dynamic help text, mostly for admin pages.
* - $page['highlighted']: Items for the highlighted content region.
* - $page['content']: The main content of the current page.
* - $page['sidebar_first']: Items for the first sidebar.
* - $page['sidebar_second']: Items for the second sidebar.
* - $page['header']: Items for the header region.
* - $page['footer']: Items for the footer region.
*
* @see bootstrap_preprocess_page()
* @see template_preprocess()
* @see template_preprocess_page()
* @see bootstrap_process_page()
* @see template_process()
* @see html.tpl.php
*
* @ingroup themeable
*/
$can_register = (variable_get('user_register', USER_REGISTER_VISITORS_ADMINISTRATIVE_APPROVAL) != USER_REGISTER_ADMINISTRATORS_ONLY);
?>
<header id="navbar" role="banner" class="<?php print $navbar_classes; ?>">
<div class="container">
<div class="navbar-header">
<?php if ($logo): ?>
<a class="logo navbar-btn pull-left" href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>">
<img src="<?php print $logo; ?>" alt="<?php print $site_name; ?>" />
</a>
<?php endif; ?>
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<nav role="navigation">
<?php if (!empty($primary_nav)): print render($primary_nav); endif; ?>
<ul class="menu nav navbar-nav pull-right account-menu">
<?php if (user_is_anonymous()): ?>
<?php if ($can_register): ?><li class="<?php echo (($current_path == 'user/register') ? 'active' : ''); ?>"><?php echo l(t('Register'), 'user/register'); ?></li><?php endif; ?>
<li class="<?php echo (($current_path == 'user/login') ? 'active' : ''); ?>"><?php echo l(t('Login'), 'user/login'); ?></li>
<?php else: ?>
<li class="first expanded dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" data-target="#" title="" href="https://community.apigee.com/user">
<?php print $user_mail_clipped; ?> <span class="caret"></span>
</a>
<ul class="dropdown-menu"><?php print $dropdown_links; ?></ul>
</li>
<li class="last"><?php print l(t('Logout'), 'user/logout'); ?></li>
<?php endif; ?>
</ul>
<?php if (!empty($page['navigation'])): print render($page['navigation']); endif; ?>
</nav>
</div>
</div>
</header>
<!-- Breadcrumbs -->
<?php if ((!empty($search_form) || !empty($company_switcher)) && !(drupal_is_front_page()) ): ?>
<div class="container search-container">
<div class="row">
<?php if (!empty($company_switcher)):?>
<div class="col-xs-6">
<div class="apigee-company-switcher-container"><?php print $company_switcher; ?></div>
</div>
<?php endif;?>
<?php if (!empty($search_form)): ?>
<div class="col-xs-6 pull-right">
<?php print render($search_form);?>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<!-- Breadcrumbs -->
<?php if ($breadcrumb): ?>
<div class="container" id="breadcrumb-navbar">
<div class="row">
<div class="col-md-12">
<?php print $breadcrumb;?>
</div>
</div>
</div>
<?php endif; ?>
<div class="master-container">
<?php if (drupal_is_front_page()): ?>
<section class="page-header">
<div class="fluid-container">
<div class="page-header-content">
<?php print render($page['homepage_header']); ?>
</div>
</div>
</section>
<?php else: ?>
<section class="page-header">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Title Prefix -->
<?php print render($title_prefix); ?>
<!-- Title -->
<h1><?php print render($title); ?></h1>
<!-- SubTitle -->
<?php if (!empty($subtitle)): ?>
<br/>
<p class="subtitle">
<span class="text-muted">
<span class="glyphicon glyphicon-info-sign"></span>
<?php print render($subtitle); ?>
</span>
</p>
<?php endif; ?>
<!-- Title Suffix -->
<?php print render($title_suffix); ?>
</div>
</div>
</div>
</section>
<?php endif; ?>
<div class="page-content">
<div class="main-container fluid-container">
<header role="banner" id="page-header">
<?php print render($page['header']); ?>
</header> <!-- /#page-header -->
<div class="row">
<?php if (!empty($page['sidebar_first'])): ?>
<aside class="col-sm-3" role="complementary">
<?php print render($page['sidebar_first']); ?>
</aside> <!-- /#sidebar-first -->
<?php endif; ?>
<section<?php print $content_column_class; ?>>
<?php if (!empty($page['highlighted'])): ?>
<div class="highlighted jumbotron"><?php print render($page['highlighted']); ?></div>
<?php endif; ?>
<?php if ($messages): ?>
<div class="row">
<div class="col-md-12">
<?php print $messages; ?>
</div>
</div>
<?php endif; ?>
<?php if (!empty($tabs) && !drupal_is_front_page()): ?>
<?php print render($tabs); ?>
<?php endif; ?>
<?php if (!empty($page['help'])): ?>
<?php print render($page['help']); ?>
<?php endif; ?>
<?php if (!empty($action_links)): ?>
<ul class="action-links"><?php print render($action_links); ?></ul>
<?php endif; ?>
<?php print render($page['content']); ?>
</section>
<?php if (!empty($page['sidebar_second'])): ?>
<aside class="col-sm-3" role="complementary">
<?php print render($page['sidebar_second']); ?>
</aside> <!-- /#sidebar-second -->
<?php endif; ?>
</div>
<?php if (drupal_is_front_page()): ?>
<?php if (!empty($page['frontpage_panel_left']) || !empty($page['frontpage_panel_center']) || !empty($page['frontpage_panel_right'])): ?>
<div class="row">
<div class="col-sm-4">
<?php if (!empty($page['frontpage_panel_left'])): ?>
<?php print render($page['frontpage_panel_left']); ?>
<?php endif; ?>
</div>
<div class="col-sm-4">
<?php if (!empty($page['frontpage_panel_center'])): ?>
<?php print render($page['frontpage_panel_center']); ?>
<?php endif; ?>
</div>
<div class="col-sm-4">
<?php if (!empty($page['frontpage_panel_right'])): ?>
<?php print render($page['frontpage_panel_right']); ?>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
</div>
<footer class="footer">
<?php print render($page['footer']); ?>
</footer>
</div>
- Make sure you clear Drupal caches to see the changes in action. You can clear Drupal Cache using Home Icon in top admin menu -> Flush All Caches.
- You should see a background color at this point of time below the menu, Let's remove that using little bit of CSS. You should see a css files called sites/all/themes/{YOURTHEMENAME}/css/YOUR_THEME_NAME.css . Update the css file using below style sheet.
.page-header {
background: none;
border-bottom: none;
border-top: none;
box-shadow: none;
padding-top: 10px;
}After above change, Your Developer Portal front page should look like a clean slate with the menu & footer. You can use above CSS file to write more stylesheets to alter look & feel.
Creating Custom Blocks for Home Page :
- You can create new blocks with html code using the UI, Structure -> Blocks -> Add Block (admin/structure/block/add) page or using a custom module with template files.
- I would prefer using custom modules so that you can track the code changes & easy to maintain same.
- Please find attached custom module that you can use to create home page custom blocks.
- Unzip above file inside "sites/all/modules/custom" folder & navigate to "admin/modules" page to enable the module.
- Edit line no 42 in above module custom_home.module to change yourthemename to your custom theme created above.
- Go to context page of home page, Navigate to Structure -> Context or "admin/structure/context" and click on Edit button next to home.
- Add reaction blocks & select the block1 from custom_home and add it to home page header. Similarly select blocks2, 3, 4 and it to content.
- Save the configuration & head to home page to see new look & feel.
You can change the blocks html in "site/all/modules/custom/custom_home/templates" folder template files & css in site/all/modules/custom/custom_home/custom_home.css. Don't forget to clear Drupal Caches to see changes.
Your new theme & home page should look like more or less as below screenshot.
Use the css, js file inside your custom theme folder to design your developer portal as per your branding & styling quickly. Hope it helps someone looking for same. It should take few hours to have a portal with your own branding.
Hope it helps. Feedback & Comments are welcome.
PS: Please upvote this article every time you create a new theme using above guide so that we know how many are using same and will help us to create more similar articles moving forward.
That's correct. Creating a new themes is as simple as those 3 steps.
Regarding, For the "delete all the blocks save settings." should I be deleting each block one by one or Blocks (Remove)?
- You can try any of above. End result is same.
- If you are deleting & adding the custom-home blocks at same time then you will do earlier. deleting each block one by one & add new ones instead of deleting the whole reaction.
Regarding, Also when I select + Add nothing happens.
- You need to select blocks from right hand side & then click add. See screenshot below.
Hope it helps. Keep us posted if any.
