Nav Tree Background Image (Completed)

[Becca]

Hello! I was wondering if there is a template fix to give the Nav Tree a background image? I am really not very good with coding and barely understand CSS at all, so I'm not sure how to add a background image there. I looked through the library and didn't see anything specific for it. Any help is greatly appreciated, thank you!

[Retread]

Hi Becca

Rather than do that in a template, it's probably better to make that an addition to the Style Sheet.

Start by adding this to the bottom of the desired Style Sheet:
/* Nav-tree background image */
@nav_tree_background_image: url('//storage.proboards.com/forum/images/gradients/shade.png');
#navigation-tree{
   background-image:@nav_tree_background_image;
   background-size:100% 100%;
}
/* End of Section */

You can change //storage.proboards.com/forum/images/gradients/shade.png to whatever background image you want. If you'd like to add the ability to select from the ProBoards gradients using the Visual Editor, I can talk you through that.

[Becca]

You are amazing.   That worked like a charm, thank you so much Retread.

One more tiny question if I may? Is there a way to include the "participated" box in with that? If not, that's okay. I truly appreciate your help. 

[Retread]

No problem, Becca . We'll just add additional selector and it will apply the background image to the Participated button too.

/* Nav-tree and Participated background image */
@nav_tree_background_image: url('//storage.proboards.com/forum/images/gradients/shade.png');
#navigation-tree,
.recent-threads-button{
   background-image:@nav_tree_background_image;
   background-size:100% 100%;
}
/* End of Section */

If you want to also apply the same background-image to the News (it shares other styling with the Nav Tree) use this:

/* Nav-tree, Participated, and News background image */
@nav_tree_background_image: url('//storage.proboards.com/forum/images/gradients/shade.png');
#navigation-tree,
.recent-threads-button,
#news{
   background-image:@nav_tree_background_image;
   background-size:100% 100%;
}
/* End of Section */

Any interest in learning how to add that to the Visual Editor? It's not difficult.

[Becca]

Thank you so, so much Retread! I'll have to check the news table and see if it would be good to add it there too. I really appreciate your help.   If you feel up to trying to teach me how to add it to the editor, I'm all yours, hahaha! I'm not the best with coding (I mostly dabbled in html in my younger days), but I do know my way around stuff a tiny bit. You're a lifesaver, thanks!

[Retread]

Sept 22, 2020 11:14:10 GMT -8 Becca said:

If you feel up to trying to teach me how to add it to the editor, I'm all yours, hahaha!

I'm sure you can do it. And I already created the LESS variable in the CSS I gave you.

When you're in the Style Sheet for the same theme you're working on, click the Visual Editor Builder button beneath the Preview Pane.

Click Header (Top). That section will expand.
Click Navigation Tree Container. That section will expand.
Hover your cursor over the row: Background Color and some items will appear on the row.
Click on and the beginnings of a new line will appear.
Name it Background Image
In the dropdown that currently reads Section select Background Image
In the dropdown that currently reads Select Variable select johnnynav_tree_background_image
Then click on
Finally, click the Save Changes button near the bottom of the page or the Save Theme button near the top.

---

Now when you switch to the Visual Editor tab,
Header (Top) > Navigation Tree Container, you'll see a new item beneath the background-color named Background Color.

You can use the dropdown to select from 25 choices of gradients (including None). Most of the gradients won't have much effect on white or pastel background-colors. But you'll be able to see which ones work well if you select the background color first. Then the 'picker' will display the sort of appearance each gradient will produce.

You already make nice themes. Knowing how to add parts to the Visual Editor will make them more easily styled.

[Becca]

Sounds easy enough for me to do.   I will give it a try and let you know how it all goes. Thanks again for all of your help, you're amazing! 

[Becca]

Retread , I got the new field added in, but there was nothing like this line there:

In the dropdown that currently reads Select Variable select johnnynav_tree_background_image

I just picked this option:
 
@empty

But it didn't change anything and didn't add a background image to the nav tree.   I even saved it and went to the visual editor. The field was there and I uploaded the image I wanted to use, but it didn't change it. Any ideas what I might have done wrong? Hahaha!

[Retread]

Sept 22, 2020 13:49:10 GMT -8 Becca said:

Any ideas what I might have done wrong?

My only guess would be you weren't on the same theme where you saved one of the Style Sheet additions I gave you?

The first line of this is a comment, the second line begins with defining the LESS variable the Visual Editor Builder needs:
/* Nav-tree and Participated background image */
@nav_tree_background_image: url('//storage.proboards.com/forum/images/gradients/shade.png');
#navigation-tree,
.recent-threads-button{
   background-image:@nav_tree_background_image;
   background-size:100% 100%;
}
/* End of Section */

[Becca]

Retread , I went back and checked, but I followed your instructions as you said. The only thing I noticed is that where you specified the Select Variable dropdown......I don't have any choices that say johnnynav_tree_background_image. The only options I have are:


@empty

@all_gradients

@shadow_color

@smile_padding

@ve_lists_links_color

@images_path


I named the new field Background Image and in the Section dropdown I picked Background Image. It's just that third one. 

[Retread]

This is puzzling, Becca

You're certain this is on the same theme where you saved the CSS modification I gave you?

If you scroll down to the bottom of the Style Sheet, can you see the modification and is the line that starts with @nav_tree_background_image: still intact?

---

The other choices you have should NOT be used in the Visual Editor Builder. They need to be in the Style Sheet unchanged, or things could break.

Check the following lines to be sure they're at their stock values:

Line 1
@empty: ~"";

Line 60 (Colors & Theme Creator)
@all_gradients: url('@{images_path}/gradients/wave.png');

Line 134 (Common Elements and Classes)
@shadow_color: #333333;

Line 1392 (Posting Page)
@smile_padding: 5px;

Line 1455 (Preview Editor)
@ve_lists_links_color: @lists_links_color;

Line 1598
@images_path: '//storage.proboards.com/forum/images';

[Becca]

Sept 22, 2020 18:31:11 GMT -8 Retread said:

This is puzzling, Becca

You're certain this is on the same theme where you saved the CSS modification I gave you?

Eheh........so, I thought since I was adding the field to the visual editor that I wouldn't need the CSS modification at the bottom of the style sheet, hahahaha. *Facepalm* As soon as I put that back in, the nav_tree_background_image choice came up.    It worked like a charm, thank you so very much, I really appreciate you taking the time to help me, Retread .  

[Retread]

Excellent. If you review the CSS modification, you'll begin to understand how this works and will be able to make your own changes to the Visual Editor Builder any time you like.

If you have any questions about the process, feel free to ask. 🙂