ePortfolio Update

I have decided to transfer my ePortfolio to my own hosted domain as I feel that it will give me more flexibility in the design e.g. using plugins.  As the ePortfolio will grow over the period of the two years I want to ensure that ease of navigation is priority and that the overall feel is professional. The domain yvonneleahy.com was available and after playing around with many themes I have decided to use Catch Responsive – the free version. The main change I have made are setting up tabs in the Learning Journey and References pages and I have also tidied up the navigation bar. Another change I have made is moving all the modules under the heading Modules in the menu bar for navigation and organisational purposes.

Setting up Tabs

For the pages Learning Journey and References I had too many links which was very confusing.  I downloaded the plugin Responsive Tabs and created tabs on these pages.  Once the plugin was activated a heading was created in the dashboard called + Tab sets.  This enabled me to set up individual tabs .

Once +Tab sets is click you type in a title and the contents are typed in the inner section.  The option for adding more tabs is also available. Once all tabs are complete click on Update and you will return to the screen with tabs with a shortcode appearing next to the main title.  Copy this shortcode and enter in the relevant page.  Therefore, your tab content is not under pages but under tab sets and this code links both of them.  To make changes you return to tab sets.

I did have a couple of challenges e.g.  applying a hanging indentation for references, justifying text etc.  For future reference here are the steps involved using Basic HTML code (which I had never used before).


Type <strong> before text and </strong> after text

Example:  <strong>Welcome to My Learning Page</strong>


Type <em> before text and </em> after text

Example:  <em>Why did you decide to apply for this Masters? </em>

Hanging Indentation

Type <p style=”margin-left:.5in;text-indent:-.5in”> before text and </p> after text

Example:  <p style=”margin-left:.5in;text-indent:-.5in”>Anderson, M. B., & Swanson, A. G. (1993). Educating medical students: The ACME-TRI report with supplements. Acad Med, 68(4), S1-S46.</p>

Justify Alignment 

Type <p style=”text-align:justify;”> before text and </p> after text

Example:  <p style=”text-align:justify;”>For each module I have incorporated weekly reflections using the Gibbs Reflective Cycle along with submitted assessments and an overall conclusion.</p>


It has been fun working on this ePortfolio and I have learned lots in the process.  Despite there being a large learning curve I feel that I am making some progress.

Leave a Reply

Your email address will not be published. Required fields are marked *