Current User: Guest
Please consider registering


Register? | Lost Your Password?

Search Forums:


 






Minimum search word length is 3 characters – Maximum search word length is 84 characters
Wildcard Usage:
*  matches any number of characters    %  matches exactly one character

Support Forum Techozoic Documentation of all available font elements for custom css

Documentation of all available font elements for custom css

Unresolved
Page:   1  
No Tags
UserPost

1:40 pm
January 25, 2010


SpartacusB

Member

posts 10
 
 
1

Hi,

In searching the forums I found references to some custom css elements that control font sizes of the site. However, these are a bit too global in nature for me to accomplish what I need to do. For example, I want to be able to reduce the article title font sizes independently of other font sizes, because my article titles are long enough that they wrap and mess up page layout unless I reduce the font size.

So the only elements I know of now are:

.entry {
font-size:1.9em;
}
body {
font-size: 80%;
}

Is there a complete list of all the font elements I could find somewhere so I can fine tune my custom css? I'm an accomplished database application developer to you can talk tecchie to me, but I know only rudimentary HTML and almost nothing about css.

Thanks for your help.

2:15 pm
January 25, 2010


Jeremy Clark

Admin

posts 484
 
 
2

Post edited 2:16 pm – January 25, 2010 by Jeremy Clark

Here is a list of elements. I'll also look into more granular control in the options panel.

  • body Main Body Font size – This is adjustable in the options
  • h1 Main Blog title in header
  • h2 Post Titles
  • .sidebar h2 Sidebar Headings
  • .entry Post Content
  • .sidebar Sidebar Text
  • .commentlist Comment Section
  • .description Subtext under header h1
  • #content Main area of blog content includes all posts

One thing that I do suggest is a plugin for Firefox called Firebug it will show you all the different elements of a page and the associates styles, but the big thing is it will allow you test changes to styles in real time. There is also the IE developer toolbar for IE that does almost the same thing. These are invaluable when working on CSS.

Like Techozoic?
Rate it here or donate securely with PayPal to support my further development of Techozoic.

4:46 pm
January 25, 2010


SpartacusB

Member

posts 10
 
 
3

Thanks very much for the quick feedback. I'm curious: what is the difference between the 100% size reference and the 1.9em sizing reference? Are they interchangable or is one appropriate for one element and the other works for different elements?

Is there a basic reference on this subject that you would recommend so that I could save you from being asked such rudimentary questions?

Thanks,

8:04 pm
January 25, 2010


Jeremy Clark

Admin

posts 484
 
 
4

Percent and em are both dynamic sizes 100% and 1 em are the same. If no size has been assigned to a parent element of the page then it percentage or em will be based off of the default font size of the browser. But if a size has been assigned to the parent element then it will be percentage of that size. Say the body tag has a font size of 10pt, and the entry has 90% or .9em then the entry text will have a font-size the same as 9pt font.

The W3C schools has some good reference on css as well as other languages.

Like Techozoic?
Rate it here or donate securely with PayPal to support my further development of Techozoic.

1:51 am
January 26, 2010


SpartacusB

Member

posts 10
 
 
5

Thanks much, and here's another question on this topic:

From my experimentation it seems that the .entry element and the #content element have the same effect. Furthermore, it seems that the text when I'm displaying the article is always a percentage smaller than the text of the article on the main page. IOW, I can't see a way to make the text of the article on the blog home page be the same size as the text in the actual article. Am I overlooking something?

If I enlarge or reduce the .entry element, the text in both locations will enlarge or reduce. Same for changes to #content. However, I can NEVER make the text of the actual article be the same size as the text in the articles excerpt in the main blog home page. It is always smaller, no matter what I do.

Here are my current custom css settings:

.commentlist {
font-size: 120%;
}
h2 {
font-size: 160%;
}
.sidebar {
font-size: 100%;
}
.entry {
font-size:1.5em;
}
#content {
font-size: 80%;
}

8:08 am
January 26, 2010


Jeremy Clark

Admin

posts 484
 
 
6

Yes that's my fault I've got a rule in the stylesheet that applies to the content on a single content page. If you like in the style.php and find this rule near the bottom.

.widecolumn .entry p,.commentlist li,.trackback li,#commentform input,#commentform textarea,.sidebar {
font-size:.9em;
}

remove the .widecolumn .entry p, and the font-size should now take the size given in your custom css.

Your question about #content and .entry all of the individual .entry classes are wrapped in the #content div so they inherit the rules. The .entry is the part that has the background-color on the main-page, therefore the Post title post categories and such aren't subject to the .entry rules but only the #content rules.

Like Techozoic?
Rate it here or donate securely with PayPal to support my further development of Techozoic.

5:07 pm
February 25, 2010


SarahM

Guest

 
 
7

Hi Jeremy, I'm doing blog (my first with WP) with this theme and would like to know if I can change H1 and if so where? You mention the body font can be adjusted in the options but didn't mention if that was true for H1?

Thanks in advance for your help!

Jeremy Clark said:

Here is a list of elements. I'll also look into more granular control in the options panel.

  • body Main Body Font size – This is adjustable in the options
  • h1 Main Blog title in header
  • h2 Post Titles
  • .sidebar h2 Sidebar Headings
  • .entry Post Content
  • .sidebar Sidebar Text
  • .commentlist Comment Section
  • .description Subtext under header h1
  • #content Main area of blog content includes all posts

One thing that I do suggest is a plugin for Firefox called Firebug it will show you all the different elements of a page and the associates styles, but the big thing is it will allow you test changes to styles in real time. There is also the IE developer toolbar for IE that does almost the same thing. These are invaluable when working on CSS.

2:03 pm
February 27, 2010


Jeremy Clark

Admin

posts 484
 
 
8

In the options page I have a typography page that has size adjustments for the headings of the blog the main heading size is the h1 size post headings are the h2 size therer aren't any adjustments for the h tags below that but they are based off the default body size ie increasing it will also increase those. You also set your own values if you know a little CSS in the custom CSS box under the general settings.

Like Techozoic?
Rate it here or donate securely with PayPal to support my further development of Techozoic.
No Tags
Page:   1  

Reply to Topic:
Documentation of all available font elements for custom css

Please include the version number of theme that your asking about. As well as a link to the website where the problem is happening if applicable. Thank you.

Guest Name (Required):

Guest Email (Required):

HTML Editor
Smileys
Confused Cool Cry Embarassed Frown Kiss Laugh Smile Surprised Wink Yell
Post New Reply

Guest URL (required)

Math Required!
What is the sum of:
7 + 9    


Unresolved


About the Jeremy Clark – TechNet.com Forum

Forum Timezone: America/New_York

Most Users Ever Online: 66

Currently Online:
18 Guests

Currently Browsing this Topic:
1 Guest

Forum Stats:

Groups: 2
Forums: 3
Topics: 359
Posts: 1268

Membership:

There are 307 Members
There have been 120 Guests

There is 1 Admin
There is 1 Moderator

Top Posters:

BartC – 107
demoondoggie – 23
Heather – 21
SarahM – 15
mpromp2 – 15
Monica – 15

Recent New Members: livewise, mpromp2, kevin, cbegg50, kismetconsulting, AdminKim