Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

SugarCube: Link and styles not applied

Greetings everyone,

as I found out my little adventure takes a while to play through I moved from SugarCane to SugarCube looking for the save feature. However, recoding the easy macros I used wasn't that hard to do - what I don't get so far is why it does not apply my stylesheets for links and <hr> lines. Those for the body, the images and even the cursor work fine instead. I have only one stylesheet passage. Take a look:
a.internalLink, a.externalLink {
color: #grey;
cursor: [img[lumos-wand]] 20 10, auto;
}
a.internalLink:hover, a.externalLink:hover {
color: #d3d3d3;
text-decoration: none;
cursor: [img[lumos-wand]] 20 10, auto;
}
And the <hr> lines:
.passage hr {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
background-image: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
background-image: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
background-image: -o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
}
What's my mistake? I'm afraid it's a very obvious one. Nonetheless I appreciate every help you can offer. Thanks a lot!

Comments

  • If you use your browser's Inspect Element feature you will see that the classes associated with internal and external links are different between Sugarcane (internalLink / externalLink) and SugarCube (link-internal and link-external), changing your CSS selectors will fix this. Also CSS colour names like grey do not start with a hash (#).

    a.link-internal, a.link-external {
    color: grey;
    cursor: [img[lumos-wand]] 20 10, auto;
    }
    a.link-internal:hover, a.link-external:hover {
    color: #d3d3d3;
    text-decoration: none;
    cursor: [img[lumos-wand]] 20 10, auto;
    }
    Your HR based selector is working, you don't indicate what your background colour/image is but maybe the colour gradient (from white to off white) is not enough to be seen.
  • Hello greyelf,

    I found this advise of yours using the Inspect Element feature before when I seached for an answer in the archives. Unfortunately I was not able to understand. Now that I knew what I had to look at I got the point. Also helped me with a lot of other issues, so thanks a lot for that explaination. The # before the colors name however was a late mistake of mine when I played around with the hexcode to solve the problem, by the way.

    Concerning the HR: You were correct, the background color was missing - at least for SugarCube. SugarCane rocked it without.

    Again my appreciation and sincere regards.
  • One way to use the Inspect Element feature if your using Windows is to place your mouse cursor over the item in the page you want to inspect, use the right mouse button to open the context menu and select the feature. This should result in the HTML for the item being preselected. You may be able to do the same thing on other OS.
Sign In or Register to comment.