sjkcwatson

I figured it out #topNav .theme-main-nav .theme-nav > .theme-nav-item > .theme-nav-link:not(x):hover { background-color: #F2F2F2; color: #ffffff; }

Can you tell me what the istica elements are for changing the hover color of the text and background on menus. I believe it is something with these but I can't find the right syntax #topNav .theme-main-nav .theme-nav > .theme-nav-item > .theme-nav-link{ Thanks!

I got it to work by putting the following in the header: .my_linkElement h4 a { color: #303030 !important; background-color: white; box-shadow: none; transition: all .5s; display: block; padding: 5px 5px 5px 5px; } .my_linkElement h4 a:hover {color:black !important;background-color: white;} .my_linkElement .goToLink:hover:after { color: green;} .my_linkElement .emailLink:after { content: "\f003"; } .my_linkElement .text { font-size: 13px; line-height: 1.5em; margin: auto; padding: 10px; background-color: #eee; } and setting the custom css class on the links I want changed to my_linkElement. Thanks for all the help in pointing me in the right direction!

I'm just getting back to this. Is it difficult to write a custom style to get me started? If it is I'll figure out another work around, but thought I'd ask just in case it is an easy thing once I know where to start. Thanks!

Sprites - I don't think I would of found that on my own. That would be awesome if you get a chance! Julie

Thanks! I like how you did #1, but I'm going to have a lot of different links throughout the app and don't necessarily want to have to build graphics each time. Plus my goal is to make this maintainable down the road for non developers if I ever step away. #2 does work well and I could certain play with that. The only thing that doesn't work great is that the default hover arrow color is white and with the white background I'm wanting it disappears (see the first field directions here http://www.canadianvalleyfc.com.prod.sportngin.com/cvfc). It would also be nice not to completely override the link style for the entire page in case I want to use the original style some. #3 I think if I could build a css class and put it in the head and just set the link to use the custom class that would be ideal. I'm familiar with building the css, but I'm struggling with including a graphic in the css. If you look at the second Field Directions link on the same page I sort of mimicked it with a code box. I uploaded the arrow images on a hidden page and used their path in the code style. <a href="fields" style="text-decoration:none;font-size: 14px;font-family: "Titillium Web", sans-serif;">FIELD DIRECTIONS <img src="http://cdn4.sportngin.com/attachments/photo/6796/1088/sm_red_arrow_right_large.png" onmouseover="this.src='http://cdn2.sportngin.com/attachments/photo/6796/1136/sm_blue_arrow_right_large.png';" onmouseout="this.src='http://cdn4.sportngin.com/attachments/photo/6796/1088/sm_red_arrow_right_large.png';" height="13" width="13" /> </a> but - I don't want to have to create a code element for every link. Can you help me make a css class that I could drop into the top page and reference as a custom class on the links that would do what the first "field directions" does, but with my own arrow images (or something else if you have a better idea - I was just trying to stay fluid with the theme since the arrows are on the news images, etc). I would like it to have the same font class, size, left margin, etc so it looks like the first Field Directions. If you don't have time it isn't a problem, I can work with #2 for now. I really appreciate you taking this much time to help me out! Julie

Thank you so much for helping! What I don't like is the big black box that stretches across the page (or column) because it is so dark and bold. I would like one of 2 things .. Either change the black wrapper box to a lighter shade of gray and the font to black or remove the box all together. I'd rather have a light gray box wrapper than the underline across the page though. I have a need on some page to put a list of multiple links and it just seems very heavy. I do like what you've done with the animation on hover. If the link included a subtle gray box, black font, and something similar to what you have done that would work nicely. The other option I was thinking was to have just the text with white background and no borders with the arrow to the right. Ideally something like black text with a red arrow, but when you hover over either the arrow or text they turn a color (like blue) to indicate it is a link. (something like the field directions on the right here http://www.canadianvalleyfc.com.prod.sportngin.com/cvfc) except that I don't think this is obvious enough it is a link - it needs a hover on the text or something. I can fiddle with colors, etc if I can get the basic style to work. Here is a good example of where I think it looks very "heavy" http://www.canadianvalleyfc.com.prod.sportngin.com/cvfcschedules I can make these columns instead of full width and that will help, but the black with multiple links just seems too much. Julie

Thanks - I figured it could be done with styles, but I wasn't sure what style to edit. On this page: http://www.canadianvalleyfc.com.prod.sportngin.com/yscreferees See how the link has the black box for the background. I'd like it to be more subtle, but I like the red arrow. I'd like to apply a style that makes the background transparent, changes the test from white to black (or the primary/secondary color designated by the website which I what I assume it is) and still has the arrow. Would also really like the text to change color with the arrow on mouse over, but that isn't a must have. I was able to do something similar by uploading a picture of arrows and using a code block to create my own link, but I would much rather apply a custom style so the link can be edited easier. <a href="fields" style="text-decoration:none;font-size: 14px;font-family: "Titillium Web", sans-serif;">FIELD DIRECTIONS <img src="http://cdn4.sportngin.com/attachments/photo/6796/1088/sm_red_arrow_right_large.png" onmouseover="this.src='http://cdn2.sportngin.com/attachments/photo/6796/1136/sm_blue_arrow_right_large.png';" onmouseout="this.src='http://cdn4.sportngin.com/attachments/photo/6796/1088/sm_red_arrow_right_large.png';" height="13" width="13" /> </a>

Is there a way to do a custom style for links? I'd like to keep the text and arrow, but hide the dark background.