I've been extremely busy for the past few days, and I'm gonna get busy again for another assignment due next week. Back to this week's post. Let's see what I shall write about today **going through my queue of topics to blog about**.. Right, this one sounds interesting. Blog reader Jon Pennington asked how one can change the color of pages links on the black bar. Here's how.
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.
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.
#pages ul li a, .ss.menu-item{ color: yellow !important; }If you want to assign separate colors for each one of your links, use the following (assuming you have 3 links)
#pages ul li:nth-child(1) a, .ss.menu-item{ color: yellow !important; } #pages ul li:nth-child(2) a, .ss.menu-item{ color: red !important; } #pages ul li:nth-child(3) a, .ss.menu-item{ color: cyan !important; }Feel free to replace the color words with hex values (for example: #ffffff) if you need more color choices.
Hello. I'm using a few of your codes on my blog. Anyway..on the about page I created, it's not lining up with the menu bar, there a gap and a thin black line where the about me page starts. How would I move the about me page up so it lines up with the rest of the page..
ReplyDeleteHere' a picture to understand it better:
http://i.imgur.com/3FWdh.png
That reader who asked how to do this was me! Thank alot. Awesome post!!!
ReplyDeleteJon
@Anon: It's impossible for me to tell the problem without analyzing. Is there a page that I could have a look and inspect on?
ReplyDelete@Jon: Yes you are! :)
OMG. Thank you! I've just decided to user dynamic views as I couldn't make up my mind on the template and was getting annoyed with the page and link styles being the same.
ReplyDeleteOne line of code and it's a thing of the past and I can concentrate on actually blogging!
Cheers!
@Anon: Glad you've made up your mind, and it's a good choice to go with DV. Happy Blogging!
ReplyDeletehello,
ReplyDeleteyour blog has been really helpful to me so far but i just have one question:
how do i get rid of the grey boxes that appear around my tabs links at the top of my page?
i just want my tabs to be words without anything around them.
if you could help i'd really appreciate it!
thank you!
This is not working when i cascade the links into one under the columns pages. How to do that?
ReplyDelete@helen: Oh yeah definitely. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
ReplyDelete.tabs-inner .widget li a, .tabs-inner .section:first-child ul {
border: none !important;
}
Cheers.
@Harsh: Thanks for pointing it out. I've fixed the code above. Cheers.
ReplyDeleteI've used many of your tutorials so far! Thanks! I added some external link by adding a url through the Pages editor. I'm wondering how I can bold this text in the header bar...? I know there's a bold option in the advanced settings but it doesn't work for me.
ReplyDelete@Cassandra: No problem at all! To make your fonts bold, add this to your CSS:
ReplyDelete#pages ul li a{
font-weight: 900 !important;
}
Cheersss!
I've used this site as a resource to personalize my blog since I changed to Dynamic Views and I have to say: thank you very much!
ReplyDeleteYour posts are clear, simple and perfectly explained (even with captions!)
+1 for you and your site.
Cheers!
Thanks Gabriel, appreciate your comment :)
DeleteHello to all dynamic views user
ReplyDeleteone small question.
is it possible to expand the space between the pages at the headerbar?
I think at my blog "http://roadtoeverest202x.blogspot.de/"
pages are to close together. It is difficult to distinguish.
Thanks a lot!!!
Hi Matthias,
DeleteTry this:
#pages.tabs ul li{
margin-right: 8px;
}
Cheers.
Thank you very very much. Now it looks four times better.
ReplyDeleteMatthias
is there a way to delete the navbar ? I mean the orange one on my blog (mentegravida.blogspot.it)..
ReplyDeleteI've deleted all pages list and all things, but it'shorrible to see the navbar empty....
Well, It's seems I've solved adapting your code to change behavior of header...
ReplyDeleteHere's the code I've used to completely remove pagelist in the top-bar between header and posts(with magazine view)
#header .header-drawer.sticky, #header .header-drawer{
display:none !important;
}
Sorry for my late reply. Glad you got that figured :)
Deletewhat about changing the color of navbar to transparent? cause I got a grey line after using this code.
Deletewww.mallorylee.com
Hi Mallory,
DeleteYou're not using a Dynamic View template, whereas the tutorial above is for Dynamic View templates only. In any case, I don't see navbar in your blog at all. What am I missing?
I'm from Poland, thanks to your tips my web art gallery looks much better! You're the best!! :)
ReplyDeleteHi Annie,
DeleteThanks for dropping some words. Appreciate it :)
Thanks for the help in increasing space between page links. That tip deserves its own post!
ReplyDeleteWas trying to add a "text-decoration: none" style to get rid of the underline on the page link rollovers but couldn't figure out how to do it. Any thoughts?
Hi Peter,
DeleteThis should work :)
#header .tabs li .menu-item:hover, #header .menu li .menu-item:hover{
text-decoration: none !important;
}
Cheers!
Belated thanks for yet another tweak to make the page links work more like I want them to!
DeleteNow back more to the subject of the original post: Header page type color. Is there any way to get the color of a link to indicate it is the selected link when you are on its page? Right now page links act the same way whether they are the selected page link or not, so the reader is not given a clear clue what page he is on.
FYI for my application this only needs to be fixed for the Blog sidebar page because 1) it is the only dynamic view I am using and 2) static pages are generated outside Blogger so I have control of the header page links on these pages.
Hi Peter,
DeleteThat would require some amount of HTML modifications. Though it is possible to access Dynamic Views' HTML at the moment, the mods will not work because DV's script will ignore the mods that we make, and fetch elements individually. I can't think of a way to do this at the moment.
Could you please give me the code to remove the blog title text decoration of underlining on hover. I tried using the code above and changing a few bits but, of course, it didn't work. Thanks :)
DeleteAnd also - Is there a course, book or website you could recommend that would teach me code?
Hi Laura,
DeleteWhat's your blog's address?
If you're looking into learning HTML or CSS, http://www.w3schools.com/ will be a good start.
Cheers :)
Ah ha! Fixed it!
Deletehttp://mrslauraw.blogspot.com.au
You can still kinda see it but you really have to be looking for it... tell you the truth, Im not sure what I did to fix it.
I looked at the w3school website - fantastic resource - thank you :)
Good job Laura! :D
DeleteHello, thank you very much for all the info on this blog. Question: how can I remove the underline on hover for the site name. The code you gave above only fixes that issue for the menu tabs.
Delete#header .tabs li .menu-item:hover, #header .menu li .menu-item:hover{
text-decoration: none !important;
}
Thank you!!
Hi Maria,
DeleteThis should do it:
.header-bar span.title a:hover{
text-decoration: none !important;
}
Cheers :)
Yogaratnam,
ReplyDeleteDV pages links are not clickable on the iPad. Not just mine on my site, but also on, for example, Blogger Buzz. Have tested this on an original iPad and a new highRes iPad. This means the iPad using blog reader can not access other static pages on the site.
Can't find much about this issue on Blogger Forums and have gotten no responses to my post there. Only workaround I could come up with was to use a favorite links gadget and provide the static page links on it.
Do you think this iOS compatibility issue will persist? Any other better workarounds you can think of?
All the best,
Peter
Hi Peter,
DeleteI haven't got an iPad, so it is really difficult for me to suggest anything. Can you send me the link to your discussion in Blogger Forum? I'll escalate your thread to be seen by a Google Employee, and see if I can get a respond from the team.
Yogaratnam,
ReplyDeleteHere it is:
https://groups.google.com/a/googleproductforums.com/d/msg/blogger/-/MnkAP_4kAxMJ
Yogaratnam,
ReplyDeleteI sent the link last night, but don't see it shown in your blog post comments. In case you didn't get it, here it is again.
https://groups.google.com/a/googleproductforums.com/d/msg/blogger/-/XgtErcx77fYJ
Hi Peter,
DeleteI have escalated your thread yesterday itself. I was (and still am) a little tied up due to my dissertation so I couldnt reply your comment yesterday. I've just checked my entry in the escalation, seems like no one owns an iPad around there. I will bump you in the thread should there be any development. In any case, your issue has been placed in Google Team's queue of things to look at, now it is up to them to do something about it. Let's keep our fingers crossed!
You are the BEST! After 20 minutes my blog is looking about a thousand times better. And to think I was about to give up on this whole dynamic view business.
ReplyDeleteGlad you didn't give up :) And kudos to you for finding the right solution!
DeleteHey again N., I was wondering if you could help me I am not sure exactly how to do this.
ReplyDeleteI am trying to change the text color under the 3 options on the left (in my blog it is Date, Genre, Author)
http://auraltreasurer.blogspot.com/
The text is too dark and you cannot read it with the background. Any help would be appreciated!
Hi J,
DeleteGo to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
#controls ul#groups li{
color: white;
}
Regards,
Yoga.
Hey Yoga,
DeleteThanks for the response back, that helped with the menu which I needed but I didn't explain it properly.
For instance when you click on "Genre" you will see sub-categories for example (Dream Pop, Post-rock, Mike Patton, None)
I am trying to change the text colors of those sub fields/labels.
Cheers!
-J
Oh right.. Keep the previous one in tact, and add this to your css:
Delete.group-label span{
color: yellow !important;
}
Cheers!
hi yoga,
ReplyDeletei am having few posts which are a bit too long. can you tell me how to link a text in a post to another text in the same post in dynamic view blog so that navigation can be made easy?
Kindly help and thanks in advance.
Hi Anon,
DeleteYou're looking for HTML anchor.. HTML anchor brings a reader to a specific location on a post upon clicking a link.. For more info, refer to the following - although there's no guarantee that it will work in all versions of Dynamic View templates:
http://www.southernspeakers.net/2010/11/jump-to-content-anywhere-in-page.html
All the best :)
Hi Yoga, www.nikkikrause.blogspot.com
ReplyDeleteFor some reason under Pages when I go to add my links for the Books and 1000 Beautiful Things it doesn't save. Home and About work. But when I go back into edit the Pages and I click on Edit Books the http address I put in is gone and it just say Javascript. How do I get the other 2 links on the top Pages bar to work?
Thanks, I hope that is clear enough. :)
Hi Nikki,
DeleteThere seems to be a bug with the Pages gadget of late. Kindly switch to the LinkList gadget temporarily, till the bug gets fixed. You're gonna have to enter all your links manually with the Linklist gadget, but at least it works perfectly, unlike the Pages gadget.
I've already escalated the matter to the Blogger team. Hopefully they'll fix it soon.
Cheers :)
Hi sir,
ReplyDeleteI am trying to to change color of page links to white color in dynamic views.However,they remain dull and become white only onhover.Is there any fix?Thanks a ton,My blog is http://justtrollthings.ilovetrolls(DOT)org
Sorry,ignore my previous comment.it got sorted.Thanks a lot
ReplyDeleteInconvenience is deeply regretted.
Glad you got it sorted, Shrenuj :)
Delete