While we wait for Blogger to introduce template customising options to Dynamic View, here's how you can change your Post Title's color (in Dynamic View). This is a respond to an anonymous blog reader. I figured the answer will serve better as a post rather than a comment-reply.
If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
Hex Color Code Generator
If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
h1.title a{
color: #0033CC;
}
See the weird number in the code above (#0033CC)? That is the hex for your color. You can generate your own hex for a color of your choice by going to the following useful link:Hex Color Code Generator
Enjoy folks.
Thanx for this too. But can you help with the color and size of main blog title? Also how to do similar changes in the pages we add?!
ReplyDeleteThanx Yoboy!:)
@रवि: The tweak in this page will change the color of the title in your static pages as well. As for your first question, see the link below:
ReplyDeleteChange Dynamic View's Blog Title Color and Size
Cheers buddy.
Hi, thanks for this tutorial, it is really helpful!
ReplyDeleteI also have another question, are you just experimenting to find the CSS rules and codes, or is there a specific place that has all them all? The reason I am asking is because I am trying to center my posts to the middle of the screen, instead of off to the side as you can see here:
http://otcpharmacy.blogspot.com
I have had people tell me that the bigger the screen, the more off center it looks because it seems to be staying at a fixed distance from the side bar as opposed to centering itself on the screen.
Thanks again!
@TheMan: You need a combination of some developers tool (Firebut, MeasureIt, etc), some experience, some experimentation and a lil bit of luck.
ReplyDeleteAs for your case, add the following CSS to center your content's body:
.sidebar #main.hfeed #content .article{
display: block;
margin-left: auto !important;
margin-right: auto !important;
}
Also, you have an empty adsense box floating near the right side of your blog. If you hide this box, your posts will be better adjusted to the center. To hide your adsense box:
.sidebar #main.hfeed #content .article .adsense-aside{
display: none !important;
}
.sidebar #main.hfeed #content .article{
padding-right: 0px;
}
How would this be done in Magazine view? I have an Adsense ad causing a large empty bar on my right margin of posts. I've been trying to apply something like this to no avail. You're a God with CSS YoboY, thanks for the tips on here
DeleteNever mind, figured it out!
Delete.article.has-ads {
padding-right: 0px;
min-height: 650px;
}
Will remove the blank spaces.
Wow, perfect! Thanks! I am definitely recommending this blog to my friends. Your help has been incredibly useful.
ReplyDelete@TheMan: You're welcome. That's nice to know. Have a pleasant weekend :)
ReplyDeleteYoboy. How would I assign a different color to each of the pages in my navbar? Thanks!
ReplyDeleteJon
@Jon: Hi Jon, add this to your CSS:
ReplyDelete#pages.tabs ul li:nth-child(1) a{
color: yellow;
}
#pages.tabs ul li:nth-child(2) a{
color: red;
}
#pages.tabs ul li:nth-child(3) a{
color: cyan;
}
Cheers.
Yoboy Checkout this blog-
ReplyDeleteThe guy uses flipcard theme but has graphical representations of "Date" and "Label"
http://www.slowbizz.com/
How can I do that!!!!???? That is a really awesome change!
Thanks so much in advance.
PS. I am a teacher using these dynamic views blogs for studnent portfolios- so a hundred students from Hawaii are visiting your blog everyday to use your CSS! You are getting some of them hooked. some have already written to you directly!
Here is an example: http://ninja8o8.blogspot.com/
Yoboy another question- what is the width that the header image must be in order to exactly stretch across the whole screen in dynamic views?
ReplyDeleteThanks,
@Jon Pennington: That's great Jon. You must be an awesome teacher.
ReplyDeleteAs for the graphical representation, it isn't hard to do. I wrote a code for someone in some comment somewhere, let me see if I can find it..
Found it. That person is Slowbizz, the owner of the blog that you've seen. See my reply here.
Let me know if you need further clarification on it. Merry Christmas Jon.
@Jon: Just saw your other question. There is not defined answer for your question, as the width of the header depends on the width of your display size. So, you need to use your best judgment when it comes to the header's width, as a wide header will look awful in small screened devices.
ReplyDeleteHi again :) I have been scouring the WWW, but can't find the answer (again) which makes me think that it might not be possible (again) - but you seem like the right person to ask anyway!! I wanted to know if it is possible to target the text color of a blog post using CSS in the Dynamic Views? The problem is that using the template settings, I have to use the same font color for both then body of the blog post, and for the names of users in the comment section (for whatever reason). The problem is that I have links highlighted black, so that the text in the comment section needs to be white (so that you can read the links). However, in the body of the text, being on a white background, the text needs to be black. For some reason this only effects the comments section (links are the perfect white on black bkgd in the body of the post). I figured that the easiest solution, aside from manually changing the color of each blog post, would be to target the text color of the post as opposed to the comment section - but I figure it out what this is being called in the html, and therefore can't effect any change. Any ideas?
ReplyDeleteThanks, E
canadieren.blogspot.com
@Erin Jeanne Wright: You've found the right person if your problem is concerning CSS. Here, this code should fix it. Add it to your CSS.
ReplyDelete.blogger-comments .comments-content .user, .blogger-comments .comments-content .user a{
color: white !important;
}
Happy new year...
Ahh, you are a genie! Works like a charm, thanks :) Happy New Year to you too! E.
ReplyDelete@Erin Jeanne Wright: No problem at all. Cheers :)
ReplyDeletethere is any way to make default text direction for posts from "ltr" to "right to left" and "right aligned"?
ReplyDeleteI happen to know a way. Add this to your CSS:
Deletehtml, body {
direction:rtl !important;
}
Cheers.
You're welcome :)
Deletesorry that bother you again!!
DeleteI used above code to change whole blog to rtl direction and now in heather, my search bar is in right and at the left of that there is blog title and left of that blog description .
can you help me to move search bar to left side of header?
thank you
I need to have a look at your blog. What's your blog's address?
Deletesure !
Deletethis is one of them:
http://iriproudlink.blogspot.com/
Noted. Add this to your css:
Delete#header .header-bar .title {
margin-right: 20px !important;
margin-left: 235px !important;
}
#header #search {
right: auto !important;
left: 10px !important;
}
Cheers!
thank you.
Deletethat's very amazing!!
I want to learn CSS! can you introduce me best and shortest way to do that?
I,ve tried some e-books and none of them was usable for blogger because I don't have original CSS code of blogger pages so I can not change that for my use.
I'll be thankful if you help me with that!
There isn't a book that teaches CSS in Blogger, at least none that I aware of. It takes lots of practice as well as trials and errors. I'd point you to this website for starters: www.w3schools.com/css/
DeleteDeveloper's tools like Firebug could come in handy. All the best :)
oh, my god!
Deletefirebug is awesome. thank you!
Enjoy :)
DeleteI have used the following CSS to make "post title" larger.
ReplyDeleteh1.title a{
font-size: 56px;
}
How can I make the text font bigger too?
Dear Yogaratnam N:
ReplyDeleteI have found the solution to change text to bigger font. I appreciated all the information about CSSs for Blogger Dynamic View you posted here. Thanks.
Here is my blog, http://pfge-pfge.blogspot.com/
Thats great pfge. Sorry couldnt answer you earlier. Do let me know if anything else comes up :)
ReplyDeleteCheers,
Yoga.
In Dynamic Views I tried to extrapolate your Page Title color change instructions above to get the page title to align flush left with the post text. Blogger only offers it centered. FYI am only using the Sidebar view. (Thanks for showing me how to get rid of the links to the other views!!) . I tried:
ReplyDeleteh1.title a{
text-align: left;
}
That didn't work. Nor did "text-indent: 0px" or "margin-left: 0px" or "padding-left: 0px"
Any suggestions?
Peter
Hi Peter,
DeleteThis should work:
.article .article-header .title {
text-align: left !important;
}
Click on 'Apply to Blog' and view the actual change on your blog. Cheers :)
What about adding the post title to the comments page?
ReplyDeleteI'm not sure if I'm following. What comments page?
Deletehi for my website http://www.malaysiacuisine.com/ is there anyway that i could justify all my postings in the mainpage as it look messy and i wanna clean it up
ReplyDeleteDamn I miss Malaysian food! Yes there is a way to justify your post summaries. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
Delete.entry-summary{
text-align: justify !important;
}
Yoga, why is it that when I hover over my blog post links they go transparent or invisible: www.ramyhanna.com
ReplyDeleteHow do I add CSS to fix this?
Thanks, you're amazing with this stuff!
Hi Ramy,
DeleteThanks for spotting this. It's a bug from one of my tutorials. This is what you need to do. Go to your CSS, find this:
.header-bar span.title a h1, .ss, .title a:hover{
and change it to:
.header-bar span.title a h1, .ss, #header .title a:hover{
Cheers :)
I've reading your blog's posts all day long, trying to avoid to disturb you, but I just could not find it.
ReplyDeleteSo...
how can I change the font color in the dynamic views sidebar. I'm talking about the actual sidebar on the left not the right one (for the gadgers).
Thank you in advance!
I've Yanni,
DeleteI've replied you in the forum. Cheers :)
i want to change the blog titles underlying link color..plz help..thanx
ReplyDeleteAre you referring to the link that appears when I hover over your blog title?
DeleteI am using bloggers template. I was trying to change post title color but couldn't find a way out. I have searched over the web, referred many website but didn't got solution. But when reading your post got i idea and added this code color: #732f40; below h2.post-title, .comments h4 { and problem solved. Thanks for posting this great info.
ReplyDeleteThat's excellent Shoeb! Glad you got it figured :D
Deletehello my blog titles are not showing up in blogger, can you please have a look and help me out http://netdoz.blogspot.com
ReplyDeleteThank you
Hey bro have you got it sorted? I can see your title showing just fine.
DeleteHi I would like to ask for help in repositioning my thumbnail img on my mobile template. I want it larger and at the center.
ReplyDeleteNot sure if this can be done. But I'll give it a look anyways. What's your blog's address?
DeleteIn Magazine View all of a sudden my posts are running into the ribbon date? What is the code to scoot the post title back over?
ReplyDeleteHello Laura,
DeleteSomething is broken within Blogger. Feel free to join the official discussion here:
https://productforums.google.com/forum/?utm_medium=email&utm_source=footer#!topic/blogger/f5kTwuW8d6o