Links in text in a paragraph


(Peter Kroman) #1

Hi,

I wonder if (and how :slight_smile: it is possible to use the alternate style for links set in Site Styles in Foundtion, when a link related to a word or a sentence in a paragraph becomes necessary (which it often does for me in project I am working on :slight_smile: ).


(Doug Bennett) #2

Yes you can.

When you set your link use the custom attributes (if not showing hit the arrow next to it)
hit the + add bottom to add an attribute
set the name to class
in the case of foundation alternate the class name is: alt

hope this helps.


(Andrew Tavernor) #3

I’m afraid that won’t work, or at least not in the way that I think @peterkroman means. Giving anything a class of “alt” within a paragraph will cause it to use the alt text style and not the alt link color as defined in site styles.

Links only get the alt link color from site styles when they are links with a paragraph that has the alt class.

It may of course be workable solution though if the alt text style is not used elsewhere on the page and can just be set to the color that is required for the alternate link color.


Shift Theme, CSS & URL Links
(Peter Kroman) #4

Thanks for fine input.

Sad to say that it doesn’t work. No matter if I set the the alt text style to be the color I prefer for those links. In fact setting an alt class within the link settings in a paragraph have no effect at all.

Is there any other ways around this problem …


(Doug Bennett) #5

Didn’t mean for paragraph as a whole

You can also use the swatch colors this way:

n-text-sw1c1
n-text-sw2c1
n-text-sw3c1
...etc

(Peter Kroman) #6

It is not working. Could it be because I have placed my content in af Font stack?


(Doug Bennett) #7

Maybe, I know it works in default text stack and Joe’s paragraph foundation stack, also works in paragraph plus by big white duck.

what font stack are you using?


(Andrew Tavernor) #8

I totally agree - it does work in all the stacks mentioned above. - Just you get the alt text color and not the alt link color as I mentioned above.


(Andrew Tavernor) #9

@peterkroman If you could publish a little test page we could see what is affecting the color and why it is not working for you


(Peter Kroman) #10

Yes of course @tav . Comes here :slight_smile:
If you look at the text besides second picture vertical you see a link in the beginning of the text. This link refers to another page in the side, and it takes the primary link styles set in Site Styles which is as I want it to do.

A little further down in the same paragraph is another link “Odsherred” which refers to content outside the site. This link is also taking the primary site styles, and it is this link I need to use the alt link style in site styles.

Hope you can help :slight_smile:


(Andrew Tavernor) #11

@peterkroman It is the font stack that is applying the colour #cccccc to all its contents and over riding the Foundation colors. I suggest that you just use site styles to apply the Google fonts and then any different ones that you require for individual paragraphs can be done directly via Paragraph plus stacks. If you have several that require a certain Font that is different from the Site Styles font then just make a Partial from it

Now to the second link color. The way the ‘alt’ colors are implemented in the Foundation CSS prevents you from just using the ‘alt’ class directly on the link. They are designed to be applied to the paragraph divs themselves. This is possible (by applying a the appropriate class in Paragraph Plus’ custom class but will result in them all being the same alternate colour).

By far the best way is simply to use the swatch colours as @teefers mentioned above. The classes mentioned though came out slightly wrong above (probably because of the forum editor). So just to clarify, the class you add to the link should be of the form:

fn-text-sw2c1

Where sw2 would be swatch 2, color 1 as set in site styles.
Similarly fn-text-sw4c2 would be swatch 4 color 2.


(Peter Kroman) #12

Thanks @tav.

I am working with it. But I am surely not a code man :slight_smile: So all the strange characters you have written to me is pure swahili language to me - and I haven’t the slightest idea what to do with them and where to put them :slight_smile:

But I am really getting the feel of partials. Great tool.

And while i am writing this I have found the solution. Using Paragraph Plus, Alternate Site Styles and manual coloring of the text. It works beautifully :joy:

Thanks for all the help.


(Peter Kroman) #13

Ad thanks to @teefers too for your persistent patience :slight_smile:


(Andrew Tavernor) #14

@peterkroman I’m glad you have got it working.

Just for future reference the swatch classes as per my last post are simply what you would add into the link dialog in place of the word alt as you had before.

The actual swatch colours are just defined in the Site Styles stack settings.