Hello
I think mixed language blogs are a bit of an edge case, and putting in a whole lot of infrastructure to make them work better is not going to be high up on the priority list for the admins. And I think for single language blogs, showing visual indicators of the language is also not all that useful.
However, I do think your use of the tag system is inspired here.
Try adding the following to your user stylesheet (blog settings -> template), and see what you think of the result:
position: absolute;
right: 0;
top: 0;
display: block;
content: "";
width: 90px;
height: 60px;
background: -webkit-linear-gradient(to right, #002395 29px, white 30px, white 59px, #ED2939 60px) no-repeat;
background: linear-gradient(to right, #002395 29px, white 30px, white 59px, #ED2939 60px) no-repeat;
}
That's looking for all tag links ending in "/français/" at the end of a post. For each of those, it constructs a new pseudo-element, positions it in the top right corner of the post, sizes it to a rectangle of 90x60, and fills it with a background of the French flag. (Instead of using the linear-gradient technique I went for here to demo this, you could of course also use a regular image instead - background: url("http://link.to.your.image/of/the/french/flag.here") no-repeat; - you'd probably want to, as my linear gradient technique doesn't work in old versions of Internet Explorer.)
Note for future readers of this post: The above works because the watercolor template uses a position: relative on the .entry div. Other templates might need to add that manually to make it work:
Similarly, you could move the "français" tag out from its regular place amongst the tagcloud, and style it separately just above or below the other tags. If you went ahead and added "english" tags to the rest of your posts, you could do the same with that. Can't give you a total number of entries out of each category, unfortunately, but it'd still go a long way toward doing what you want.
(Let me know if you'd want to experiment further along this route, and I'd be happy to put in some time to set up examples for you - wouldn't get around to it before the weekend, though.)
[ 01-Oct-2013, at 11:33 by Sander ]
Hey thanks for that Sander!
I actually ended up using a standard picture with a bit of text and with a grey background like on the blog (because the transparency is not supported for .png). An interesting fact though, the blog system doesn't seem to like the special character "ç" of "français" in the tags so I had to change that tag to "french", as even when I was trying to revert back to "francais" without the special character, it would change it back to "français" with the ç .
Anyway the other thing you mentioned, setting the "french" tag above the other ones would be quite useful I think so let me know how I an do so when you have a bit of time. My CSS skills are unfortunately very rusty...
Thanks!
[ 01-Oct-2013, at 14:51 by manolo84 ]
I actually ended up using a standard picture with a bit of text and with a grey background like on the blog (because the transparency is not supported for .png).
That probably happens because an uploaded photo gets "resized" (and thus re-encoded) to a certain maximum size - even if it already falls within that. If you opt to save the original photo when uploading, you should be able to use that as the background image with fully working transparency.
An interesting fact though, the blog system doesn't seem to like the special character "ç" of "français" in the tags so I had to change that tag to "french", as even when I was trying to revert back to "francais" without the special character, it would change it back to "français" with the ç .
How annoying. Sounds like there's a non-UTF-8 character set in play somewhere; sounds like way too much trouble to figure out, though, and this works just as well as a workaround.
Anyway the other thing you mentioned, setting the "french" tag above the other ones would be quite useful I think so let me know how I an do so when you have a bit of time.
Will do. Please bump this thread on Sunday if I haven't posted any further replies to it by then, as I might not think of it otherwise...
Ok, here we go:
#tag_cloud {
position: relative;
}
#tag_cloud:before {
display: block;
content: "Language";
font-family: Georgia,serif;
font-size: 18px;
padding-top: 15px;
padding-bottom: 10px;
margin-bottom: 7em; /* An "em" here is 18px (due to the font-size). Decrease this to 4.5em if you only want to show a link for a single language. */
background: url("/img/11/header_line.gif") no-repeat center bottom;
}
#tag_cloud a[href$="/french/"] {
top: 5em; /* An "em" here is 14px. */
}
#tag_cloud a[href$="/english/"] {
top: 8em; /* 3em below the first link. */
}
#tag_cloud a[href$="/french/"],
#tag_cloud a[href$="/english/"] {
position: absolute;
left: 0;
margin-left: 35px; /* Space for the flag. */
font-size: 14px; /* This font-size can vary due to the number of entries in the category, so we set it manually to a fixed value. */
}
#tag_cloud a[href$="/french/"]:before {
background: url("http://photos.travellerspoint.com/27181/franceflag.png") no-repeat;
}
#tag_cloud a[href$="/english/"]:before {
background: url("http://photos.travellerspoint.com/27181/ukflag.gif") no-repeat;
}
#tag_cloud a[href$="/french/"]:before,
#tag_cloud a[href$="/english/"]:before {
position: absolute;
content: "";
top: 9px;
left: -35px; /* Identical to the margin-left above. */
width: 25px;
height: 25px;
}
What we do here is: First we relatively position the tag cloud, so that all positioning within it is relative to the tag cloud. Then we create a pseudo-element as its first child, and make it look like a header. We also create a large amount of white-space underneath this header. Then we position the "french" tag (and hypothetical "english" tag) within this newly created white-space. And then for both those tags, we create pseudo-elements, which we position to the left of the links, giving them each a background image of their respective flags.
(I've used "em" for all the sizing, so that distances will scale along when someone uses a larger font-size.)
[ 05-Oct-2013, at 12:48 by Sander ]
Thanks a lot man, this looks really great and is really what I was looking for, at the exception of the number of times a tag is being referenced, but I don't think that's possible purely using CSS.
So thank you!
0 Response to "Blog with different languages"
Post a Comment