Website Modification Tool – Simple Custom CSS & JS

Hi Pipers!

Today I wanted to talk about a tool that has saved my life (many times) while modifying my website.  Whether you have a free, paid or self-designed theme, you will want to make changes after it’s first installed.  If you have little, to no, web-design experience like me, this can be very dangerous territory!  I’ve tried a few free themes and while they are good, there are always things you want to do to truly make it your own.  In my endeavors, I have ‘lost’ text, images, gotten formatting way out of whack and flat-out blown up my site.  I started out learning how to make changes using the ‘Custom CSS’ option offered in your theme customization area.  When I got a bit braver, I would make some changes directly in the Theme Editor but I’m finding that some of the free and even paid themes, still hold back on sharing everything with you – so a lot of trial and error went into finding out what an element was named, what controlled it and what I had to write in CSS, JS or HTML to make the change I wanted.  It’s my understanding that for a lot of themes, your hard earned and written Custom CSS can be over written when a theme is updated.  Having put hours and days into dozens (more like hundreds!) of page-specific and site-wide changes, I knew this would kill me so I started out copying my Custom CSS into a word-doc every time I made a change. 

I’ve tried a few free and paid themes and while every one has things you love, there are always things you want change to truly make it your own. The learning curve with web design and site modification can be steep but on many occasions, this tool has saved my life!

This would work but the bigger it got, the harder it was to search for changes I had made and focus on further modifications.  Then I found Simple Custom CSS & JS in the WordPress Plugin store.  The app is by Diana Burduja and is opensource software.  There is a free version and a paid version but I am still using the free version and it’s doing everything I need.  Below is a screenshot of what the plug in looks like in my admin console.

This plugin lets me create separate files (CSS, JS or HTML) for whatever changes I want and it is safe from changes made by the Theme Creator.  I love that I can separate my code and title it in ways that make sense to me.  The CSS and JS modules can even work together as in my ‘TabbedPopUp’ example.  I can also activate or deactivate code entries if I want to ‘pause’ them but am not ready to trash them – my ‘Footer_Widgets-BackgroundBulletText_Color file shows an example of one that is deactivated.  For that one, I spent a ton of time researching what footer elements were named and how to modify them, then decided I wanted to take the footer out of my site altogether.  If I ever decide to make my footer visible again, I want to hold onto this file so my modifications are ready to implement.  Plugin Support is great and if you plan to make changes to your site do your own research – just wanted to share that this tool has been great for me.

 

Till Next Time!   Wendy

 

*As stated on my Site Policies page, if I mention a tool or app specifically, I am doing it out of a courtesy to you.  I am not receiving any compensation or endorsement and am only providing information related to my experience.  I cannot predict, nor am I or Sandpiper gfX, responsible for your experience related to downloading, installing and/or using this tool.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s