wordpress website design, development, maintenance and empowerment.
marketing support for small businesses, diy and entrepreneurs.
This was a very satisfying project to create with a talented artist over a long weekend. She needed a fast portfolio / resume site and had her content close to ready when she contacted me. It only took 24 emails over 5 days to go from project start to launch. A simple contact form and resume download makes this Twenty Seventeen one page site a smart placeholder for things to come.
When I was starting to learn WordPress, I sought, and got, some great advice from random strangers on the Internet on many WP topics. With a little assistance from the Inspect tool, I was able to figure out how to customize the look of my chosen themes.
Sometimes Google would reward me with great articles that explained how to modify standard WordPress themes to suit style requirements.
In an attempt to give back, I offer the first in a series of Custom CSS articles that I hope will empower and educate.
I learned about Twenty Seventeen at a recent WordCamp US and was looking forward to playing around with it because it has lots of new bells and whistles. As luck would have it, the very next week, a client called in need of an emergency portfolio site and Twenty Seventeen fit the bill nicely.
Among other improvements to WordPress 4.7, is the WordPress Customizer. > Additional CSS option. This new panel will go a long way for the DIY WordPress crowd. Twenty Seventeen allows users to customize css from the wp-admin without having to create a child theme. If you’re new to CSS but feeling brave, feel free to use the snippets below in the wp-admin > Customizer > Additional CSS panel.
I will add more clips over time and welcome you to offer any of your code clips in my (moderated) comments.
.site-branding {background: #000;}
body.has-header-image .site-title, body.has-header-video .site-title, body.has-header-image .site-title a, body.has-header-video .site-title a, h1.site-title a {color:#AAC300;}
Of course, you can use any color you want.
body.has-header-image .site-description, body.has-header-video .site-description {font-size: 1.3em; letter-spacing: 3px;}
#panel1 div.panel-content {background: #AAC300!important;}
You may need to use a code inspector to identify the correct panel number, section content is defined in the Customizer > Theme Options
body, button, input, select, textarea {font-family: "Comic Sans", sans-serif;}
Just kidding about the Comic Sans, but you get the idea.
ul#top-menu.menu li {font-family: "Comic Sans", sans-serif; width: 20%; text-align: center;}
.main-navigation li li a {background-color: #123E4A!important;}
.main-navigation li li a:hover {color: #B5C41E!important;}
entry-content ol, .entry-content ul {list-style-position: inside;}
.site-footer {background: #AAC300; position:relative; z-index:9999;}
.site-info a {display: none;}
#masthead .wrap {text-align: center;}
.custom-logo-link img, body.home.title-tagline-hidden.has-header-image .custom-logo-link img, body.home.title-tagline-hidden.has-header-video .custom-logo-link img {max-width: 100%; max-height: 100%;}
When developing content, you often want to make space for an image in your page before the image is actually available. This tool allows you to create placeholder images at any size just by pasting the following into your text editor tab and adjust the numbers accordingly.
<img src="https://via.placeholder.com/150">
creates this:
If you’re stuck on creating content for your website or marketing campaign, here are some ideas and tools that might help you get started.
I use dummy text when creating a site while content is being developed. It can add some humor to the challenging process of content creation while also motivating feedback during the design process.
My favorite lorem ipsum site is MeetTheIpsums.
http://meettheipsums.com/
This video does a great job going over how to add an image to a wordpress page or post.
i also found this nice article on how to do the same thing, with a bit more explanation about other types of media attachments… videos, audio files, pdf documents, etc.
http://easywpguide.com/wordpress-manual/adding-images-other-media/inserting-an-image/
If you have not already completed my free consultation form, please do that now if you’re interested in starting a project with me.
