Favourites Star

That Favourites Star:

For those users who dabbled in CSS back at the beginning of HTU blogs being introduced, the following bits of code will be very familiar. A bit of background first. All blogs have by default, a club badge, team name, national flag, country, region and ht division, a HT link avater and a bit of text saying ‘visit team page on hattrick.org’. There is also a hattrick united logo in white and green text, and the favourites star. The favourites star is used by bloggers to make your blog appear on their favourites list, should they have that widget active on their blog. Selected, it shines yellow. Deselected, it is a dull grey colour.

So, to begin with… this bit of code can be used to move around your favourites star. Why is this useful? If you have a nice graphic at the top of your page, you may want to place your star in just the right location so as not to ‘block’ an important part of your beautiful banner! That’s why.

Simply alter the bottom pixel value, and the left value pixel. However, you need to do this for the first part of the code (a.favorite-active) and the second part (a.favorite-inactive). This is because your star has two versions, the active and inactive. You’d hate for your active star to be in the right place, only for your inactive star to be in the wrong place. Values can be negative or positive. I usually alter them, preview the changes before saving. If the star isn’t where you want it, keep changing the values until it is.

a.favorite-active {
position:relative;
bottom:-182px;
left:80px;
}

a.favorite-inactive {
position:relative;
bottom:-182px;
left:80px;
}

Guess what this does to the active and inactive favourites stars? Yup, makes them visible. Don’t want them? Change visible to hidden. However, this may annoy other users who either cannot remove you from their favourites lists anymore, or cannot add you to begin with. Use with caution!

.favorite-active {
visibility:visible;
}

.favorite-inactive {
visibility:visible;
}

This bit of code can be used to make the Hattrick United logo visible or invisible. Simply change the word hidden to visible, or vice versa.

.logo {
visibility:hidden;
}

.hutd-logo {
visibility:hidden;
}

In closing, I will say, that moving the favourites star around is sometimes a bit ‘hit and miss’. I’ve found it moves around a little depending on which size screen you are viewing the blog on, or whether you have used ctrl and + / – to zoom in or out of your browser. Find the best fit is my advice.

About the Author

Born in England, reborn in Poland, living the dream on Hattrick. I am the creator of 'The Golden League', which if you don't yet know what it is... you aren't getting the best out of HT ;) I am also a board member of the HTU Managers Federation, which I heartily recommend to all HT users as an established, supportive and amazing community with huge resources to help you make a brilliant blog for your team, and to help your teams succeed. Hope to see you there.