A couple of coding queries

[Emma]

Hi

I've been working on a new theme and there are a couple of things that keep I want to change but I can't figure out where to do this. The site I've been trialling it on is here.

The first thing is I want to remove the border around the status, following/followers, signature space, etc. on the Profile page but leave the border around the mini profile. I figured this out ages ago for another site but can't figure out where it is now. - solved

I also keep getting a scrollbar show up at the side of the banner for a few seconds before it disappears whenever I click on the Members or Messages pages. It also comes up at occasionally when I click on other things as well.

I've also now managed to get the banner carousel working but can't figure out how to add a box behind the text to make it show up better over the top of the banner but possibly alter the opacity so the boxes aren't solid.

I know they're probably easy fixes but any help would be greatly appreciated, thanks in advance!

[Chris]

Apr 1, 2023 15:32:44 GMT -8 Emma said:

I also keep getting a scrollbar show up at the side of the banner for a few seconds before it disappears whenever I click on the Members or Messages pages. It also comes up at occasionally when I click on other things as well.

Do you still get those disappearing scrollbars when you use a browser other than edge?

Apr 1, 2023 15:32:44 GMT -8 Emma said:

I've also now managed to get the banner carousel working but can't figure out how to add a box behind the text to make it show up better over the top of the banner but possibly alter the opacity so the boxes aren't solid.

The method being used for that carousel requires an opacity change for the animation and uses the fact that the opacity set on a parent element negates all opacity set on child elements (traversing from 0.4 set on child to 1 once parent enforces the rule). If that were not the case, then the alpha channel on a background color change might have been used instead to impart translucency on select children as you desire.

SPOILER: Click to show

Dec 23, 2017 20:37:13 GMT -8 Chris said:

[Source]

The Opacity declaration sets how opaque an element is. An opacity value of 1 means the element is fully opaque; an opacity value of 0 means an element is not at all opaque, i.e. fully transparent.

div { background-color: rgb(255,0,0); opacity: 1; }

The RGBA declaration allows you to set opacity (via the Alpha channel) as part of the color value.

div { background-color: rgba(255,0,0,1); }

The key difference between the two declarations is this:

Opacity sets the opacity value for an element and all of its children;
RGBA sets the opacity value only for a single declaration.

Here’s an example.

background-color: rgb(0,0,255); opacity: 0.5;

The background color of the second div has been set to blue, and the opacity set to half. The text inside the div has inherited the opacity value from its parent, and you can see the yellow div showing through.

background-color: rgba(0,0,255,0.5);

The background color has been set to blue, and the opacity set to half. The text inside the div does not inherit the opacity value, as it acts solely on the background-color declaration, so the text does not reveal the yellow div behind.

 

You can set the final opacity value on the parent element to something less than 1 if you wish to retain some transparency for all the sp-content.

• opacity: 1

  
  
  

• opacity: 0.6

  
  
  

CSS rule where final opacity can be changed is located toward the bottom of the Advanced CSS stylesheet of the theme

input.sp-selector-1:checked~.sp-content .sp-slider>li:first-child,input.sp-selector-2:checked~.sp-content .sp-slider>li:nth-child(2),input.sp-selector-3:checked~.sp-content .sp-slider>li:nth-child(3),input.sp-selector-4:checked~.sp-content .sp-slider>li:nth-child(4),input.sp-selector-5:checked~.sp-content .sp-slider>li:nth-child(5) {
   opacity: 1;
}

[Emma]

Chris

I'm so sorry, I had internet trouble for a while after I posted this. I've just been able to try the theme on a different browser and it looks like it is just a Microsoft Edge thing. I've had a couple of friends testing it and they haven't mentioned it on their browsers.

Thank you so much for the opacity information, that's exactly what I was after!