Did you know that if you pay for the Premium account, you not only get rid of pesky third-party ads, you also get a list of benefits you are probably not using? Like CSS, or custom design?
I’m kind of excited and scared at the same time – I’m one of those people that knows how to drive cars and use computers, but not exactly sure how the cars or computers work. Still, I’m not gonna fall behind the times – I have to regularly force myself to try something new. Like buying a Surface Pro, even though it means a week of crying “Where did my file go?” and “I want my Grandpa PC back!”
This time it will be “Oh my God, what have I done to my website?”
By the way, have you noticed what I’ve done? It’s in the right top corner – see the invitation to buy my book? See how it won’t go away, no matter how fast you scroll? Cool, huh…do you want one for your website? I will walk you through it step-by step while it’s still fresh in my mind.
I started with WordPress support post on Custom design. I didn’t understand half of it, except that you can “try it now” without purchasing an upgrade, which is a good news for those with the free accounts.
I then read through some of the CSS Customization Forum, backed away from the computer, and cried quietly in the corner. That’s my process, okay? You should have seen how much I cried over essays in highschool…anyway, the Forum will be a good resource later on, when I start getting all fancy with my trickery. For now, I will climb the mountain one step at a time. The first step I’d decided to take is create one of those (mildly obnoxious) floating invitations to buy your book or sign up for an email list. I have to credit alfageek with generously sharing the original code for an invitation to buy a book. Turns out that once you have a base to work from, learning CSS can be a lot of fun as you tinker with values and then refresh madly, to see what your tinkering has done.
Ok, now for the promised easy steps:
STEP 1. Make a widget of your banner – have a look at how to create a widget for your Amazon book or how to create a widget using Amazon affiliate link.
STEP 2. Once you have a working widget, go to the wp-admin version of your site, and click on Appearances-Customise-CSS. This is what my CSS looks like now, with custom code beginning on line 6:
STEP 2. Copy this code and paste it to your CSS window:
#text-4 {
font-weight: bold;
position: fixed;
right: -2px;
top: 120px;
margin: 0;
background: white;
border: solid 2px #ddd;
padding: 4px;
}
#text-4 h3 {
font-size: 16px;
line-height: 140%;
}
STEP 3. Almost finished! Change number “4” in lines 6 and 17 above to the order of your widget in the sidebar. So, if your widget is at the very top, change it to read “text-1” and so forth.
THAT’S IT! Now, the fun part! Play with the code line-by-line and see what it does:
6. “text-4” refers to my widget being #4 in the sidebar. Change number to reflect the order position of your widget.
7. optional line – if you delete it, the font will not be bold.
8. “fixed” position means it will stay put while you scroll through the page.
9. “right” can be replaced with “left” – that’s where it will appear on the page. -2px refers to how far it is from the edge. Mine has a 2px (2 pixels) border around it, so -2px shaves off the border on the right.
10. “top” can be replaced by “bottom”. Play around with the pixel number until you get it to the exact spot you want.
11.”margin” – add a margin, if you wish. I have none.
12. “background” – I have white. Have a look at CSS Tricks for codes to some alternative colors.
13. “border” – change pixel number to make it thicker, or delete this line if you don’t want a border. Change color code to match your website.
14. “padding” – controls the amount of background space around the text. Increase the number to make your banner larger, while the text stays the same.
15, 16 and 17 – I have no idea, just leave as is or play with it.
18. “font size” – did not seem to make a difference, perhaps it’s a combination of font size and line height (line #19).
19. change line height to make font larger.
Have fun!
Ana Spoke, author 