Changing font size, type and color
-
I’ve this blog ibrahimelbadawi.wordpress.com
I’ve the CSS custom upgrade and want to do the following:
– Change the font type, size and color of titles and bod text? I want to use Tahoma
– Have different font types for English post and Arabic posts?
Please help, thanks
The blog I need help with is: (visible only to logged in users)
-
The differences between Tahoma and what is already there on this blog, http://ibrahimbadawi.wordpress.com/ is about as close to zero as you will get. You need to include additional fonts in the stack to keep the browsers from just substituting whatever they want, but the last are exactly what is there now.
h2.post-title { font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 100%; } .post-content p { font-family: Tahoma,Arial,Helvetica,sans-serif; font-size: 100%; }Bold text is not separately defined, so it will inherit the font settings set in one of its parent divs.
To have separate fonts and such for the other language, you will have to create rules in the CSS and then you will have to declare a class in a div at the beginning of each post or page in the other language, and end the post with a closing div tag as follows.
<div class="other"> all your other language text and such here </div>' You would then create a rule in the CSS similar to this:.other {
font-family: [enter your fonts here];
font-size: 100%;
}` -
Thanks thesacredpath for the help, the font code worked just fine!
But what about the color? I added the code:color:black;
I worked ok with the post content (changed color to black) but didn’t work with the post title. I wan to change the color of the title.
Also, two other things:
– The RTL support works fine for the post content in Arabic but not for the post titles as you can see in my blog. How can I make the titles right aligned?– In the theme demo page http://themify.me/demo/#theme=elemin
you can see icons for social networking on the top right corner of the page and also on the side bar, how can I do that?Thanks a lot again and looking forward for your help on this
Ibrahim -
To change the post titles to black, you should use a selector that matches what is used in the theme. In the Notepad theme, you would do this:
.post-title a { color: black; } -
Thanks designsimply for your reply, how can I find the selector used by my theme? I’m using the Elemin theme. The selector you mentioned didn’t work.
Also, is there a list of color names that matches the thier values in hex?
Thanks
-
-
Ah, I was answering in chunks and each theme is different. To make it work, you just have to choose the right selector for your post titles. Let me look at Elemin…
-
I looked at http://elemindemo.wordpress.com/
To target the post titles in the Elemin theme, you could use this:
.entry-title, .entry-title a { color: red; } -
The RTL support works fine for the post content in Arabic but not for the post titles as you can see in my blog. How can I make the titles right aligned?
In the Elemen theme, to target just RTL posts, you could use a specialized tag for the language and then use that tag in your CSS like this:
.tag-test1 .entry-title, .tag-test1 .entry-title a { direction: rtl; width: 100%; }Replace “.tag-test1” with your custom tag.
-
Also, is there a list of color names that matches the thier values in hex?
Here’s a list of colors: http://www.w3.org/TR/css3-color/#svg-color
There are lots of other cute/neat color tools online if you search.
-
In the theme demo page http://themify.me/demo/#theme=elemin
you can see icons for social networking on the top right corner of the page and also on the side bar, how can I do that?You could add those to a text widget and then use absolute positioning to move them to the top right of the header.
http://en.support.wordpress.com/widgets/text-widget/Or maybe it would work well enough to add them to the top of the sidebar widgets.
-
Thanks a lot designsimply for the answers, much appreciated. I’m working on them 1 by 1. Starting with the RTL for the post title, how to create the specialized tag for language that I’ll use in the code? Sorry but I’m not a developer but I’m enjoying this and appreciate your help!
-
The social networking coding worked well! you can can check it (ibadawi.com)
Thanks a lot for the text box tip, this will help me a lot -
You would just add the tag to the post when you create it: http://en.support.wordpress.com/posts/post-tags/
-
Thanks!
I added the tag “AR” for one Arabic post and put this code in my CSS:
.AR .entry-title, .AR .entry-title a {
direction:rtl;
width:100%;
}But it didn’t work, the post title is still left aligned
-
What is the link for the post where you added the tag? Can you always include a link when asking for help?
- The topic ‘Changing font size, type and color’ is closed to new replies.
WordPress.com Forums 