…by understanding what you can control with CSS!
→ I can’t make a clickable custom header!
→ The color of my multimedia box doesn’t match my background!
→ My navigation buttons are too small!
→ My widgets aren’t blue like the demo!
→ I can’t figure out where to put Adsense and my bullet points line flat up the left margin of my sidebar and look like crap!
Did you just get Thesis and it’s already busted? Got text floating off the page? A FAILed header? Did you order Thesis because you wanted usability but instead the waitress brought ubiquity with a side of CSS and PHP? I understand, it happens even to the best of us. But there’s a reason why so many people migrate to Thesis and can’t dream of ever switching back. The destination is worth the journey. Yes, the learning curve to learning Thesis is steep, especially if you’re completely new to writing a blog and don’t know anything about using an FTP client (like Filezilla, Fugu or Cyberduck) or how to style websites with CSS. It looks like this:
So in order for you to get away from your comfort zone of WYSIWYG editors (temporarily) and on the road towards beating the Thesis learning curve I’ve put together some of the most commonly used CSS terms. Once you understand what these do you’ll be able to fire up your text editor and customhack your blog like a pro.
Understanding CSS:
Background
Thesis Example: .custom #header { background: #333333; }
This makes the background of the <div id=header> a dark grey color.
Padding and Margins
Here is a thorough explanation.
In your custom.css you’ll often use margins to move elements around (like this example towards the end of the thread) and padding to touch up spacing issues (such as your bullet points jutting up against borders or content boxes.
The shorthand way or writing margins and padding works like a clock from 12, 3, 6, 9 related to top, right, bottom, left. So if you want all sides different you would write something like {padding: 1em 4em 0em -4em; } to supply 1em from the top, 4 from the right, zero from the bottom and -4 from the left.
Borders
You can find a list of your border options here. You can also specify all borders i.e. {border: 1px solid #999999; }. This will produce a 4-sided border in the solid format that is a light grey color all the way around. Individual sides can be called as well: {border-right: 1px dashed #eeeeee;} and you can also hide borders simply by {border-bottom: 0px; }
Radius
Want to make spiffy looking rounded corners? Lets look at your nav menu in Thesis. We can make all corners rounded or specify individual ones in our css like this:
.custom #nav_area ul li {
-moz-border-radius: 10px ;
-webkit-border-radius: 10px ;
border-radius: 10px ;
}
The “-moz” is specific to users reading your site with Firefox. The “-webkit” is for people using IE and the border-radius is the web standard for most other browswers.
Links
Lots of options with links. Here is what you’ll need to know using your navigation links as examples.
.custom ul#tabs li a {color: #ffffff; }
The “a {color: #ffffff; }” is the important part. That means that the TEXT color of the link will be bright white (#ffffff).
.custom ul#tabs li a:hover {text-decoration: overline; font-weight: bold; }
The “a:hover {whatever}” is the important part. The a:hover defines what happens when you roll your cursor over a link. In this example, we’re telling the text of the link to put a line over itself and “bold” itself.
If you understand what each part of your code does, it makes it a lot easier to piece parts of your site together because you can apply all the same commands to different parts of your site via your custom.css file. If you’d like more specific answers to questions, check out the official DIY Answers page or ask the crowd over at the Support Forums.
If you’d like more ways to “piece-of-cake” your Thesis blog, please read this:
Things I Wish I Knew When I Started Using Thesis
And, if you are having a specific design problem, let me know if the comments. I respond to each one and will be glad to help.
If you want to find me on Twitter, I'm 
{ 8 trackbacks }
{ 55 comments }
Hi Rob,
first I read your post on buying thesis because you thought it would be so easy, and I felt relieved that I am not the only one feeling a little overwhelmed! I have two more days to return thesis, and I really don’t want to, but I am so lost…
I loved your where to find the custom php file, I didn’t even know that. So my first question is this…
I am trying to get the featured content plugin to work and I have found a thread that deals with this issue, but I am not sure I am even putting the code where I need to. under the design options page I am putting it in the custom code box. Is that right? Or do I need to go to the custom.php page? If I can just make this one thing work, I will keep thesis, I really need this feature!
p.s. I did subscribe to you site, and appreciate any help!
Rob,
I downloaded the open hook plugin and put the code in the multi media box, still no luck I guess I need to undo all my plugins and see if that is where the problem is next
ok so I put the code in the featured box in open hooks and it is showing up! yeah except I want it to be where the multimedia box is, but I put the code in no luck. do I need to have something set in my design options page?
Hi destri, I just want to make sure that I understand what you want. You want to put some custom code into the multimedia box, right? Can you tell me what code you’re using and maybe even link an example of what you’d like it to look like? That way I can test it out locally and get back to you with a fix. Look forward to seeing what you’re working on!
Rob
destri, I just checked the DIY forums. If this is the code you’re trying to use it will only work in your custom_functions.php file OR in the OpenHook plugin. Pasting in your multimedia box won’t, which makes sense as to why you’re having trouble.
// *Featured Content Gallery */
function featured_content() {
global $post;
include (ABSPATH . ‘/wp-content/plugins/featured-content-gallery/gallery.php’);
}
add_action(’thesis_hook_after_multimedia_box’, ‘featured_content’);
If you paste the above code into your custom_functions.php file (located at: ~wp-content/themes/thesis/custom/) and save you should see it below your multimedia box. However, you can change it to display wherever you like by redirecting the hook (that means changing ‘thesis_hook_after_multimedia_box’ with a different hook of your choosing.
If that doesn’t make sense shoot me an email.
oh I could kiss ya, i won’t but I could! so this is all starting to make some sense to me…kinda, I really have no business messing with this stuff, but hey, everyone has to start somewhere! Thank you! I will let you know when I need to bug you again…
destri
by the way I just used it in the above multimedia box and then on the design page changed the default for the multimedia to not show…
I checked it out and I think it looks really good! Let me know if there’s anything you need problem-solved and I’ll do my best.
R.J.
Thanks for the information. I bought Thesis last week and it is all now starting to click. YAY!
I may be wrong, but shouldn’t the red part of the learning curve, the css and php part, not be so steep, I mean instead of going straight up, which depicts to me that it happens quickly, shouldn’t it drag to the right to show that it takes time? I still get it though, and it was a great analogy.
Question: Sometimes I see example code using color as 3 letters intead of the normal six (hexadecimal), such as #fff, how come the threee letters works if the color code is supposed to be hexadecimal?
Hi Manuel! Now that I think about it, yes, the red curve should project as a long slope to the right instead of the cliff that it is now. I still think the steep cliff is a better visual representation though since it reflects the mountain people think they need to climb to get used to working with custom files in Thesis. Engineers-1. Chemists-0. You win
About your #fff question, hex code can be written as three letters if you have a repeating letter or number in your full code. For example, abc is the same as aabbcc. Hope that makes sense. Please stop by and hold me to task for all my graphs in the future. That will keep me on my toes.
Hi,
I tired your rounded corners code and it does not work… I also tried with
ul#tabs as I had to use this to take all the borders…
Has it changed since you last wrote this article???
Thanks!
Hey Veronique,
I didn’t include a closing bracket for that part so that could be the problem. Fixed now. Try this:
.custom #nav_area ul li {
-moz-border-radius: 10px ;
-webkit-border-radius: 10px ;
border-radius: 10px ;
}
Also, for your site specifically, if you wanted to hypothetically make your navigation tabs rounded you would use:
.custom ul#tabs li {
-moz-border-radius: 5 px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
If you’re still having problems let me know what you want to change and I’ll try to give you exactly what you are looking for.
Thank you so much… it worked! Unfortunately, it did not look good with my page. But I really appreciate your help!
Please how do i change the default text color in thesis
Hello showtime. To change the color of the text in your posts, use this in your custom.css file:
body.custom {color:#444444;}Be sure to change the 4’s to whatever hex code you’d like.
Thats fantastic would you happen to have the code that changes the catagory and or page header text color , this site is incredable
Thanx you for the last help Showtime
resolved!!!!!
sorry i jumped the gun
still looking for the code that changes the catagory and or page header text color and link color would be a cherry on the top 
If you send me a link to your site I will be able to help a lot quicker. Also, do you mean categories in the side bar, page titles, post titles, or links in the nav bar? I’m not sure which ones to shoot for and I don’t want to give you the wrong code
http://jobquotewindsor.com/blog/
I was concerned about the catagory headings over the posts as well as the cat links in the side bar\
Thanx S T
Ok, to change color of the title of each sidebar category, put this in your custom.css file:
.custom .sidebar h3 { color:#999999; }Change the 9’s to whatever hex color you’d like.
To change the color of the link to each post title, use this in your custom.css:
.custom .headline_area h2 a { color: #ffffff; }Change the f’s however you’d like. If that last one doesn’t work, drop the “headline_area” part and try again. Hope that helps!
R.J i cant thank you enough i will find a way to change the links color in the sidebar but im so happy right now(i have read till my eyes bleed how to change the text color etc) that i dont even care that my red wings are losing hahah
Again i owe ya a cold beer thanx Showtime
No problem man. And btw, you can change the color of the links in the sidebar like this:
.custom #sidebars a {color: #999999; }Hope it helps!
RJ
Now thats what i talkin about thanx bro.
i will keep all these hooks and put them together in one file for other noobs
Mornin J.R.
I just added the Open_hook plugin to my thesis and added an imput to my footer.
Now if i wanted to remove that it dosent show up in my custom_functions.php on my site?
Would you know how to remove a hook added via the open_hook pluggin
The hook page says the foloowing though
“Take care not to save unwanted changes. You’ve been warned.”
Any ideas???
Showtime
R.J ooops
< red cheeks
Hey showtime, the only way I know to remove code in OpenHook is to delete it and save my changes using the “Little Ass Save Button.” However, the best person to ask is the creator, @kingdomgeek.
Thanx will do
I don’t know if your familar with the plugin but when you select a hook location from the dropdown box it brings you to that section of the page where you type in what you disire
Only problem is it dose’nt record it in that box after hitting the “little ass save button”
And if it dosen’t record I could’nt append or correct anything that i put in there, as well i can’t find the entry in the “custom_functions.php’ either.
hmm.
Guess i shouldn’t take the easy route with plugins when i could read and learn to use “div#footer. ” and “thesis_hook_footer ” instead .
Off to Kingdomgeek thanx again cheers
Geeshe!!!! I do tend to give up easily when i’m new to something arrgh
I found it thanx bro
Hey bud on a seperate note
I’ve noticed when you reply your bg color of the comment is blue
Is there a way i can assign a color to a member with whom im having an ongoing dicussion with to make it easier to follow if the blog ever gets busy??
you get that carpeting and padding ripped?
Yes, the carpet was easy, the rest was a pain but it’s all done.
Gday R.J hope all is well
I have a couple of questions if i may
i am using the “AWPCP Classifieds Management System Plugin”
And the default text seems to be the same color as the ad box,is there a way to change this?
I would also like to change the color of the classified link in the sidebar so it stands out
Could you recommend a direction to go? thanx
showtime
Well figured out the default bg color of the text box
Is there a way or a line of code to add somewheres to make the rotating header images NOT be clickable?
Which rotating header images?
? not sure what you mean ,? dynamic rotating header pictures like the ones that berchman tutuorial teaches? any rotating images i would think
I want to make them non -url – clickable.. some kind of “no follow”text im just not sure what to add
rel=”nofollow” ???? im lost
I don’t know what Berchman says in that tutorial, but off the top of my head I would think to remove any from the code and see how that works out.
Hey RJ —
i posted this in the forums but havent gotten a working answer yet. can you help— its a bit of a unique-ish request.
I need to have to unique headers.
first one — home page — has horizontal logo image to the left and 468 x 60 banner to the right.
second — all other pages — has stacked version of my logo to the left with larger 728 x 90 banner to the right.
the idea here is that my branding remains larger on the home page, while ads get more space on subsequent pages, and i change the logo for the stacked [narrower] version.
also – im having trouble with getting the ad banner to “float: right;” properly on the home page… ive checked my widths and all that, but i must be missing something… both banners get pushed down to the next line below the logo, or above the logo if i specify “above_header” in the hook.
here is my site.. which is a mess of different stuff right now.. trying to find something that works!
heres the site…
http://www.kelceyparkerdesign.com/auctionnews/
just all placeholder.. and experimenting right now.
thanks — kelcey
Hey Kelcey, I just checked your site and it looks like you’ve got it all figured out.
Yes… well I wouldnt say “I” got it all figured out… but Kristarella did. im sure you know who this is. The solution is posted in the Thesis forums, and its pretty cool. I’ve been avoiding PHP for the last few years, but now I’m afraid that I am starting to like it. just still scared of it. and Thesis. terrified of Thesis.
kelce..
My latest problem is with th widgetized footer. i cant seem to get them to float properly. i have added a BG color so you can see that the widths arent the problem. can you take a quick look at it? the footer widget tutorial is from here:
http://www.fergusweb.net/coding/thesis-tutorial-creating-new-widget-areas/
I’m writing up a short article about that for this weekend, but I’ll shoot you an email with an advance answer.
Hi Rob,
Well you seem to be just too good to be true helping all us Rob wannabees! Thanks in advance.
I’m trying to do two things.
At http://www.lucidcontent.com I’m trying to change the color of my header – by which I mean ONLY the text… Lucid Content – A Website Copywriting Firm I want that text orange …and I want to change the color of the tagline underneath that to the same color, orange.
And, I want to move both lines down a bit, but they are sort of linked together with my photo so if I try to move the headline/tagline the photo comes with it. Can you help? Thank you!
Richard
Hello RJ
Hope all is well with you
I was wondering if you could tell me a way to insert javascript link into a post, or a sidebar
I have read all day and cant seem to find a way to get my theme to showit
this is the code im trying to get to work:
************
Here is a blog that has all the blog links on the side as an example:
****http://www.windsorshadow.com/No-reason-to-stop.html#comments***
Thanx for any help you can supply!
I like the fact that you give me the inspiration to learn
I read and read all day and as soon as I gave up and posted here i found the answer <<< red faced thanx bud
Great post man. This helps, but I was wondering if you knew the css code to be able to have the multimedia box sit above the content box. Any help would be great. Thx!
Hey Nick, it’s not css, but you can repeat the multimedia box as proof of content by pasting the following into your custom_functions.php:
function test() {?>< ?php thesis_multimedia_box(); ?>
< ?php
}
add_action('thesis_hook_before_html', 'test');
Just change the hook to get it where you want on your site.
There's sure to be a way to make that your primary mmbox, but I'll have to look into if further instead of giving you some hack answer.
Hope that helps!
Hi RJ
Thanks for all these tips. I only downloaded Thesis yesterday so I am still working on the site. ( don’t laugh)
I founder could you help with a few things:
The rounded corners on the nav menus don’t work. I copied your code as follows but I must have omitted something:
body.custom { background: #990033; }
.custom #container { margin-top: 2em; margin-bottom: 2em; padding: 0.3em; background: #33332f; border: 0.4em solid #3e3e3a; }
.custom #page { background: #fff; }
.custom #header { border-bottom:none;
height:125px;
padding-top:0;
padding-bottom:0;
background:url(images/banner.jpg)
center left no-repeat; }
.custom #header #logo { display:none; }
.custom #header #tagline { display:none; }
.custom ul#tabs li.current-cat a, .custom ul#tabs li.current_page_item a {
background-color: #990033;
color: #ffffff;
}
.custom ul#tabs li {
-moz-border-radius: 5 px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.custom #widget_content {
background: #fff;
color: #111;
padding-left: 1em;
-moz-border-radius:5px;
-webkit-border-radius:5px ;
border-radius:5px ;
padding: 1em 0em 1em 1em;
border: 4px solid #777777;
}
.custom #widget_content .widget_icon {
float: right;
margin-right: 0.5em;}
.custom li.widget .my_widget_header {
background: #990033;
-moz-border-radius:5px;
-webkit-border-radius:5px ;
border-radius:5px ;
}
.custom li.widget .my_widget_header h3 {
color: #000000;
font-size: 1.5em;
text-align: center;
}
Also, how do I get special characters like Tõnu to show up in your custom widget.
Lastly, how do you make the sidebar text and fonts look something like this
http://simplemom.net/
thanks Eamonn
Comments on this entry are closed.