Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Sunday, November 13, 2011

Change Blogger Dynamic View Pages Link Color


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.
#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.

51 comments:

  1. 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..

    Here' a picture to understand it better:
    http://i.imgur.com/3FWdh.png

    ReplyDelete
  2. That reader who asked how to do this was me! Thank alot. Awesome post!!!

    Jon

    ReplyDelete
  3. @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?

    @Jon: Yes you are! :)

    ReplyDelete
  4. 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.

    One line of code and it's a thing of the past and I can concentrate on actually blogging!

    Cheers!

    ReplyDelete
  5. @Anon: Glad you've made up your mind, and it's a good choice to go with DV. Happy Blogging!

    ReplyDelete
  6. hello,
    your 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!

    ReplyDelete
  7. This is not working when i cascade the links into one under the columns pages. How to do that?

    ReplyDelete
  8. @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.

    .tabs-inner .widget li a, .tabs-inner .section:first-child ul {
    border: none !important;
    }

    Cheers.

    ReplyDelete
  9. @Harsh: Thanks for pointing it out. I've fixed the code above. Cheers.

    ReplyDelete
  10. I'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
  11. @Cassandra: No problem at all! To make your fonts bold, add this to your CSS:

    #pages ul li a{
    font-weight: 900 !important;
    }

    Cheersss!

    ReplyDelete
  12. 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!

    Your posts are clear, simple and perfectly explained (even with captions!)

    +1 for you and your site.

    Cheers!

    ReplyDelete
  13. Hello to all dynamic views user

    one 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!!!

    ReplyDelete
    Replies
    1. Hi Matthias,

      Try this:

      #pages.tabs ul li{
      margin-right: 8px;
      }

      Cheers.

      Delete
  14. Thank you very very much. Now it looks four times better.

    Matthias

    ReplyDelete
  15. is there a way to delete the navbar ? I mean the orange one on my blog (mentegravida.blogspot.it)..

    I've deleted all pages list and all things, but it'shorrible to see the navbar empty....

    ReplyDelete
  16. Well, It's seems I've solved adapting your code to change behavior of header...

    Here'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;
    }

    ReplyDelete
    Replies
    1. Sorry for my late reply. Glad you got that figured :)

      Delete
    2. what about changing the color of navbar to transparent? cause I got a grey line after using this code.

      www.mallorylee.com

      Delete
    3. Hi Mallory,

      You'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?

      Delete
  17. I'm from Poland, thanks to your tips my web art gallery looks much better! You're the best!! :)

    ReplyDelete
    Replies
    1. Hi Annie,

      Thanks for dropping some words. Appreciate it :)

      Delete
  18. Thanks for the help in increasing space between page links. That tip deserves its own post!
    Was 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?

    ReplyDelete
    Replies
    1. Hi Peter,

      This should work :)


      #header .tabs li .menu-item:hover, #header .menu li .menu-item:hover{
      text-decoration: none !important;
      }

      Cheers!

      Delete
    2. Belated thanks for yet another tweak to make the page links work more like I want them to!

      Now 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.

      Delete
    3. Hi Peter,

      That 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.

      Delete
    4. 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 :)

      And also - Is there a course, book or website you could recommend that would teach me code?

      Delete
    5. Hi Laura,

      What's your blog's address?

      If you're looking into learning HTML or CSS, http://www.w3schools.com/ will be a good start.

      Cheers :)

      Delete
    6. Ah ha! Fixed it!

      http://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 :)

      Delete
    7. Hello, 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.

      #header .tabs li .menu-item:hover, #header .menu li .menu-item:hover{
      text-decoration: none !important;
      }

      Thank you!!

      Delete
    8. Hi Maria,

      This should do it:

      .header-bar span.title a:hover{
      text-decoration: none !important;
      }

      Cheers :)

      Delete
  19. Yogaratnam,
    DV 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

    ReplyDelete
    Replies
    1. Hi Peter,

      I 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.

      Delete
  20. Yogaratnam,
    Here it is:

    https://groups.google.com/a/googleproductforums.com/d/msg/blogger/-/MnkAP_4kAxMJ

    ReplyDelete
  21. Yogaratnam,
    I 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

    ReplyDelete
    Replies
    1. Hi Peter,

      I 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!

      Delete
  22. 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.

    ReplyDelete
    Replies
    1. Glad you didn't give up :) And kudos to you for finding the right solution!

      Delete
  23. Hey again N., I was wondering if you could help me I am not sure exactly how to do this.

    I 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!

    ReplyDelete
    Replies
    1. Hi J,

      Go 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.

      Delete
    2. Hey Yoga,

      Thanks 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

      Delete
    3. Oh right.. Keep the previous one in tact, and add this to your css:

      .group-label span{
      color: yellow !important;
      }

      Cheers!

      Delete
  24. hi yoga,

    i 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.

    ReplyDelete
    Replies
    1. Hi Anon,

      You'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 :)

      Delete
  25. Hi Yoga, www.nikkikrause.blogspot.com

    For 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. :)

    ReplyDelete
    Replies
    1. Hi Nikki,

      There 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 :)

      Delete
  26. Hi sir,
    I 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

    ReplyDelete
  27. Sorry,ignore my previous comment.it got sorted.Thanks a lot
    Inconvenience is deeply regretted.

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.