Simple share point help

[Silvestru]

Hello Forum,

In share point I am able to change the font colour of the left menu using the below:

Quote

 

<style>

span span .menu-item-text { color: red; }

</style>

 

Could you please help me change the actual background colour with a similar script? 

Thank you!

[Sensei]

In CSS it can be done using background-color property:

https://www.w3schools.com/cssref/pr_background-color.asp

JavaScript code should call document.getElementById()/getElementsByClassName()/getElementsByName()/getElementsByTagName()/getElementsByTagNameNS()

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

This article has example of how to make buttons that change color of text dynamically if user is pressing them in JavaScript.

background-color in JavaScript is called backgroundColor:

https://www.w3schools.com/jsref/prop_style_backgroundcolor.asp

Actually you have here entire code for setting backgroundColor from button. Click on "Try it Yourself".

Edited February 20, 2019 by Sensei

[Silvestru]

Hey Sensei. Thank you for your help but this refers specifically to the left hand side navigation bar. Your links would change the entire background.  

I am specifically looking for C# for SharePoint.

For example the code that I pasted in OP has this effect:
I need to change the background of just this left menu.

I thought it would be something like:  .menu-item-background { color: red; }

[Strange]

5 minutes ago, Silvestru said:

Hey Sensei. Thank you for your help but this refers specifically to the left hand side navigation bar. Your links would change the entire background.  

Most browsers have some sort of "Inspect Element" option (e.g on the right-click context menu) which will display the structure of the HTML and CSS that is rendered. This should let you select the part of the display that you want to modify and find out what class (as in .menu-item-text) is associated with it. Or, if it doesn't have a specific class, you might need to find a higher level element in the hierarchy that does and then specify the path to the thing you want to change. 

[Silvestru]

2 minutes ago, Strange said:

Most browsers have some sort of "Inspect Element" option (e.g on the right-click context menu) which will display the structure of the HTML and CSS that is rendered. This should let you select the part of the display that you want to modify and find out what class (as in .menu-item-text) is associated with it. Or, if it doesn't have a specific class, you might need to find a higher level element in the hierarchy that does and then specify the path to the thing you want to change. 

I didn't think of that! Truth be told I am a beginner at this.

I suspect it's this item after inspecting but still not sure how to write the code.

[Strange]

1 hour ago, Silvestru said:

I suspect it's this item after inspecting but still not sure how to write the code.

The selected item should be highlighted in the HTML page when selected. I would guess that one of the higher level divs might be what you want (eg. .sideNavBox)

As for the code required, it would be something like:

div.sideNavBox { background-color: lightblue; }

https://www.w3schools.com/css/css_background.asp

[Sensei]

16 hours ago, Silvestru said:

I thought it would be something like:  .menu-item-background { color: red; }

Try rather:

span span .menu-item-text { background -color: red; }

The left side of CSS row are qualifiers. There are qualifiers for tag-names (e.g. <span>), for classes (prefix "." (dot) e.g.  ".menu-item-text"), and for id (prefix "#" e.g. #myID).

You should better read W3Schools https://www.w3schools.com/

 

[Strange]

16 minutes ago, Sensei said:

Try rather:

span span .menu-item-text { background -color: red; }

That will only colour the background of the text, which will probably result in blocks of red around the text surrounded by the existing background.

[Sensei]

Just now, Strange said:

That will only colour the background of the text, which will probably result in blocks of red around the text surrounded by the existing background.

How are you interpreting @Silvestru words "Could you please help me change the actual background colour with a similar script? " ??

Example:

We have HTML code <span class="menu">MENU!"</span>

to change menu text color, you will use CSS:

.menu { color: red; }

to change background color of it you will use CSS:

.menu { background-color: red; }

to change both text and background color of it you will use CSS:

.menu { color: white; background-color: red; }

 

 

 

After rethinking.. maybe you're talking about "border" property in CSS.. ?

https://www.w3schools.com/cssref/pr_border-left_color.asp

It's indeed possible to change left, right, top and bottom properties of border. Such "bar" of single color on the currently picked up menu for instance.

It's often used nowadays in modern websites. Either left or right and bottom, below some menu item.

 

[Strange]

14 minutes ago, Sensei said:

How are you interpreting @Silvestru words "Could you please help me change the actual background colour with a similar script? " ??

I interpreted it to mean the whole menu area, not just the text. (Because I know that just changing the text background looks really ugly!)

[Sensei]

Reedited..

15 hours ago, Strange said:

div.sideNavBox { background-color: lightblue; } 

On his screen-shot sideNavBox is ID not class..

CSS qualifier for IDs would be #sideNavBox

Okay. Let's try this instead:

#sideNavBox span.menu-item { background-color: red; }

or

span.menu-item { background-color: red; }

 

This class mentioned in the first post ("menu-item-text") is nowhere on his screen-shot. But there is class with name "menu-item"..

 

Edited February 21, 2019 by Sensei

[Strange]

11 minutes ago, Sensei said:

On his screen-shot sideNavBox is ID not class..

Well spotted!

[Silvestru]

2 hours ago, Sensei said:

Okay. Let's try this instead:

#sideNavBox span.menu-item { background-color: red; }

 

 

Hello Sensei, Strange. Thank you both very much! 

This quoted option was the one that did it. You guys really helped me out.

[Sensei]

@Silvestru

BTW, remember that HTML element can be in multiple classes at the same time. For instance:

 

<!DOCTYPE html>
<html>
<head>
<style>
.bold { font-weight: bold; }
.red { color: red; }
</style>
</head>
<body>
<div class="red bold">Example red bold text</div>
<div class="red">Example red text</div>
<div class="bold">Example bold text</div>
</body>
</html>

 

Therefor class name cannot have space " " inside. It's used to separate one class from other class when element is in multiple classes at the same time ("red bold").

On your example from screen-shot we can even see that internal <span> tag is using 5 different classes.