Design With Open Source

Learn how to use (mostly) open source tools to build and design. Tips tricks and more.

  • Home
    Home This is where you can find all the blog posts throughout the site.
  • Categories
    Categories Displays a list of categories from this blog.
  • Tags
    Tags Displays a list of tags that have been used in the blog.
  • Bloggers
    Bloggers Search for your favorite blogger from this site.
  • Team Blogs
    Team Blogs Find your favorite team blogs here.
  • Login
    Login Login form
Recent blog posts

Style the Easy Social Toolbar - Custom CSS

Posted by on in Joomla

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

Tagged in: CSS EasySocial Joomla
Hits: 303
Continue reading 0 Comments

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):

Tagged in: Joomla
Hits: 349
Continue reading 0 Comments

Styling the Phoca Download Title and Tags

Posted by on in Joomla

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;}

Tagged in: Joomla
Hits: 240
Continue reading 0 Comments

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>


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

Test Task Result

Hits: 552
Continue reading 0 Comments

Removing Title-Header on Wordpress

Posted by on in WordPress

If your WordPress theme is displaying the word BLOG or the menu title on the page, and you don't want it there, this simple hack will take care of removing the "title-header" element.

The method to add css will vary from template to template, you may have to edit your style.css file or add custom CSS into your template settings, in either event just add the following code and POOF - your title header is gone.

.title-header {display: none;}

Hits: 768
Continue reading 0 Comments

Adjusting Responsive Templates in Purity III

Video shared by on in Joomla

I am truly loving the versatility that the Purity III template by JoomlArt gives me, it's an excellent design that takes a little getting used to in the administration section. As I work on the designs edge site, I will be recording many tutorial videos and posting them for you.

Be sure to subscribe on YouTube and share some feedback in the comments section, what tutorial would you like to see next?

Hits: 1984
Continue reading 0 Comments

Over the past two days I have been trying to re-render a video clip, usually a simplistic process, but after an update to the sunab repositories, quite the task to complete.  After loading the latest 0.9.10 version of Kdenlive everything worked perfectly, until I hit the render button - then my RAM would be consumed and quickly spill onto the swap area degrading system performance, and sometimes requiring that I CTRL-ALT-F5 to login to terminal to kill the kdenlive & MLT processes.

Upon researching the issue today I found that others were having this issue with as much as 16GB of memory. This new issue is the 3rd time that I have had problems with kdenlive updates, every time I see it in my package manager, I shudder a little. Today; however, there is a new hope - un-be-knownst to me and many others there is a "Last Version" repo available. That's right, not bleeding edge, not the archaic ubuntu version either...a nice little hidden gem.

So, I removed the repo in my synaptic, purged kdenlive, mlt, fre0ir and other related installations and added this blissful repository to my system...

deb precise main 

That's right, and old repository with the 0.9.8 version ready to be installed. After some package wizardry, the correct repository references, I had rolled back to kdenlive 0.9.8 and rendered a file using the normal amounts of CPU & memory. 

As an older and non-code based user, I think I will keep the -1 version repo enabled, and unless you like debugging, you may want to as well.

Hits: 1216
Continue reading 2 Comments

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.



Hits: 22949
Continue reading 0 Comments