Mike is a professional speaker and podcaster on design and user experience. He is the founder of Designs Edge, Bankwide and other successful websites. Mike works to expand the influence of social media and collective intelligence and is a strong supporter of the open source community.

Customize Icon & Color of Site Name in Purity III Template

Customize Icon & Color of Site Name in Purity III Template
demosite1
You need a cool custom look for your site's logo, the images don't resize well, and sometimes, it just doesn't look right. No worries, there are some easy customizations that you can use to improve the look of your logo by using custom HTML and icons in the Purity III template.
 
First load up the Extensions>Templates>Purity III menu option. Select the Theme tab and set the logo type to Text.
 

 demosite2
Now you can put your site's name into the appropriate field. This field will accept HTML, so adding some SPAN tags, we can do some cool things here. 
Next we want to add an icon to the logo, you can choose any glyphicon or font awesome icon (purity iii already supports these icons).
We use the Font Awesome Joomla Icon, so we add this code to display it:
 
 <span class="fa fa-joomla"></span> DEMOSITE
 
demosite3
 
Next, our demo site needs some branding, since the site is Design's Edge, or DE, we are going to turn those letters orange. Simply use a SPAN Style comment wrapped around what you want to color (Even the icon itself)
 
<span class="fa fa-joomla"></span> <span style="color: orange;">DE</span>MOSITE
 
demosite4
 
Hope this helps you to customize your purity iii logo to be more appealing to your visitors and help you stand out! 
 
If you use the joomla tip I just gave, please give me a shout out in the comments and subscribe to our newsletter packed full of Joomla goodies!
Continue reading
1953 Hits
0 Comments

Adjusting Padding on Purity III Position 0 (Above Content)

Adjusting Padding on Purity III Position 0 (Above Content)
Today I needed to reduce the padding of my current position 0 (above position 1 and content). It's set to 60 above and 60 below by default, which eats up a lot of real estate. Especially if  you just want to show an alert message, a banner or something similar. All you have to do is add this code to your /templates/purity_iii/css/custom.css fi...
Continue reading
1830 Hits
0 Comments
Featured

Customizing the JCE Editor - Making it simpler!

Customizing the JCE Editor - Making it simpler!
The JCE editor for Joomla is simply amazing at all of the bells and whistles, but sometimes you need a simpler version. I will cover how to change your editor, add and customize buttons and improve your experience as a Joomla administrator. 
Continue reading
2174 Hits
0 Comments

Joomla Tutorial: Purity III - Add Module Position & Change Default Layout

Continue reading
2529 Hits
0 Comments

Style the Easy Social Toolbar - Custom CSS

Style the Easy Social Toolbar - Custom CSS

I have been using Easy Social since Stack Ideas released it. I even migrated from JomSocial to the EasySocial platform. One thing that has always bugged me is that the default toolbar is blue. Some sites (Like this one) and others just don't work well with that color. Facebook isn't everything. 

So with some help from the StackIdeas team, I was able to create my own custom CSS and override the default colors. Adding this code to your custom.css for your template will produce a nice black toolbar that should work with most any site. Feel free to change the hex colors to accomodate your own design.

toolbar es

Continue reading
2849 Hits
0 Comments

Changing Phoca Download Button Styles & Classes

Changing Phoca Download Button Styles & Classes

I wanted to do some further styling to my Phoca Download page, that placed a "play indicator" icon before the word play on the button and wanted it to better match my site. I also wanted to change the color of the details button to make it less obtrusive.

Here's what to do (with some help from the Phoca support forum):

Tags:
Continue reading
2693 Hits
0 Comments

Styling the Phoca Download Title and Tags

Styling the Phoca Download Title and Tags

Today I needed to add links to my Phoca Download component. In the category list, the tag links were just to large and not separated. So, I created the option to add a font awesome tag in front, shrink the font size & make the file title larger for a better user experience.

Below is the code that I added to my custom.css:

.pd-tags{font-size: 10px;
color: #4a494a;
padding: 6px;
background: #e8eaeb;

}
.pd-tags a:before {content: "\f02b ";
font-family: FontAwesome;}

.pd-filename {font-size: 20px;}

Tags:
Continue reading
2134 Hits
0 Comments

Handling Links within JEvents & Google Calendar- New Windows, Styling, Etc.

Handling Links within JEvents & Google Calendar- New Windows, Styling, Etc.

Recently, I needed to add several events, on a repeating basis to JEvents. If you are not familiar, it is one of the (if not the) best tools to building and tracking events for Joomla CMS. Frankly, I have used the free version for years, and intend on buying the commercial version just to support the further development. Their support is top-notch, even to free users - something not easily found these days, they love what they do!

So let's look at the design problem first. I needed to create daily tasks, that a user could click a link, open a new window and complete. This could be used for seminars, videos, really anything that needs to happen on a consistent basis. I wanted the link to open in a new window, to preserve my site in their browser and facilitate their return to my page. Don't want to loose any eyes.

The issue was that when the event was listed, it showed raw html on output, I wanted a cool clickable link. So, I reached out to JEvents support, and boy did they come through for me!

So, if you having the same problems as me, with the front end appearance of JEvents inside the latest events module, here is the fix.

1 - You cannot put links, HTML, or anything of that nature inside the title of the event on google calendar, period.

They MUST be placed into the description.

Enter your HTML code into the description.

 

2 - Run the update calendar function in JEvents Back End

3 - Set your "Custom Format String" in the module settings, mine looked like this:

<h3> ${title} </h3>

${content}

4 - Enjoy the final result of a fully formed, bootstrap button, that opens in a new page and handled by JEvents!

Test Task Result

Continue reading
2627 Hits
0 Comments

Adjusting Responsive Templates in Purity III

Recent comment in this post
Super User
Thank yo for your video on improving responsive design of the JoomlArt template Purity III. It made it easier for me to understand... Read More
Sunday, 25 January 2015 22:42
Continue reading
4241 Hits
1 Comment

Creating Two Different Home Pages on Joomla, Public & Registered

Creating Two Different Home Pages on Joomla, Public & Registered

It seems to me that this would almost be core functionality in Joomla, but it's not. Having a single homepage can detract from a user's experience. So today I began using the "Nomad Plugin" for Joomla on one of my sites. I use the Purity III template by JoomlArt  (this template) almost exclusively now even though it has a whopper of a learning curve, but once you know how to properly manipulate the design, you can accomplish some pretty amazing things. When Purity III is in mobile mode, it displays the sites logo or name as a button and I need the target of that button to change depending on if you are a guest, or an authenticated user.

A couple of notes on Nomad - first, it does what it says - 

Nomad is not login redirection, it's homepage redirection!!! Joomla gives you a single homepage - Nomad gives as many as you need! Per-group or per-user - as many as you need.

but, there are some caveats.

First, it does not override the default joomla menu item - where you put the star still determines what pages new visitors will see. Second it does redirect users once they are authenticated (social, joomla or EasySocial) logins. Once the user is identified as a group member - Nomad will silently redirect that group to the page you have assigned with almost no overhead.

If you are using Nomad or trying to accomplish the same thing, I would love to hear from you in the comments.  Also, please excuse the emptiness of the site, recently migrated to 3.2 and still moving data over, so please be patient.

Mike

 

Continue reading
25275 Hits
0 Comments