Changing the hover color of a link

Anvil Q&A
21

This is mostly a question of defining some custom Roles and assigning them to the links at the correct moment. You also need to use anvil.server.session to store which links have been visited in the current session.

Highlighting links

You can control styling of components by defining Roles, which are found in Theme->Roles in the left-hand panel. There are a bunch of pre-defined Roles; scroll to the bottom and you’ll find an add link

image

Roles can then be applied to components in the Properties panel under Appearance, or programatically by doing, say, self.link_1.role = 'custom-link'.

Roles add a CSS class to the component, called anvil-role-foo if your role is called foo. You can play with the CSS for your Role to make it do what you want - go to Theme->Assets in the left-hand panel and edit theme.css. For a simple highlight you can do

.anvil-role-custom-link:hover {
  background-color: rgba(69,183,249,0.3);
}

I’ll leave it to you to experiment with this to make it look how you want it.

Colouring visited links

You can use anvil.server.session to store data about the current session in the server’s memory. It’s just a normal Python dictionary, so I suggest creating a list within it to store the question text:

@anvil.server.callable
def set_link_visited(question):
  """Store a question in the session to mark its link as 'visited'."""
  if 'questions_visited' not in anvil.server.session:
    anvil.server.session['questions_visited'] = []
  if question['question'] not in anvil.server.session['questions_visited']:
    anvil.server.session['questions_visited'].append(question['question'])

And here’s an accessor to get the questions out of the session:

@anvil.server.callable
def get_visited_questions():
  """Get the complete list of visited questions."""
  return anvil.server.session.get('questions_visited', [])

Now you can set up a Role for visited links and create a CSS rule to set the text to be purple:

.anvil-role-link-visited > .link-text {
  color: purple;
}

Tip: Use your browser’s ‘Inspect this element’ feature to find out exactly what CSS selector to use. In this case, we’ve had to select elements with the .link-text class that are children of .anvil-role-link-visited.

Now to set the new Role on the Link components that have been visited. If you call anvil.server.call('get_visited_questions') from the client side, you can iterate over the RepeatingPanel’s components and set link_1.role = 'link-visited' if the link is in the visited questions list.