Unordered List links

User 515127 Photo


Registered User
116 posts

Hi guys,

I'm probably missing something here but this is what I am experiencing.

I created an unordered list, created the class settings I wanted for the list items. It looked okay.

I then clicked the pencil to get into edit content mode on one of the list items, highlighted the text, clicked to link pencil, the text is there, I added the target and clicked away to close the dialog. My formatted list item is now marching to the beat of a different style sheet property set. I go back and look at the link and there's an automatically assigned class name to the link. I delete that class name and it grows back. Meanwhile my list item is now stuck with that class and associated color etc. I tried to reset the properties within the edit inline element control panel to the values I wanted and they don't stick, they don't get exported and appear in the resulting main.css.

I can 'fix' the override by editing main.css and inserting the desired color property into the li a.[line item class] entry that is created by RSD, or by creating a style that I paste into the header of each page - but I shouldn't have to work around the software to accomplish this task and having to manual fix stuff after every export gets tiresome.

Regards,
Gordon
User 232214 Photo


COO
827 posts

gllincoln wrote:
I shouldn't have to work around the software to accomplish this task and having to manual fix stuff after every export gets tiresome.

Nop, you should not at all!! :D

Not saying you missed something but all of this works 100% for us, so some sort an 'accidental' setting might have been created...somehow. ;)

If you can get us your .rsd project file (either through support, of just post a download link here) we can take a looksy
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 515127 Photo


Registered User
116 posts

Thanks to Bob Visser for telling me it was working okay for him. That motivated me to go back in and sort out what the source of my issue was.

UPDATE: When I set the typography color, font, and weight properties to an unordered list element (for example white, arial, 16px, 400) and then I set the link and click finish - it's now light blue. I go back into the link and the typography color is still showing as white with an auto-assigned class name list-item-text-1. However in the preview mode it's light blue.

Because I am seeing a white block in the typography color panel and when I double-click it, it is showing me a property of #ffffff - I expect it to be, in fact, white. However, I go back to preview and it's light blue. The linked line item is picking up and retaining the (unlinked) line item font face, size, and weight settings. Only the color is not actually inherited. However, if I go in, change the color to anything else, then return the setting to the desired color in the inline elements panel - it then picks up the color 'change' and adds that to the linked item class.

What seems to be happening is that the line item with link has in fact a different style color attribute than it is showing in the typography section (picking up a default a: setting from the coffeegrinder file) rather than inheriting it from the line item (which the typography window defaults to, making it appear that it does inherit that value)

I thought I had tested this combination but apparently I hadn't changed the color and then set it back to the desired color and then tested it. Now that I understand the sequence of actions required to obtain the desired outcome, I can get there and that's a lot better than having to go in with an editor after export.

The source of my irritation is that there is an anchor element default color set up in the coffeegrinder.css so unless you explicitly declare the color attribute (by making that control dirty) in the link typography, the coffeegrinder.css default will override the line item color property.

<from coffeegrinder.css> a:link { color: #5087ca; text-decoration: none; }

Regards,
Gordon

Bob Visser wrote:
gllincoln wrote:
I shouldn't have to work around the software to accomplish this task and having to manual fix stuff after every export gets tiresome.

Nop, you should not at all!! :D

Not saying you missed something but all of this works 100% for us, so some sort an 'accidental' setting might have been created...somehow. ;)

If you can get us your .rsd project file (either through support, of just post a download link here) we can take a looksy
User 232214 Photo


COO
827 posts

gllincoln wrote:
Thanks to Bob Visser for telling me it was working okay for him. That motivated me to go back in and sort out what the source of my issue was.


Nice, that's some good digging in!

gllincoln wrote:
When I set the typography color, font, and weight properties to an unordered list element (for example white, arial, 16px, 400) and then I set the link and click finish - it's now light blue. I go back into the link and the typography color is still showing as white with an auto-assigned class name list-item-text-1. However in the preview mode it's light blue.


That is indeed how it works, in CSS inline styles are more specific / have a higher precedence than non-inline styles so what it set there will prevail. The selector drop down works the same way, preview will show the prevailing style, independent of which 'Apply to' selector is active. The different colors (pink, blue, yellow) show if a higher priority style is applied. For example, if the color thumbnail shows a black color when 'Apply to Class' is selected, but the control also show a yellow line, a higher priority style is declared for the ID and the preview color might not be black. You can change the selector drop down to ID / yellow to see that style in the control.

Now, the inline styles don't use a color, but a different mode (edit mode). Considering the above You raise a valid point here, we could think about adding a (color) indicator to the design pane showing an inline style is applied to (parts of) an element that has precedence.

gllincoln wrote:

I thought I had tested this combination but apparently I hadn't changed the color and then set it back to the desired color and then tested it. Now that I understand the sequence of actions required to obtain the desired outcome, I can get there and that's a lot better than having to go in with an editor after export.


Agreed :)

gllincoln wrote:

The source of my irritation is that there is an anchor element default color set up in the coffeegrinder.css so unless you explicitly declare the color attribute (by making that control dirty) in the link typography, the coffeegrinder.css default will override the line item color property.


Out thinking here is that links will have a different style than 'normal' text to make them easy to distinguish for the visitor / reader / user. Giving them a different style from the start will make them easier to recognise for the designer / user of RSD as well. Since they will end up having separate styles anyway, we did not feel there was any pollution.

But...you have a really good point in that the default styles for inline links can not be changed in the app right now. So that is something we need to work on. In a future update (no ETA for now) we will probably allow you to edit the default styles / create a style guide per project where all default styles can be defined. Cool?

Thanks for the digging and feedback, things like this will help us make RSD even better :D
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 434929 Photo


Ambassador
938 posts

You better look at this link

https://www.youtube.com/watch?v=R-MSBpoCPCc

Hope it helps
Guys at coffeecup are awesometacular.
User 232214 Photo


COO
827 posts

Mansour ... wrote:
You better look at this link

https://www.youtube.com/watch?v=R-MSBpoCPCc

Hope it helps


Mansour, in editing mode, if you give these links the same class all (color) changes will be applied automatically to all of them.
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 434929 Photo


Ambassador
938 posts

Bob Visser wrote:
[
Mansour, in editing mode, if you give these links the same class all (color) changes will be applied automatically to all of them.


I am aware that class does amazing things, But sadly I just could see that box there :( and thank you for mentioning it Bob.
Guys at coffeecup are awesometacular.

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.