One of our more popular themes these days is Fremont. Fremont is a great, responsive theme with a beautiful slide show, a search form, favorites, and more. Hovering on top of the slide show is a welcome message which is easily disabled in Theme Options, but we are also often asked if we can change the shape to something else.
Typically our answer is that you have two choices, circle or square. But it turns out you have a lot of flexibility here. It could be a circle, a square, an oval, a triangle, a star, an octagon, and even crazy shapes. But be warned, crazy shapes are a crazy amount of work too.
All of this is possible using solely CSS. And to add custom CSS to Fremont, just go to Custom CSS in the Theme Options in the WordPress Dashboard. The rule you want to target is:
.home .main-wrapper #header .welcome
Tools I Use To Figure This Out
Working with CSS can be a bit challenging if you aren’t familiar with the technology. If you are new, spend an hour each with positioning, floats, and a general overview and you will have a good basis to work with. When learning about CSS, it’s really important to get it right, so start with the MDN at https://developer.mozilla.org/en-US/docs/Web/CSS and avoid w3schools at all cost, they haven’t updated a lot of content in years and a lot of the information up there is wrong.
Developer Tools
Each of the major browsers have a set of developer tools in the application. I use Chrome, so the Chrome Dev Tools are what I am most familiar with. On my Mac, I can click CMD-Option I and the tools pop up. I can right click any element, and choose inspect to see how that element is defined. Do a few searches online to learn about using your browser’s dev tools. For Chrome, here are two of my favorite resources:
https://developers.google.com/events/io/sessions/325206725
http://remysharp.com/2013/07/18/my-workflow-v3-full-coding-stack/
But sometimes I want an area I can play with CSS options. I have been trying out codepen.io for this recently. To do this, I copy and paste the source for the Fremont homepage into my text editor (I use Sublime Text 2), deleting some of the extra cruft I don’t need, then copy and paste that into a Codepen Pen.
Then I can quickly goof around with different options. Thats what I did with each of the sections below.
Square
The easiest shape to change to is a square. Why? Well the circle started out as a square and was created by putting rounded corners onto it. To go back to a square, just make the radius of the rounded corners really small. 0 is as small as it gets.
.home .main-wrapper #header div.welcome {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
You might be wondering why I declared a border radius three different times. Well those are vendor prefixes and in order to ensure that this works consistently across all the browsers that support this feature, I need to include the vendor prefixes as well. Search around online to learn more about vendor prefixes.
Try out some other radii as well. setting them to 5px or 20px will create some interesting alternatives.
Oval
To change the circle to an oval we need to go a bit further and define a width and height.
.home .main-wrapper #header div.welcome {
width: 400px;
height: 300px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.home .main-wrapper #header .welcome .first-line {
padding-top: 80px;
}
Triangle
This one is definitely more of a challenge. It could work well on a site dedicated to properties near a yacht club or a big sailing area. Change the color to red and it almost looks like a maritime flag.
.home .main-wrapper #header .welcome a {
margin-left:-395px;
position: absolute;
}
.home .main-wrapper #header .welcome .first-line {
margin-top: -170px;
}
.home .main-wrapper #header .welcome {
width: 0;
height: 0;
margin-left:550px;
border-left: 400px solid rgba(102, 188, 218, 0.8) ;
border-top:180px solid transparent;
border-bottom:180px solid transparent;
background:rgba(102, 188, 218, 0);
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
Speech Bubble
Here is a wierd one. This is two pieces, starting out with a rounded rectangle, plus a triangle. Not sure how useful it is.
.home .main-wrapper #header .welcome .first-line {
padding-top: 35px;
}
.home .main-wrapper #header .welcome {
width: 400px ;
height: 200px;
position: relative;
-moz-border-radius: 10px ;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.main-wrapper #header .welcome:after {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0 ;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid rgba(102, 188, 218, 0.8);
border-bottom: 13px solid transparent;
}
Other Shapes
What else can you do? Well, there are lots of things you can do. Take a look at this site for some ideas: http://css-tricks.com/examples/ShapesOfCSS/
I am definitely going to have to try that Badge Ribbon shape. Are there any others that strike your fancy? I would love to see what you can do with interesting shapes on your site. Show me what you come up with in the comments below.
