Customize Your Joomla and WordPress Designs 500% Faster
November 29, 2017//1,737 words
Do you have a WordPress, Joomla or another CMS based website?
Do you feel limited as to what your platform allows you to do and you’re wanting to take your website’s design to the next level?
- Previewing front-end
- Logging into back-end
- Inputting code
- Clearing back-end cache
- Clearing browser cache
- Refreshing page
- Reviewing front-end for changes
This is not an over-exaggeration.
What if I told you that there was a simple way to test your code and see your results immediately on the page, without having to go anywhere?
And that you can easily copy and paste the correct code changes into your CSS file?
In this post, I am going to explain this easy process.
You can expect to reduce your time spent making style changes by over 500%.
Browser Developer Tools will Blow Your Mind
Many people are focused on paying for services that they can access and do freely by themselves.
An internet browser’s developer tools will reveal more information about your code than you knew existed.
Here’s how to access the developer tools depending on your browser:
Option 1: Go to Chrome’s menu at the top-right of your browser. More tools > Developer tools.
Option 2: Right-click on any webpage and select Inspect.
Option 3: Visit webpage and press CTRL + Shift + I (CMD + Option + I for Mac).
First, activate the developer tools by opening up Safari’s preferences, click on the Advanced tab and then check the box for “Show Develop menu in menu bar.” Then …
Option 1: Click on Web Inspector in new Developer menu.
Option 2: Visit page and press CMD + Option + I.
Option 3: Add a shortcut button to the toolbar by going to the View > Customize Toolbar.
Right-click on page, Inspect Element.
Option 1: Click on Inspector in the Web Developer menu.
Option 2: Visit page and press CTRL + Shift + I (CMD + Option + I for Mac).
Option 3: Right-click on specific element and select Inspect Element.
Using the Developer Tools
Now that you’ve discovered how to access these developer tools for your browser, you’ll see that when you activate these tools a couple of windows will open on the bottom of your page looking very similar to this:
On the left is that specific page’s HTML code and on the right is the CSS related to each specific HTML element.
This code is fully editable.
You can use it to play a practical joke:
Hide annoying ads:
Mess with a friend by altering their social media profiles:
Or just using these tools to make styling your web page 500x easier.
Realize, I didn’t hack into Google’s, ESPN’s or LinkedIn’s pages to make the changes that you see above. Those can only be seen on your personal browser and they are not saved. Once you refresh the page the code will return to its previous state.
So, here’s the easy process …
Create your page in the back-end.
Using WordPress, Joomla, Wix or you name it. Format the page how you think you’d like it to be using the administrator tools in these platforms (note: If you can get the page to look how you’d like it to without creating additional CSS code than do that. Don’t give yourself more work!).
View your page in the front-end.
Take a look at how your page will appear to others.
Not quite perfect?
Open your web developer and make tweaks.
The keyword here is “tweaks.” You don’t want to be creating your entire page using this method (although you could).
This process works better if you already have the main elements in place and you just want polish.
Click on the specific element to be changed in the HTML code and then make CSS changes to that element.
See this example:
Just left-click on the line in the HTML code for the element and then click in the space under “element.style” to input your CSS.
You can see that the changes will take place instantly.
Now, simply copy/paste the changes that you made into your CSS file in the back-end of your WordPress, Joomla or other CMS site (for Joomla, this will likely be the “custom.css” file. Otherwise, you can just input into your “theme.css” or “template.css” file).
Save your file changes. Clear your cache. Refresh the page and see the results.
If it didn’t display correctly …
One thing to realize is that when you make changes in the web developer tools to specific elements, there may be other CSS styles already affecting those elements.
There are two ways that you can get around this:
1. Overrule the previous code
If you see in the last picture above of the CSS code, I added the “!important” text after the style and before the semi-colon.
This will essentially overrule any other style associated with this particular element.
Not necessarily recommended.
Once you add this “!important” rule, you won’t be able to make future changes to that particular style of the element until you remove the rule. That can be very frustrating if someone else comes along to edit the website later.
A better alternative …
2. Locate and change the original code
When you’re in the browser’s web developer tool, take a look at the HTML element.
Notice the classes or IDs associated with the element.
Now search (CTRL + F or CMD + F) for that particular name in the original CSS file.
Read through all appearances of that given element, and when you find the style that you want to change, change it here.
Pro Tip: Keep a list of changes that you make to the code in your CMS. If your theme or template goes through an update, you could lose all of this work. If you take a note of these changes in a separate file, you can easily add them back into the code after the update is complete. Just something that I have had to learn through painful experience!
So that’s it!
Very simple and QUICK process to make style tweaks to your website.
While this is very common to some, I have realized that many others were not aware of these possibilities so I wanted to share! Makes the job of a beginner / intermediate web designer WAY easier.
If you have any thoughts on this topic, or any other shortcuts that you’ve discovered, please comment below.