ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   Takuin
   Member

   Ian,

   I have to say the new Thematic, out of the box, looks awesome. For me, it blows away the previous version. It is very close to what I like to see, without modification (I am currently using Acamas). It has inspired me to take the plunge and work out my first child theme.

   After first seeing Thematic on my site, I decided I wanted to make some changes in the typography department. So I popped open the html readme file in Thematic and there it was; the exact sort of typography I wanted to use. You may think this is silly, but your Guide to Thematic looks great. THAT is exactly what I want my blog posts to look like. (For those of you that don't know what I am talking about, open the readme file in the thematic folder.)

   So, what do I need to look for when making those kind of modifications? What fonts, sizes and so on? I noticed that below the heading, "A Guide to Thematic," the font is a bit larger than normal text. Is that something that could be done through modifying the optional excerpt somehow, or is it a simple h1 h2 h3 kind of thing? Basically, I want to have the ability to craft a post that looks as cool as the guide you made.

   What advice do you, or any other able-brained person, have to bring this look into being? Just so you know, I have no real experience with making a child theme, but I am now going through your how-to posts.

   Thanks in advance for any help you or anyone else may be able to provide.

   Takuin Minamoto Tokyo, Japan

   Posted 10 years ago #
2. 

   micahcooksey
   Member

   Hi Minamoto San,

   I looked at the readme, and the title text is, as you had thought, an H1. The text after that, is a class, which means it is a paragraph that has special styling. Here is the CSS: '
   p.intro {
   color:#111;
   font-family:Georgia,serif;
   font-size:24px;
   line-height:36px;
   }'
   The font for both items is Georgia. Here is the complete stylesheet for the readme:
   '<style type="text/css">
   @import url('library/styles/reset.css');
   @import url('library/styles/typography.css');
   body {
   color:#333;
   font: 14px "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
   line-height:21px;
   margin:72px auto 53px auto;
   width:800px;
   }
   strong, em {
   font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
   }
   em.thankyou {
   font-family:Georgia,serif;
   font-size:18px;
   margin-bottom:36px;
   }
   p, ul, ol, dd, pre {
   margin-bottom:21px;
   }
   pre, code {
   font:13px Monaco, monospace;
   line-height:21px;
   }
   p.intro,
   p.intro em {
   color:#111;
   font-family:Georgia,serif;
   font-size:24px;
   line-height:36px;
   }
   ul {
   list-style:square;
   margin-right:3em;
   }
   h1 {
   color:#111;
   font-family:Georgia,serif;
   font-size:36px;
   line-height:36px;
   margin-bottom:24px;
   }
   h2,h3,h4 {
   color:#111;
   font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
   font-weight:bold;
   }
   h2 {
   font-family:Georgia,serif;
   font-size:18px;
   letter-spacing:2px;
   margin-bottom:21px;
   padding-top:21px;
   text-transform:uppercase;
   }
   h3 {
   color:#333;
   font-family:Georgia,serif;
   font-size:18px;
   font-style:italic;
   font-weight:normal;
   margin-bottom:21px;
   }
   li {
   color:#111;
   }
   li h3 {
   color:#111;
   font-size:14px;
   font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
   font-style:normal;
   font-weight:bold;
   margin:0;
   }
   li p {
   color:#333;
   }
   .content-column {
   float:left;
   margin:0 3em 0 0;
   }
   iframe {
   border:1px solid #ccc;
   border-top-color:#aaa;
   margin-bottom:21px;
   }
   #ts-forums {
   height: 300px;
   margin-top: 10px;
   width: 100%;
   }
   </style>' I would suggest implementing select portions of that into your style.css file to achieve the desired look.

   Hope that helps!

   P.S. I lived in Japan for 10 years and speak Japanese fluently :)

   Posted 10 years ago #
3. 

   Takuin
   Member

   Wow, thanks. That is a lot of info and I appreciate your effort. I'll give it a try and post the results. I'll let you know how it goes.

   By the way, where did you find the above code? Is there an easy way to find this sort of thing?

   Thanks again.

   Posted 10 years ago #
4. 

   micahcooksey
   Member

   Hey, glad I could be of help to you! I got the code from the View Source function in Firefox.
   I would definitely recommend the Firebug plugin for Firefox if you are considering doing web design on any level because of its long list of features that really help when designing Wordpress themes.

   Anyway, glad I could help you,

   Micah

   Posted 10 years ago #
5. 

   Takuin
   Member

   Micah,

   Thanks for all of your help. Unfortunately, I could not get it to work at all. I posted it as it appears above, but there was no change in Thematic. I am thinking of approaching this in a different way, so I may post another thread on the forum for that.

   I like the typography in Acamas (I am already using it on my site), so I am thinking of playing around with that. My current idea is to completely remove the sidebar from the post pages, then make the post area centered and a bit wider than it already is. But ONLY on post pages (and possibly on Pages). So essentially, when you are reading one of my posts, all you will see is the post itself (apart from the header...maybe I'll remove that too?). Any pointers on this?

   And thanks so much for pointing out Firebug. I didn't know it existed before you mentioned it. It seems useful.

   Takuin

   Posted 10 years ago #
6. 

   micahcooksey
   Member

   Hey, I don't know why I forgot to mention that you should remove the '<style>' tags at the beginning and end of those styles. Sorry! If you want to apply special styles to a specific paragraph and not the rest of the content, such as the first paragraph in the readme, use the following steps:

   • Make a new class and call it whatever you want
   • Insert the following code before and after the paragraph in question: before: '<p class="whatever_you_called_it">' then after:'</p>'
   • then in your CSS, just copy or modify the code above for the intro, and replace p.intro with p.whateveryounamedyourclass.

   Sorry for my delayed reply!

   Posted 10 years ago #

RSS feed for this topic

Reply

You must log in to post.