Mockups & Theme Styling Streamlining · Who should be in this room: If you’re not starting with a purchased theme, leave, because this will be a waste of your time, which nobody

Streamlining:Mockups & Theme Styling Shelby Elliott, Corner Market Media

shelbelliott cornermarket.media /cornermarketmedia

Who should be in this room:

If you’re not starting with a purchased theme, leave, because this will

be a waste of your time, which nobody wants. :)


About MeBusiness Owner

MomGeneral Creative

Designer, figure-outer


1. Choosing a Theme


● What are the needs?

● What is the best of the competition

doing aesthetically?

● Find something that fits these

things as closely as possible

● OR something super flexible

Some of my favorite themes...

AVADA


DIVI


STUDIO PRESS - GENESIS FRAMEWORK


2. THE MAGIC!This changed my life friends.


Try before you buy!

Here’s what you need:

● Google Chrome (or a browser with an

inspect option)

● A basic knowledge of CSS (I’ll do a

quick run down)

● The theme demo

● Your favorite text editor (I just use

Notepad++)

● Placehold.it

Quick notes about CSSElements - objects or areas on webpage

● ID’s - unique to 1 element, denoted by #

● Classes - can be applied to multiple elements, denoted by .

● Both have properties with values that specify how the element should look:


3. THE MAGIC! ...cont’d

This changed my life friends.


A Short Demo

● Digital Pro Theme

● Corner Market Media

● Disable Links

● Placehold.it

http://my.studiopress.com/themes/digital/#demo-full


http://cornermarket.media/

http://cornermarket.media/

https://chrome.google.com/webstore/detail/disable-links/kgghjfabpkpodeancnenkndklnomjpbf?utm_source=gmail

https://chrome.google.com/webstore/detail/disable-links/kgghjfabpkpodeancnenkndklnomjpbf?utm_source=gmail

http://placehold.it

http://placehold.it

4. THE MAGIC! ...cont’d

This changed my life friends.


Some Tips

Do grayscale mockup first to get

layouts approved.

Don’t purchase until after you’ve

gotten color/design approved - just in

case.

5. RecapWhat just happened?


What was just

demonstrated:

● Inspect elements you wish to change

● Change them accordingly

● Do layout approval first

● Repeat with design ideas

● Google as needed ;)

● Copy & paste into text document to

track changes

6. Finishing TouchesEnd of Mockup Phase


To finish your mockup:

● Screenshot your completed changes

● Photoshop if needed

● Send mockup to client!

● Once approved, purchase & install

theme on the site

7. Styling the ThemeThis is the best part!


One and done:

● Install a Custom CSS plugin

OR

● Create a child theme and enter the

child’s stylesheet (style.css)

● Then dump in the changes you tracked

in your text editor (clever you ;) )

● You’re (mostly) done with custom

theme styling!

8. Clean up(clean up, everybody everywhere!)


Everybody do your share:

(couldn’t resist)

● Look around on your site for elements

that look out of place

● If you run into something that simply

“didn’t take,” copy it’s unique id selector &

swap it out - quick demo on this


Questions?


Documents

Mockups & Theme Styling Streamlining · Who should be in this room: If you’re not starting with a purchased theme, leave, because this will be a waste of your time, which nobody