Southern Listeners

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

Tuesday, November 20, 2012

Adding Separators (Vertical Lines) Between Pages Links in Blogger Dynamic View

Before
After
The header bar in a Dynamic View template could accommodate several horizontal Pages links as well as external links (before resorting to a drop-down menu when the number of links increases). A couple of users have been wondering if a separator line could be placed in between the links. The answer is yes, and that's what this tutorial is going to be about.

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.
#header #pages:before{
border-left: 0px !important;
}
#header .tabs li, .ss{
margin-left:0px !important;
padding-left: 10px !important;
padding-right: 5px !important;
border-left: 1px solid white;
}

Extras

1) To remove the left-most vertical line (to the left of your first link), add the following additional code to your 'Add CSS' box:
#header .tabs li:first-child{
border-left: 0px !important;
}
2) To add an extra vertical line to the right of your last link, add the following additional code to your 'Add CSS' box:
#header .tabs li:last-child{
padding-right:10px !important;
border-right: 1px solid white;
}

140 comments:

  1. Interesting! And 'possible to reduce the height of the header bar?
    Thank you :)

    ReplyDelete
    Replies
    1. Possible but I wouldnt recommend it, as you could easily end up breaking your header (plus it is a lot of work for such a tiny effect)..

      Cheers :)

      Delete
  2. Thanks for your wonderful tips. When I used the CSS code my page links where forced into a drop down menu just as you hinted. Presently, I don't want to reduce my page links, but when I do, I will definitely apply the CSS code.

    ReplyDelete
    Replies
    1. It's a shame the link don't stay on when it gets longer. Perhaps I should look into a way for the link to go into a new line or something. Anyways, glad you liked the tweak above :)

      Cheers and God bless..

      Delete
  3. Hi Yoga, thanks, this is nice ! I just have 2 questions :

    First : Can we change the color of these vertical lines ?

    Second question : when I move my mouse over the text in the header bar, the text becomes underlined, can we remove this?

    ReplyDelete
    Replies
    1. Hi Thomas,

      1) Yes, it is possible. Change the word 'White' in line 8 to some other color, like 'Yellow', 'Black' and so on.

      2) Yeap, add this to your 'Add CSS' box:

      #pages a:hover{
      text-decoration: none !important;
      }

      Cheers and God bless :)

      Delete
  4. Kod içindeki (?) neyi ifade ediyor.

    ReplyDelete
  5. your effects are good ..... I wonder if you could help me with the pages gadget, for a while and add the ones I have now attempt to change or edit and apply changes . not applicable.... I leave my blog that I edited from your page.

    http://technologyfans.blogspot.com/

    This comment did with the Google translator because I am speaking spanish. Sorry.

    ReplyDelete
    Replies
    1. Hi TF,

      Nice blog you have there. Are you saying you can't make changes to your pages gadget? What kinda of changes were you trying to make (add link, remove link, or something else)? Usually, this kinda issues are related to the browser you're using, or the add-ons installed in your browser. I'd suggest you to use a fresh copy of either Firefox or Chrome and try again.

      Let me know how it goes. Cheers and God bless :)

      Delete
  6. Hi Yoga, please  just started this blog and its giving me dificulty,  have a problem on making line partitions between post and also  want to shorten d posts such that U̶̲̥̅̊ only get to see the full story after the cut.M̶̲̥̅♈ sidebar is also displayin ash color after setting its background to white and also M̶̲̥̅♈ blog description doesn't show. Am using a layout with two sidebars. Trendevolution.blogspot.com is the site. Would kindly appreciate your kind effort.

    ReplyDelete
    Replies
    1. Hi Abdul,

      It'd be easier for both you and me if we handle one issue at a time, as discussing multiple issues in a single reply could get overwhelming. But here's the answers you're looking for anyways:

      1) To add separators between your posts, Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .post-outer{
      border-bottom: 1px dashed black !important;
      }

      2) To create post summary, see the following link:

      http://support.google.com/blogger/bin/answer.py?hl=en&answer=154172

      3) To set your sidebars to white, add the following code to your 'Add CSS' box.

      .main-inner .fauxcolumn-left-outer .fauxcolumn-inner, .main-inner .fauxcolumn-right-outer .fauxcolumn-inner{
      background: white !important;
      }

      4) To change the color of your description, add the following code to your 'Add CSS' box:

      .description{
      color: white !important;
      }

      All the best. Cheers :)

      Delete
    2. Thanks man, i really appreciate, it worked perfectly.

      Delete
    3. Thanks for the helpful tips but please is there a way  can add margins between widgets on the sidebar instead of the border line between each widget.Really appreciate.

      Delete
    4. Just to clarify a thing. By margin, were you referring to gaps? In other words, are you looking to replace the border line with gaps?

      Delete
    5. Sorry to bug U̶̲̥̅̊ much,but just discovered M̶̲̥̅♈ mobile blog template does not show d blog description but the tip Ÿ̲̣̣̣̥ø̲̣̣̥u̶̲̥̅̊ issued me helped me perfectly as it is displaying on windows browser.

      Delete
    6. Right. Use this code to replace your border with gaps:


      .sidebar .widget{
      border-bottom: 0px !important;
      margin-bottom: 20px !important;
      }

      Adjust the '20' value to alter the size of the gaps. As for your mobile template, try adding this to your template:

      .mobile .description{
      color: white !important;
      }

      Cheers :)

      Delete
    7. Thanks man, though the mobile description thingy didn't work out,although the sidebar gap effect did but please can  acheive this effect http://lindaikeji.blogspot.com for M̶̲̥̅♈ blog sidebar.

      Delete
    8. You're using a Travel template, and you're essentially trying to transform your Travel template to an Awesome Inc template. A much much easier way is to use an Awesome Inc template straight away. Go to Dashboard - Template to change your template.

      Cheers :)

      Delete
  7. Sorry, you can highlight the title of the post?
    Thank you very much;)

    ReplyDelete
    Replies
    1. By highlight, were you referring to giving the title part a different background color? Or some other effect, like making the title font itself a different color, or making it larger etc?

      Delete
    2. All the comment text in a different color, blue for example ...

      Delete
    3. Little confused here. Title of post or comments?

      Delete
    4. Sorry, highlight the title of the post...

      Delete
    5. Go to Dashboard - Template - Customize - Advanced - Post Title :)

      Delete
  8. So as you say, I do not have the opportunity to highlight the title of the post. I can only change the font or color ...

    ReplyDelete
    Replies
    1. Hi Francesco,

      I'm a little confused again. 'Highlight' could mean quite a number of things. I asked you previously on what exactly you meant when you said you wanted to highlight your post title, and you said you wanted to change the color:

      All the comment text in a different color, blue for example

      So, let me ask you again. What exactly do you mean when you said you wanted to highlight your post title, if you werent referring to changing its color?

      Delete
  9. I'm sorry, but my English is very bad! I would like to underline the title of your post.
    thank you very much :)

    ReplyDelete
  10. ...I would like something like this:
    http://technologyfans.blogspot.it/

    Thank you very much;)

    ReplyDelete
    Replies
    1. Hi Francesco,

      Try this:

      .title.entry-title{
      text-decoration: underline !important;
      }

      Cheers :)

      Delete
  11. Sorry again!
    In this blog: http://technologyfans.blogspot.it/
    there is a horizontal line that divides the title of the post.
    How do I get this?
    Thank you very much;)

    ReplyDelete
    Replies
    1. Try this:

      .title {
      border-bottom: 2px solid #6FA8DC !important;
      }

      Cheers..

      Delete
  12. Hello Yoga. You can not insert a space gadget below header bar where you can add a html code?
    thanks;)

    ReplyDelete
    Replies
    1. Hi Francesco,

      I'm not quite getting that. Do you wanna add some gap towards the bottom of your header?

      Delete
  13. I would like to add html codes as in the static version

    thanks;)

    ReplyDelete
    Replies
    1. The Dynamic View templates do not support the HTML/Javascript gadget just yet, but seeing how all the other gadgets are already supported, it's just a matter of time before this gadget becomes available to Dynamic View users. Cheers :)

      Delete
  14. OK, we'll wait patiently. thanks;)

    ReplyDelete
  15. Thank you so much sir for each and every tutorial.Blogger would not be blogger without you!

    ReplyDelete
  16. Hey man, still really digging your blog, all your tips are so useful. I've got an ongoing problem with my blog where the pages are all put into a dropdown menu even when they are quite short and should really be able to fit along the header. www.whitenoisereview.blogspot.com

    Any ideas?

    thanks again

    ReplyDelete
    Replies
    1. Hi Tom,

      The width threshold to revert to the drop-down menu is a dynamic value, and it depends on the width of the screen that you use to view your blog. Unfortunately, your total pages width might be a little too long to be displayed in a vertical links for your display. I'm afraid there isn't much we can do about it, except to adjust some of the text length.

      Delete
    2. Hey thanks for the response. I tried to cut back on the text length but it didn't seem to change anything. Guess i'll try and cut down some more

      Delete
    3. All the best.. But do remember that whatever changes that you're making to the pages width is local to your display alone (and to those that are of the same width as yours). Even if you managed to get the links to show in a horizontal line in your monitor, you'd still see the drop-down menu when you view it in a smaller-screened device.

      Delete
    4. Thanks a lot! It all worked out perfectly :)

      I was wondering if I could ask you about a more dramatic edit that might be possible to my blog (http://whitenoisereview.blogspot.com/) - it's a music blog and i'd quite like to set up a system where i can post new music but without the new stuff i post overtaking the more important articles (reviews etc) on the main page.

      is it possible to turn one of the 'pages' into a feed that you can just post on without those posts being visible on the home page? alternatively, could i split my main feed into two and have one for reviews / features and another, more frequently updated, for new music?

      i think maybe these ideas might be stretching the limitations of the blogger interface. do you think i'd need to design a website from scratch to do these things? thanks in advance, i'm a total technophobe

      Tom

      Delete
    5. Hi Tom,

      I'm afraid it's not possible to have two feeds in one blog. But you might be able to design a website and have two of your blogs in there.

      Also, it is not possible to publish post to the pages. As for hiding posts from your homepage, it can be done with a non-dynamic template, but not for a dynamic one. You can see the walkthrough here:

      http://www.southernspeakers.net/2011/08/hide-certain-posts-from-blogger.html

      All the best! :)

      Delete
  17. I tried to remove all except one and it still showed in a drop-down menu. Could it be something to do with me using your hack to center the menu options? Maybe if i moved them back to the left they would show?

    ReplyDelete
    Replies
    1. Hi Tom,

      Yeap, try to remove the following code and see if you're getting a horizontal menu:

      .tabs{
      width: 97% !important;
      text-align: center !important;
      }

      Or you could try playing with the value 97 in the code above to see if it goes back to a horizontal menu.

      Cheers :)

      Delete
  18. Didn't change anything, when I changed the value (even to like 2%) or when i removed the code entirely. i guess I better just give up. thanks for all the help anyway

    ReplyDelete
    Replies
    1. Hi Tom,

      There's a bug lurking around that isn't letting users to change their settings in Chrome and Firefox. It might be possible that you're affected as well. Here's the discussion thread:

      https://productforums.google.com/forum/#!topic/blogger/S_uVwRQQrOY

      Try using IE8 or IE10 to make your changes for the time being.

      Delete
  19. Hi yoga again :)

    the Apply to blog in my Template Designer - Advanced - Add CSS not work
    this is a known issue ?

    ReplyDelete
    Replies
    1. Hi المصمم,

      Blogger has been notified, but it hasn't been made a known issue. That said, you're not alone. Here's the discussion thread:

      https://productforums.google.com/forum/#!topic/blogger/S_uVwRQQrOY

      Try using IE8 or IE10 to make your changes for the time being.

      Delete
    2. thank you some changes works on internet explorer 8
      will try on explorer 10

      Delete
  20. Evening Yoga, compliments of the season, please could you assist me remove gap between my blog posts and also with the removal of the line demarcating the sidebar title. would like that there be no margins or lines in the sidebar gadgets. thank you http://trendevolution.blogspot.com

    ReplyDelete
    Replies
    1. Hi Abdulmalik,

      I can't seem to find any gaps between your posts. Could you send me an annotated screenshot of some sort to point out the part that you're referring to?

      As for the sidebar title line, add the following code to your CSS:

      .sidebar .widget h2{
      border-bottom: 0px !important;
      }

      Cheers :)

      Delete
    2. Thanks man, i really appreciate, both tips worked perfectly.

      Delete
  21. Hello Yoga!
    I'm just started my new online business blog using this Dynamic Views. I have found that your tutorials are so awesome!

    The thing is, none of these tutorials work on my blog! =(
    I have tried different kind of your tutorial, every time I pasted the codes at the ADD CSS column,and change whenever needed, nothing is working.

    And the weird thing is, even I tried to customize it such as the colour and the font of the blog title at the Advance part, also did not working!

    What did I do wrong, no idea mate~

    this is my link : http://therunwaybyalangatie.blogspot.com/

    while I loveee if I even can change a few like Annisa's
    http://almariannisa.blogspot.com/

    or for more advance like this blog

    http://lindsaydaniellephotography.blogspot.com/

    I hope you have any information and solution for my big problem=(

    ReplyDelete
  22. Hi Alang,

    There is a known bug lurking around the Template Designer, that isn't letting users to save their settings. Here's the discussion thread:

    https://productforums.google.com/forum/#!topic/blogger/S_uVwRQQrOY

    Some users have reported success with IE. Give it a try.

    Cheers :)

    ReplyDelete
  23. this is not working for me either (having trouble with all of the codes for some odd reason)

    please help me!!

    thanks so much!

    ramblesofawannabe.blogspot.com

    ReplyDelete
    Replies
    1. Hi Jessica,

      See my reply here:
      http://www.southernspeakers.net/2011/11/remove-border-and-shadow-from-blogger.html?showComment=1358045555087#c1795802972146346317

      Cheers..

      Delete
  24. help me designing my blog

    Http://MuhammadSahi.BlogSpot.Com

    ReplyDelete
  25. Thanks for all the Tips...
    Just read a lot of your other posts. My blog looks so much better now!!
    Awesome Job.. Keep it up. You Guys are a blessing for "non-techie" people like me!

    ReplyDelete
    Replies
    1. Glad you find the tweaks useful. And thanks for taking the time to drop some words. Means a lot :)

      Cheers!

      Delete
  26. Ok, just tried to add the vertical lines and they are not showing. I think it is because they are supposed to be white and my background is white. Is it a hex code I need to add? How do I find it and how do i add it? Thanks!

    ReplyDelete
    Replies
    1. Hi Lauren,

      Let's have a look at your blog. What's your blog's address?

      Cheers :)

      Delete
  27. Hi mate!

    Thanks for all your tips.. I did some changes on my blog and now the pages bar is only visible when mouse is on top of it! is there are any to be always visible?
    here is my blog : www.sofianaaustralia.com

    cheers

    ReplyDelete
    Replies
    1. Hi Sofia,

      It looks like some of your codes are repeating itself several times. Before we move on to find the culprit for your header bar issue, could you delete all the duplicate codes in your CSS? It could directly or indirectly affect the way your blog behaves. And if you don't take care of it now, it's only gonna get worse.

      Cheers..

      Delete
  28. Hello Mr. Yoga,
    Very nice blog here.
    i used the code you instructed with the separator, but it didn't work. Can you please see my blog if there an error? thanks
    here my blog: www.insideaframe.com
    Best regards,
    Chito

    ReplyDelete
    Replies
    1. Hi Chito,

      I can't find the code anywhere in your blog's source. Can you check your 'Add CSS' again to make sure the code got saved?

      Cheers :)

      Delete
    2. Hello Mr. Yoga,

      Thank you for your reply...
      I already checked my "add CSS" and it's already apply to blog.

      What should we do next?
      Do you have suggestions?

      Best regards,
      Chito

      Delete
    3. Hi Chito,

      The code still isn't there. The only way you can verify if your code got saved is by restarting your browser. If your code isn't there anymore, it must have not gotten saved.

      You can also view your blog's source (type this in Google Chrome address bar: view-source:http://www.insideaframe.com/) to see what are the codes that have been saved.

      Delete
  29. I tried to add the CSS code to get vertical lines and it isn't working for me. My blog background is white so I tried changing the color to brown and then black and it still won't work.

    I also just added a new page to my blog: it shows in the page header but when clicked on just directs to the homepage of the blog instead of to the page.

    my blog: http://www.laurengrabelle.blogspot.com

    The new page is 'phototaxis'. Any idea why this would be and how to fix it? Thanks.

    ReplyDelete
    Replies
    1. You're not using a Dynamic View template in your blog, whereas the tweak above is for dynamic view templates only. In any case, use the following for your blog:


      #PageList1.widget div.widget-content ul li{
      border-right: 1px solid black;
      }
      #PageList1.widget div.widget-content ul li:last-child{
      border-right: 0px !important;
      }

      BTW, the 'photoaxis' link is pointing to your homepage. Change it by going to Dashboard - Pages.

      Delete
    2. Hmmm. After all that I don't like how the lines look on my blog.

      Also the phototaxis page is a page with text and media. All the coding is there and it looks good when i click edit from the dashboard-page view, but on that same page when I click view it also takes me to the home page as you've noticed. My other custom pages (about, contact) do not do that as I can view them from the dasboard-page view.

      Delete
    3. What browser are you using? Have you tried clearing your cache/cookies, or see if it works with a different browser?

      Delete
    4. Not sure why another browser would make a difference. You said it also happened to you that when you click Phototaxis it takes you to my homepage. There is text and media on that page so why would blogger make it a default link to the homepage instead of showing the page itself?

      Delete
    5. I'm sorry.. I got your issue mixed up with someone else's.

      I must admit this is odd and I've never seen this happening before. In any case, here's some of the things you could do.

      1) Edit the page - switch to HTML - copy the entire content somewhere (notepad, preferably) - delete the page - create a new page, with the same title and all - switch to HTML and paste your copied content, publish.

      2) If that doesn't solve it, go to Dashboard - Settings - Search Preferences and see if you have anything set up under custom redirects.

      Let me know how it goes..

      Delete
    6. Issue solved. I posted my problem on a Google group for blogger board and one of the users stated: "Safari is the last of the browsers that Blogger engineers spend time being compliant with because 99 percent of viewers are using the big three."

      So I created the page using Chrome and voila! Page is there! Thanks for you help, Yoga.

      Delete
    7. Ah, glad you got it sorted! :D

      Delete
  30. That made a huge difference, thanks for your posts, always spot on ;)

    Only one doubt for my blog: http://parapente-na-madeira.blogspot.pt/
    The facebook like button, when pressed, it does not count the like and then it changes the "like" word for an overlaid one that looks like "confirm", how can I get this to be a normal facebook like button?

    Thanks so much and keep up the great work!
    Rúben

    ReplyDelete
    Replies
    1. Hi Ruben,

      I do not have a Facebook account, and I'm not quite sure what happens with this button is clicked. Could you send me a screenshot of what you're seeing?

      Delete
  31. Hi Yoga, just wanted to say that your blog is amazing... I really love what you do and I visit it each month.

    I need your help on something! I try to modify something on my template but I am unable to do so

    my photo blog: www.everydayluxurylife.com

    What I try to do is to activate the Highlight on "Make money with us" button on the header's bar. Is there a way to do it? I'd like it to appear like it does when I put my mouse on it but, I wan't the others to stay like that.

    Impossible hein?
    Thankyou very much, you rock.
    Simon

    ReplyDelete
    Replies
    1. Hi Simon,

      Just to be clear. Are you referring to the hover (mouse-over) effect on your pages links? Right now it is set to 'glow' when it is hovered on, do you want to disable this for all your links except the 'Make money with us'?

      Delete
  32. Yes, I'm talking about this glow mouse over effect. I would like to be able to put the glow effect always "on" for the "make money with us" button so it can be more visible

    ReplyDelete
    Replies
    1. This should do it:

      #pages ul li:last-child a{
      color: #F6B902 !important;
      }

      Cheers :)

      Delete
  33. Yoga, YOU ROCK!

    Thank you verryyyy much.... keep it up, your are killing it

    ReplyDelete
    Replies
    1. Owhh stop it :P Thanks Simon, appreciate it, means alot! :D

      Delete
  34. Thank you so much <3 it was really help full . Blogger from dubai - www.thewhoandwhat.com

    ReplyDelete
  35. I am using simple view and found in an above comment a different code to use. It worked but is there a way to get the separators to be longer?

    ReplyDelete
    Replies
    1. Longer.. well, not really. Bigger, yes (as in thicker). Just increase the value '1px' in Line 8 to a greater number.

      Delete
  36. Thank you for this! I am using the Simple template and used this code you provided above,

    #PageList1.widget div.widget-content ul li{
    border-right: 1px solid black;
    }
    #PageList1.widget div.widget-content ul li:last-child{
    border-right: 0px !important;
    }

    But it actually puts lines over the ones I already have. I like the lines I have- they are gray to match the page names, but there is no line before the Home page (first page on the left) and there is after the last page on the right. I want to either eliminate the one on the right or add one on the left. Can you think of a reason your code would add line on top of the ones I have? Is there a way to do what I want? Thanks in advance!

    ReplyDelete
    Replies
    1. Hi there,

      Sorry it took ages to reply you. Yeap I could probably come up with something. But first, what's your blog's address?

      Delete
  37. Hello!
    And can you tell me how can I remove those same lines between page links?
    You can see in my blog: http://ananasehortela.blogspot.pt/
    the pages links have in the header those lines, and I prefer without them. Can you help me?
    Thank you so much.

    ReplyDelete
    Replies
    1. Hi Ginja,

      Sorry for my late reply. I see you've already gotten rid of the separator lines from your pages links. Let me know if you still need help with it.

      Cheers and God bless :)

      Delete
    2. Hello, Can you tell me how to remove those same lines?

      My blog is: http://www.dearlordthecheese.com/

      Thank you!

      Delete
    3. See if this is what you're looking for:


      .tabs-inner .widget li a{
      border-left: 0px !important;
      }
      .tabs-inner .widget li:first-child a{
      border-left: 1px solid #dddddd !important;
      }

      Delete
  38. Thanks, very helpful! A quick question, I don't know if I am just doing this wrong but I can't seem to reduce the amount of posts showing on the first page, I changed it to show at most 6 posts in Settings, and double checked that it said 6 in the Layout part, and it's still not applying. Would really appreciate your help! Thanks.

    ReplyDelete
    Replies
    1. Hi Cherry,

      You can only set the maximum amount of posts to show on your home page, not the exact number. In your case, you've set it to show 6 posts at most - which means it could be any number of posts between 1 to 6. It depends on what we call 'auto-pagination'. I could write an entire post on it, but to put it simply, auto-pagination is Blogger's mechanism to make sure your blog's homepage is not too heavy for your readers to view. In other words, when you have 'heavy' posts, the number of posts will be less than x (x being the amount of posts set to show in your settings, 6 in your case). If your posts aren't long or full of images, you will see 6 posts at most. The way I see it, auto-pagination is not something we deserve, but definitely something we need (cheesy, I know :p )

      Cheers!

      Delete
  39. Hello Bro! Thanks for Great Tuts and Helps you doin great job.

    I need some help regarding Dynamic View on a new blog i made.


    I need to do following things I hunted whole internet but didnt worked out:

    1. Labels in Header Bar.

    2. When My Blog Opens It is automatically redirected to the most recent post.( im using sidebar view)

    4. I added Disqus plugin but it many a times shows old comment box also and two three comment boxes sometimes on one page

    5. I tried to change the Scroll Bar to some decorative one but its not working

    Please reply as soon as posible specially to redirection issue and lables in top bar

    ReplyDelete
    Replies
    1. Hi there,

      The comment space is not very well equipped to cater long going discussions. Can we bring these discussions to the forum? It'll be easier for me to help your there. Go to Blogger Help Forum and create a discussion there, and let me know its link once it's published.

      Cheers.

      Delete
  40. what kind of template is this http://misspetitenigeria.blogspot.com/ i want to know more about css,,what is code how do i insert code.I want to underline my link and put a divider line between linki want to use vertical lines too,just like this blog above

    ReplyDelete
    Replies
    1. Looks like we've got a lot to discuss. Obviously, the comment platform isn't gonna cut it. Can we bring these discussions to the forum? It'll be easier for me to help your there. Go to Blogger Help Forum and create a discussion there, and let me know its link once it's published.

      Delete
  41. Hi! Thank you very much!
    I have one problem, tho. I can not manage do remove the last vertical line on the left side. My page bar look like this: PAGE / PAGE / PAGE /

    How do I remove the last line?
    xoxo

    ReplyDelete
    Replies
    1. Hi Camilla,

      This should do it:

      .tabs-inner .widget ul li:last-child a{
      background: none !important;
      }


      Cheers..

      Delete
  42. Hello Yoga,
    First of all, thanks for all your infos here. I had a question, some time ago I put vertycal lines and changed the colours each page link seperatle. (For example from the pic above, welcome is black, blog is blue, southern speaker are red...) But I cant find the codes anymore :)
    If you know the codes I would tappreciate it.

    Thanks.

    ReplyDelete
    Replies
    1. Hello Kaan,

      Sorry for the late reply. Do you still need help on this? Could you provide me your blog's address?

      Delete
  43. Replies
    1. Should still work. What's your blog's address?

      Delete
  44. I see you've got quite a number of links in your tab, that your tab is no longer showing your links in horizontal fashion, and has reverted to a drow down menu.

    ReplyDelete
  45. Replies
    1. The code still works.. I've checked your website, doesn't look like the code is in your source.

      Delete
  46. How can I add/remove links to the header or hide certain pages from the header? I had done this in the past on my site www.urbanARCHnow.com but can't remember how I did it now :S. Do you have a tutorial on this? Great blog btw!

    ReplyDelete
    Replies
    1. Hi Jon, try going to Dashboard - Pages or Dashboard - Layout - Pages - Edit.. Good luck!

      Delete
  47. Hi, when I add pages via the pages gadget in the layout editor, it does not appear on the header bar at all compare to other templates. How do you manage to add page links on the header bar?

    Thanks!

    ReplyDelete
  48. Hi David,

    Any success in dragging and dropping them above the 'Blog Post' box in your Layout page?

    ReplyDelete
  49. why not work?
    Thank you :)
    quellichelinter.it

    ReplyDelete
    Replies
    1. I cannot find the code in your CSS. Also, your CSS looks like a mess. I see HTMLs in your CSS. That could be disastrous. Please get them fixed.

      Delete
  50. i was wondering if i can have my side gadget dock replaced in that pages navbar

    ReplyDelete
    Replies
    1. If you're referring to a Dynamic template there's absolutely no way I'm afraid.

      Delete
  51. Hi Yoga, this seems not working to my blog. I am using simple template.
    I have lines separating pages list. I really want to erase the vertical line only at the very last page. (very last page, extreme-right).

    Example:
    Home | Profile | About | Travel |

    I don't want the line after 'Travel'. Just that one line. But I couldn't figure out how. Do you have any idea? Thanks a lot.

    ReplyDelete
    Replies
    1. Hello Elisa,

      Can I have a look at your blog?

      Delete
  52. hi Yoga,
    I have always found your tutorials super helpful. And now I need some help in re-cusomization, can you help me with readjusting the page list lines I want to reduce their size and also want to remove the vertical line between the side widget and blogpost. And every time I'm trying to adjust or remove the code from html this is the error that its showing *Invalid variable declaration in page skin: Variable is used but not defined. Input: bordercolor*

    ReplyDelete
    Replies
    1. Hello Samileen,

      Sorry for the late reply (I got married very recently). Let's not go into the HTML since things are really flimsy in there. In any case, if you still need help on this, get back to me with your blog's URL.

      Till then.
      Cheers.

      Delete
  53. hi! is it possible to not show the flipcard icon on the header? (: btw your blog posts on dynamic views have been super helpful! thank you so much!

    ReplyDelete
    Replies
    1. Hey thanks! Not entirely sure which icon you're referring to but see if this works:

      #views ul li a, #views .menu-heading, .ss{
      font-size: 0px !important;
      }

      Delete
  54. Hi Yoga, mine doesnt work and only i realize this is for dynamic view but mine is simple template. Is it the same code for simple template too?
    Thanks a lot and much appreciate. :D

    ReplyDelete
    Replies
    1. Hello FD. We need to use other means to get the same results for non-dynamic template. This should work for your template:

      .tabs-inner .widget li a{
      border-left: 1px solid black;
      }

      .tabs-inner .widget li:first-child a{
      border-left: 0px solid black;
      }

      Delete

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