Test Links in Responsive Layout Maker...

User 2240129 Photo


Registered User
4 posts

Hi
I am trying to learn how to use Responsive Layout Maker Pro. So far so good, but have encountered a problem with text links, Is there a way to have different colors displayed when the link is active, has been visited, etc.

I have found that I can do it by adding the following code to "main.css", after the a.link-text.text-link-x section, but that code obviously disappears with each change to the Layout Maker file. I tried adding the code to a new "custom.css" file, but that did not work.

a:link {color:black;}
a:visited {color:green;}
a:focus {color:purple;}
a:hover {color:red;}
a:active {color:navy;}

I also tried the following in the "custom.css" file, without any results:

a.link-text text-link-1:link {color:black}
a.link-text text-link-1:visited {color:orange}
a.link-text text-link-1:focus {color:purple}
a.link-text text-link-1:hover {color:red}
a.link-text text-link-1:active {color:navy}

and

.link-text text-link-4:link {color:black}
.link-text text-link-4:visited {color:orange}
.link-text text-link-4:focus {color:purple}
.link-text text-link-4:hover {color:red}
.link-text text-link-4:active {color:navy}

The code in the html file is:
<div class="coffee-span-12 coffee-801-span-4 coffee-350-span-12">
<span class="text-element text-2">Corporate<br>
</span>
<a class="link-text text-link-1" href="vision.html" target="_top">Our vision</a>
<a class="link-text text-link-2" href="fdn_society.html">Directors, constitution &amp; by-laws</a>
<a class="link-text text-link-3" href="minutes.html" target="_parent">Minutes, general meetings</a>
<a class="link-text text-link-4" href="minutes_board.html" target="_top">Minutes, board meetings</a>
<a class="link-text text-link-5" href="financial.html">Financial statements</a>
<a class="link-text text-link-6" href="dn_privacy.html" target="_blank">Privacy policy</a>
</div>


Any assistance will be appreciated.

Best of the season to you all!

Thank you!
Harvey Graham

PS: The colors selected are just for testing purposes, not real life!

Thank you,

Harvey Graham
User 103173 Photo


VP of Software Development
0 posts

You should never modify the main.css file. Always make your changes in a custom.css file. Post a link to your website so I can see it online. It is hard to identify a problem just by looking at the code.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2240129 Photo


Registered User
4 posts

Hello,

Thank you for your response.

I agree about not changing main.css, but was not having any luck otherwise.

As I am just started with the design -- while trying to learn Responsive Layout Maker, I have not yet uploaded the pages to the server.

I will see if I can set something up at a temporary location.

Regards,

Harvey Graham
User 434929 Photo


Ambassador
938 posts

Make sure your linking your custom CSS to your HTML document
https://www.youtube.com/watch?v=ShZVJVfkcxg
Guys at coffeecup are awesometacular.
User 2240129 Photo


Registered User
4 posts

Hi
Thank you!
While the link I used was as set out in some of the Layout Maker resource material, that was the problem.
Thanks again!

User 2336498 Photo


Registered User
40 posts

Scott Swedorski wrote:
You should never modify the main.css file. Always make your changes in a custom.css file. Post a link to your website so I can see it online. It is hard to identify a problem just by looking at the code.


Scott. I created a custom CSS but it does not create the design I specified. When you say create a custom.css, it is empty as shown in the video, I assume you do not say, to duplicate the main.css and then just change the attribute for the a element and keep all the other css statements in the custom.css.
User 2088758 Photo


Senior Advisor
3,106 posts

Please remember if you create a custom.css file to link it in your header too. The custom.css file is where you add your own style to the elements within your project. Sometimes what I do is find the element I want to change in the main.css and copy it to my custom.css and change it there. That way when you re-export your project it will not overwrite your changes.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 122279 Photo


Senior Advisor
14,566 posts

And make sure you add the link to the custom css file below the main.css.

Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.