Formating home menu

Developers Frontend
1

I am trying to add a icon to my home menu item (on my development site). What is wrong with this?

Created the CSS file in the my_changes addon. 
- Navigated to the design/themes/my_theme/css/addons/my_changes directory and create a new .css file, (custom_styles.css). 
- added custom CSS rules (to make the link bold and add an icon), 

.my-custom-class {
  font-weight: bold;
  padding-left: 20px;
  background: url('path_to_my_image') no-repeat left center;
}
.

Add CSS file to theme. 
- design/themes/your_theme/templates/addons/my_changes/hooks/index directory 
- create a new .tpl file (styles.post.tpl). 
- Added code

*{style src="addons/my_changes/css/custom_styles.css"}*

Assign the custom class to the menu item. 
- Design → Menus, 
- click  gear button for menu y
-  edit menu item
-  entered  "my-custom-class" in the "User-defined CSS class" field,

Cleared the cache.

It no work :frowning:

2

please replace

with

{style src="addons/my_changes/custom_styles.css"}

:wink:

1 Like
3

Thanks for taking the time to look at it. Still isn’t working for me. Going to try a differnt way.

4

Please also check:

  1. file exists → design/themes/my_theme/css/addons/my_changes/custom_styles.css
  2. “My Changes” add-on is enabled
2 Likes
5

@hungryweb thanks, I think that is it, the file is missing … I ended up achieving the result with custom css

… thought I could mark your answer as solution but must be blind, I can’t see that feature