[SOLVED] Changing the cut link text colour and removing the braces around it

[london_fan]

Hello to all the lovely and helpful people here.

I recently ditched my old LJ-imported layout completely and switched to my first genuine Dreamwidth layout (Transmogrified) which I have customized to the best of my abilities ever since. However, (LJ-)CUTS have become my new nemesis, since they continue to defy a lot of my attempts at customization. I managed to exchange the Expand/Collapse/Collapse-End images, but there are two more things I'd like to change:

1. The text (colour) of the link
   How can I change the colour of the cut link text? Right now the cut link text takes over whatever styling I've done to entry links and general. The following CSS .cuttag_container a {} was suggested in the replies to a similar question here from 2011, but no matter what properties I add, nothing works, even if I add !important;. So maybe there's some newer CSS to address the cut-text link?
   
   SOLVED with the following CSS:
   

   span.cuttag + b a {
   color: #0093AE !important;
   }

   Thank you momijizukamori!


2. The brackets around the text
   Is there any way to remove them completely or at least change their colour? They are displayed in the regular entry text colour that doesn't match my (wanted) cut images and text at all, so they look quite clunky. I thought that there must be a function in the source code to address the issue, but I am not sure which one that might be...
   

   function print_module_cuttagcontrols() {
   
   var Page p = get_page();
   
   open_module("cuttagcontrols", $*text_module_cuttagcontrols, "");
   
   print safe """<span class=\"cutTagControls\"><span style=\"font-size: smaller;\">$*text_cuttagcontrols_nocuttags</span></span>""";
   
   close_module();
   
   }

   
   That's basically the only function I could find that addresses something with "cuttag" at all, but there are no brackets in sight, so I am probably completely off?
   
   SOLVED with the following CSS:
   

   span.cuttag + b {font-size:0px}
   
   span.cuttag + b a {font-size:1rem}

   Thank you once again, momijizukamori!

Anyway, I am using a custom theme layer and I'm reasonably comfortable with overriding S2 Core functions or tackling some CSS. I just need help what to change here, since neither "trial and error" nor combing through stuff with the page inspector have revealed any workable solutions so far and it's been giving me some headaches.

Any help would be highly appreciated!

Comments

[momijizukamori]

For 1, it looks like we... don't actually have any tagging around the cut text link? Which we should maybe fix at some point, but in the meantime, using "span.cuttag + b a" with an !important seems to maybe work ('+' is the sibling selector, so it's 'select a bold element that is next to the span element with the class 'cuttag' and then target the link inside it')

For 2, that's not the right bit of code - that's for the 'expand all/collapse all' sidebar module. I'll do some digging, but I'm not sure it's produced in S2 at all, and may already be baked in to the entry text when it gets there. If so, it looks like you can maybe use the sibling selector trick again, set the font size of the b element to 0px, and then set the font size of the a element inside it back to 1rem or whatever.

[london_fan]

Thank you so much for your help! No wonder I was so stumped trying to figure things out with the page inspector and just couldn't find any useful bits of CSS.

1.) That worked wonderfully! Thank you!

2.) Yeah, that function didn't look like the right thing, but I just couldn't find anything else and thought "Well, the cuts must be programmed somewhere, right?" Okay, I haven't got that to work (yet), but I'll keep fiddling around with the idea.

[london_fan]

Regarding 2 (Styling/removing the brackets):
I'm sorry, but I haven't been able to figure out a solution with CSS yet. Maybe I am just doing it wrong, so if there might be something else I could try, I am still open to suggestions.

[momijizukamori]

Okay, this is what I just tested on my journal, which seems to work (and you should be able to see it there still):

span.cuttag + b {font-size:0px}

span.cuttag + b a {font-size:1rem}

1rem may be the wrong height for you (a rem is equal to the font size of the document root element, which may be something whacky) - you can't use em or percentages, because those are relative to the parent element above it (and anything times 0 is... still 0), but you should be able to use partial rems or points or px.

THANK YOU, THANK YOU, THANK YOU!

[london_fan]

I am not sure where exactly I went wrong, because I could swear that's the code I tried, but obviously not. So thank you for your patience and help! You are a star! Thank you so much!

Re: THANK YOU, THANK YOU, THANK YOU!

[momijizukamori]

Might have been something silly like a missing unit, who knows! Glad it works for you :D