Editing style of links

[sjkcwatson]

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.

[docnzok]

You can apply CSS to almost anything on the NGIN platform.

 

Can you send an example (or page link) of what the link looks like now and then what you want it to look like?

 

I'm sure we can figure out a solution for you.

[sjkcwatson]

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>

 

 

[docnzok]

Ok so there are a few things going on here.

 

There is a style that applies to the link on the page and a style that applies to the overall link of the entire theme

 

Is this what you are looking to do. (Note the arrow is there as I am in developer mode, so it doesnt look like an arrow.

 

 

The link style that I can show you how to change applies to the box that wraps the link itself.

The underline that you see is applied from the overall theme.

 

I can help change both of them for you 

 

Also, take a look at the front page of cgylax.com and hover over the blue links (i.e. coaching staff or game center) and see how I did those links with a little animation.

 

Let me know how I can help.  I guess what is needed is exactly how you want the link to look and then behave when you click or hover.

 

Once I have that, I can do up some CSS for ya.

 

Mark

[sjkcwatson]

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

[docnzok]

Julie

SO you can go about this three ways

 

1. Create your own image of what you want the link to look like and then add some CSS (specifically Hover CSS) to make it look like a link.

I did that on truelaxrecruits.com about mid way down the page...hover or rollover the True Boys or True Girls images and they change with pure CSS. They are also links.  That is option 1

 

2. Modify the current link CSS to make the link look like you want it (basically you have to overwrite the CSS the SE provides and make the links look and behave how you want them.

 

3. Create your own class of link that you can use throughout your site. Maybe the better way to go.

 

For #1

see truelaxrecruits.com and see if that is the way you want to go.

 

For #2

In the Options section of the page add the following CSS code to the cascading <Head> Code

 

<style>

.linkElement h4 a {

color: black;

background-color: white;

box-shadow: none;

transition: all .5s;

display: block;

padding: 5px 5px 5px 5px;

} </style>

 

For #3

Completely build the button in CSS with hover and over

If you want to do that, I can build up some code for that.

 

I think you will be able to get the effect you are looking for if we jsut play with it.

 

Let me know your thoughts on the examples I have setup here.

 

Mark

[sjkcwatson]

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

 

 

 

[docnzok]

Julie

Its no problem. I never sleep anyway.

 

So the arrow is actually a graphic that is coming from what is called a sprite.  On that particular sprite sheet NGIN has about 50 icons that they use throughout the sites.  So in order to get that arrow a different color...

 

So I think what you want to do is create a custom link class that you can choose to use for links , thus keeping the ability to use the default link style somewhere.

 

I will write up a quickie style example this evening for you.

 

Mark

[sjkcwatson]

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

[sjkcwatson]

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!

 

 

[sjkcwatson]

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!