Custom CSS questions

Backlight 3 Customization
#1

OK, so the questions for Backlight 3 concerning custom css coding.

  1. How do I make the drop-down menus transparent? Have it done for Backlight 1 as seen on my site here - https://www.exposedvisions.com using custom css, but the coding doesn’t seem to be working on BL2/3 on my test site.
  2. How do I customize the masthead – example add drop shadows?
  3. Do I add those customizations to the page(s) themselves or the CSS file for BL3

I’ve a few more coding questions, but for now that’s it.

Thanks :sunglasses:

#2

Any changes you make should be in a custom css file, just like in Backlight 1

#3

where do you want drop-shadows in relation to the masthead?
If you’re using a text-based masthead, there’s a text shadow control in the Masthead section.
Do you have link to your BL 3 site you can share?

#4

Some of the structure in BL2/3 is different, therefore you’ll likely need to modify the css to the new structure and selectors. (you’ll encounter this in other areas as well)
If you can share a link to the rest site we can probably steer you in the right direction.

#5

If you do, can you create separate topics for each?

#6

I’d like the drop shadows around the masthead itself. Also, I see I have a top and bottom border option, but no left/right border option.

Anyway here’s a look at my test site. Looking to spruce up the masthead, but my main focus right now is getting the dropdown menus transparent.

Thanks.

#7

Not a problem if that’s the wish.

Thanks.

#8

Yeah, it helps keep things nice and neat and easier for others to find things that might help them out.

#9

If you make the background of the drop-downs transparent, then the text in the links will be over the text in the body of the page. There should be some background color so that doesn’t happen.

#10

Sorry, but I’m somewhat lost on your meaning - I’d like the drop-down menus to behave like they’re doing under my current site here: https://www.exposedvisions.com. Click galleries. (that site was created using BL1 and using custom css for menu transparency

Here’s the code for it:

.sub-menu {
	background-color: rgba(255, 255, 255, 0);
}
.menu-item-has-children ul.sub-menu li {
	background-color: rgba(33, 33, 33, 0.6);
}

Doesn’t seem to work with BL3 - what am I missing?

Thanks.

#11

sorry, I thought you wanted them completely transparent.
It looks to me that your css is being applied. But there’s also what looks like an overall background color being applied by this selector:
nav.nav .menu-item ul

nav.nav .menu-item ul {
background-color: #454545;
}

that gets set in the template under navigation > horizontal navigation > background-color:hover
There’s no provision in that setting’s color picker for transparency so it looks like you’ll need to put it in custom css

#12

Yes, I will need to add custom CSS, I just needed the name for the item being modified - “nav.nav .menu-item”, instead of “sub-menu”

Anyway I just got what you were saying earlier where text would overlap during transparency. That’s not going to be an issue as I’ll be adding a custom alum to that page which will sit above the content area as is on my exposed visions site.

Anyway to customize the masthead is it still called masthead or something else? And yes, any other questions… new posts. Got it.

Thanks

#13

OK, I just realized there’s a bit of a communication issue going on here - On the exposed visions site you looked at, its using the css code I posted earlier for the navigation (dropdown) menus. That code is NOT working with the test site. I need the css code to get transparency working for navigation menus (drop-down menus) on the test site (BL3).

In short, the css code used for exposed visions (BL1 site) is NOT working for the test site (BL3). What css should I be using for the “test site”. What is the proper name of the navigation menu for css coding?

Sorry for the confusion.

#14

the browser inspector showed the masthead div was using the .masthead and .masthead-primary classes.
But there must be something else to it as I couldn’t get a box-shadow to show up.
You can try digging further with the browser inspector. I’ll try looking some more tomorrow if I get time, or maybe someone else will weigh in.

#15

I’m just baffled as to why I can create a transparent drop-down menu in Backlight 1, but can’t/couldn’t do it in BL 2 & 3 as I had the same issue in backlight 2.

This code works without issue in BL1, but doesn’t in BL 2 & 3…

.sub-menu {
	background-color: rgba(255, 255, 255, 0);
}
.menu-item-has-children ul.sub-menu li {
	background-color: rgba(33, 33, 33, 0.6);
}

The question is why???

#16

It is working (or at least I could see in the inspector that it’s being applied).
The issue is the solid hover color that I mentioned above.

#17

For clarity, what site are you looking at?

#18

your test site.

#19

If you use the browser inspector around the navigation items and look for that dark color, you’ll find this:

image

I just took all those selector and created a new rule for custom css and it seems to work. You may have to adjust color and opacity:

nav.nav .menu-item ul, nav.nav .menu-item:hover, nav.nav .menu-item:hover ul, nav.nav .touchable .menu-item.hover, nav.nav .touchable .menu-item.hover ul {
	background-color: rgba(0,0,0,0.4);
}
#20

So just copy the code above and place in custom CSS?

Thanks