CSS for Lux theme

Classic General
1

Does anyone know if there’s a way to change the of the ‘Close’ text in the Lux theme by @MultiThemes? So it would have, for example, MENU in white, and then CLOSE in blue. Any CSS for that?

You can see the theme demo here:
https://www.multithemes.com/examples/lux/banner_options/

2

Hey jabostick
Based on the demo page and if I understand you correctly that you just want to change the color of the text for the ‘CLOSE’ state to be blue (or whatever):

#drop.boxopened:after {
     color: blue !important;
}

Hope thats what you were meaning.

1 Like
3

HI @jabostick this is the code

#drop:after, #drop.boxopened:after,
#drop [class*=“icon_plus_alt”] {
color: blue !important;
}

Right! however we have to add also the icon code.

2 Likes
4

@MultiThemes
Yep! That will give a nicer aesthetic than just changing the string. :smiley:

5

Awesome, thanks @MultiThemes and @klaatu! Works great, but that’s also changing MENU to blue as well…

I’m just heading out the door but have included a rough demo of my own in case my settings are off somewhere… https://www.jbostick.ca/test/scotian/

Thanks again

1 Like
6

Hi Jabostick
Not sure where its coming from but you have an earlier !important on a selector which is preventing the CSS provided by @MultiThemes from working. Did you try adding some CSS of your own and not remove it? I think its this:

#drop:after, #drop.boxopened:after, #drop [class*=“icon_plus_alt”] {
    color: rgba(31,38,46,1.00) !important;
}
1 Like
7

Thanks again. I’ll take a closer look when I get back home.

8

So here’s what I have in my project file:

#drop:after, #drop.boxopened:after,
#drop [class*=“icon_plus_alt”] {
color: rgba(31,38,46,1.00) !important;
}

The color there is just the dark navy from their logo. The only other thing is a snippet from the theme docs to hide the logo.

18%20AM
18%20AM1266×420 141 KB

9

you can use the DEMO project ( available in the DMG file). Also this page is avialble with all Extracontents.

10

Thanks. I did grab the demo’s but haven’t been able to open them (they may be RW 8.1 and I haven’t upgraded to the beta yet).

Any thoughts on the CSS that I have included? Is there a way that I can get the ‘MENU’ text to stay white and only change the ‘CLOSE’ text?

11

What happens when you remove your existing additional CSS and use only what I provided?

#drop.boxopened:after {
     color: blue !important;
}
2 Likes
12

/* change only CLOSE text color /
#drop.boxopened:after,
#drop [class=“icon_plus_alt”] {
color: rgba(31,38,46,1.00) !important;
}

this is the code to customize the text content
/* text BUTTON content */
#drop:after {content:“MENU”;}
#drop.boxopened:after{content:“CLOSE”;}

1 Like
13

You guys rock! The extra > #drop:after, was what was getting in the way. Thanks again

14

@jabostick glad you solved.
BTW: In LUX you can use RGBA colours with alpha channel, a further option to mix colours.

15

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.