Heading Linking and styling issues -...

User 2706435 Photo


Ambassador
444 posts

I haven't experienced the underlining problem that you described here. I do not believe that RSD default the css to underline links. Check your browser settings. I know in Firefox, you can override a page with your own set of colors for each of the states, and override underlines. My browser has it set to NOT over ride them. I don't have underlines on any state. Or in RSD. Make sure in your test, its a new document. A class set on one page might still be applied to the page you are testing. I am able to go back an edit link styles.

I believe I was in error describing what RSD does with the link. When a link is made, its get the blue text because that is described in the default css that RSD creates in the file css/coffeegrinder.min.css at this spot: "a{color:#5087ca;text-decoration:none;line-height:inherit;" And as you see, underlines should be removed, so that a browser if set to follow the page's rules for links, will not display a underline unless the user in RSD creates one.

The problem is RSD forces the user to accept that default blue text, or find their previous color on the palette. But it is inheriting other properties, like shadow. I find it inconsistent that the user can change a bunch of text properties, including the font, but can't change a shadow for a link - that if changing the size and font of a text, the shadow properties may need to be changed as well. What CC seems to be doing is to allow someone to make modest changes to the text. I'd like an option to not have link default styling. However, it may also be a practical decision, so that when creating your page and you make a link - you can see where that link is. Then, there should be an option to reset the color to the parent or to the class of the parent.

The heading text can be changed again, but in your example, all the text is in a link, and the minimal styling properties are being applied to the link. You can add text outside of the linked text, and properties of the header will apply to that text. Sometimes, RSD seems to get a little crazy if one makes a bunch of edits. In that case, I reset the styles and start over, and half of that just might be me messing something up I can't figure out what I did.

I don't know if CC is fixing the link pseudo link class css order. I am just assuming that they will, because it is a css breaking mistake, that must have been introduced in the last version. And it should be an easy fix, just change the order of 2 of the 4 pseudo classes.
User 2823310 Photo


Registered User
312 posts

Yeah it can build it seems with edits, but we had that problem in our software too. Believe that used to be a windows thing, at least that's what our programmers told us. It's also about finding which steps you need to do to get around it in RSD, and doing edits in the right places... as you're obviously are getting used to too, that and the limitations.

I ended up just using the CSS cascade to place style in the head but can't cut as much of the bloat as I'd like. That may be a learning curve. I really do miss the HTML editing we finally got into our website program though. That can solve a lot of issues between releases too. Still RSD is on the right track all in all, and coffeecup is a good company so I've heard through the grapevine. Which is why I decided to move on with RSD ours is just getting too dated, CC at least stays on the edge.
User 103173 Photo


VP of Software Development
0 posts

Just an FYI, the link class css order issue will be addressed in the next release. Thanks for reporting that as it was one that we were not aware of.
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 2823310 Photo


Registered User
312 posts

Since a lot of these issues can't be fixed with RSD styling this a quick fix you can use.
This is the example: TEST SITE and so you can View source code
that won't be up forever just while I'm testing live for the iPhone etc.

To place these CSS fixes you copy the code below and paste it in your pages head in settings .
TEXT OUTLINE
<style type="text/css">
/* === page stuff === */
.txtoutline {text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;}
</style>
page stuff is just the comment I'll be adding a lot of code there for colorbox etc.
That uses a class txtoutline like the headers main text in the TEST
The gold ALTER EAGLE with the white text outline.
You add the class to your text with RSD and put that style in the Head.

HEADING LINKS
<style type="text/css">
/* === page stuff === */
.txtoutline {text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;}
h2 a.main-sub-link:hover {text-shadow: #fff 1px 1px 0;}
</style>
To fix the missing text shadow like in the TEST H2 headings on hover.
You add the styles you can on your headings to the class you use,
this one uses main-sub-link
Then you can add the missing effects using this method in the Head style.

BUTTON LINKS using an active class, and link repairs in general.
<style type="text/css">
/* === page stuff === */
.txtoutline {text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;}
h2 a.main-sub-link:hover {text-shadow: #fff 1px 1px 0;}
a.link-button.MenuLink.active:link {color: #daa520;}
a.link-button.MenuLink.active:visited {color: #daa520;}
a.link-button.MenuLink.active:hover {color: #fff;}
a.link-button.MenuLink.active:active {color: #daa520;}
</style>
In the TEST on the top menu link I added a class called active
so the page you are on will be a different color than the other links
I do that for a quick reference to the visitors since I use the same Header for each page.
You add the class to your menu link (these are buttons) and put in the styles with RSD
Then to get those links to work you add this style to the Head so they are in the correct order.

User 2839349 Photo


Registered User
3 posts

A little help please. I created a sticky navigation bar with RSD and for the life of me I cannot figure out how to make each of the list items an internal link or any kind of link. Reaching out as I have tried on my own numerous times searching for the answer. It may have been right in front of me - what am I missing? Thanks in advance.
User 122279 Photo


Senior Advisor
14,650 posts

Use a button link or a text link for the items, and in the tool panel, Design pane, edit the href box. Remove the # and write the file name you want.
Attachments:
Ha en riktig god dag!
Inger, Norway

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


User 2839349 Photo


Registered User
3 posts

Inger - Thanks your lead got me through it!

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.