Skip Navigation

Blog formatting

Travel Forums System Talk Blog formatting

Last Post
31. Posted by Sander (Moderator 5164 posts) 48w Star this if you like it!

Correct, that should work. Any later rule adds to and/or overrides any earlier rule (assuming the rules have the same "precision" with their selector).

You could also add the properties to earlier rules which match the elements you want to style.
My original code had the selector #tag_cloud a, which you should've changed to #countries a, which is the same as the selector of the first rule I gave just now. So to keep your code tidy, you could indeed add "background-color: #95B9DB;" immediately after "margin-right: 10px; /* Create a bit more horizontal separation between the individual tags. */" rather than creating a whole new rule.

32. Posted by ToonSarah (Travel Guru 394 posts) 48w Star this if you like it!

Thank you for taking the time to give me so much guidance - you've been a huge help

33. Posted by Sander (Moderator 5164 posts) 48w Star this if you like it!

Quoting ToonSarah

And is this the sort of thing I need if I want to try different colours:

Yes, that's a helpful starting point. Those are most of the colors (with a few errors) where instead of writing the hex value, you can also write the name of the color. (So you can write background-color: blue; and background-color: #0000FF; - and either would work.)

And you're very welcome. :)

[ Edit: Edited on 18-Mar-2017, at 05:50 by Sander ]

34. Posted by ToonSarah (Travel Guru 394 posts) 48w 1 Star this if you like it!

Hey, look what I did: - new button colours and title to match!

35. Posted by ToonSarah (Travel Guru 394 posts) 48w Star this if you like it!

Sorry to bother you when you've helped so much already, but I just tried to add the same "countries at the top" buttons to my other blog and they've ended up on the right-hand side (see I want to use the postcard template as a basis if I can, as it gives a good wide space for the content (some of the others are a bit narrow) and looks sufficiently different from my other blog. I was pleased managed to change the font but failed when it came to adding those buttons. Any tips please? Or will it just not work in that template?

36. Posted by Sander (Moderator 5164 posts) 47w 1 Star this if you like it!

Sorry for this taking some time to get around to.

In short, what's happening: the country links are usually located in the sidebar. We want to take them out of there, and position them in the top left of the main column. We do that by setting them to "position: absolute" within a container that has "position: relative". In the other template, that container is the #center element. In this template, it's the sidebar itself which has "position: relative" applied. What I don't understand is _why_ it has that.

So, what I'm recommending is removing "position: relative" from the sidebar (by overriding it to the value "static"), and adding it to the #center element, and carefully looking that nothing breaks. After that, there's also some changes necessary just to style the country links appropriately for this template.

To do all of this, change the new CSS you've added to your template to the following (bold lines are new, struck through lines aren't necessary).

#navigation {
position: static; /* Stop the navigation column from being a container for positioned elements. */

#center {
padding-top: 4em; /* Make space for the new navigation bar at the top of the page. */
position: relative; /* Make the #center column be a container for positioned elements like the countries. */
#countries {
position: absolute; /* Take the countries out of the normal flow. */
top: 0; /*Position it at the topleft of the #center element. */
left: 0;
width: 71%; /* Make this take up the same amount of space as the blog entries column. */
margin: 0; /* Reset white-space */
border-bottom: 1px solid #ddd; /* Create a border to make the navigation stand out a bit. */
padding: 10px 0 5px 0; /* Visually center the tags (vertically), and leave a bit of space on the left for the "home" link. */
font-size: 130%; /* As main navigation items, the countries can stand being a bit larger. */
#countries h3 {
display: none; /* Don't show the "Countries" header */
#countries ul {
margin: 0 0 0 90px; /* Line out the countries navigation with the blog entries. */
padding: 0; /* Remove the whitespace used for the arrow icons */
width: auto; /* Reset the width */
#countries ul li {
list-style-image: none; /* Don't show the arrow icons. */
display: inline-block; /* Make country links show after each other instead of below each other. */

#countries a {
margin-right: 10px; /* Create a bit more horizontal separation between the individual countries. */
padding: 2px 5px; /* Create some space around the link to make it look more like a button. */
#countries .activity_level_1 a,
#countries .activity_level_2 a,
#countries .activity_level_3 a {
font-size: 100%; /* Undo the tag-sizing relative to frequency. */

#countries a {
background-color: #D2B48C;
#countries a:hover, #countries a:focus {
color: #FFFFFF; /* Set the color on hover to white, as white on brown is much more legible than red on brown. */
background-color: #A0522D;

Just to make it extra clear: It's possible that this solution will break something about your template. So if you see some element out of place on the page, particularly in the sidebar, then that's probably due to removing position:relative from the sidebar. If you point out to me what is out of place, I might be able to come up with a workaround for it. But it's also possible that it'll mean that this way of setting up a navigation structure doesn't work well with this particular template.

[ Edit: Edited on 24-Mar-2017, at 15:45 by Sander ]

37. Posted by ToonSarah (Travel Guru 394 posts) 47w Star this if you like it!

Thank you so much for taking the time to come up with this suggestion. I'll give it a try over the weekend and let you know if it works

38. Posted by ToonSarah (Travel Guru 394 posts) 47w Star this if you like it!

You are a genius

Look - it worked:

Thanks so much Now I just need to add more countries ;)