Jump to content
Sign in to follow this  
Silvestru

Simple share point help

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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 by Sensei

Share this post


Link to post
Share on other sites

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.

Capture.PNG

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

Share this post


Link to post
Share on other sites
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. 

Share this post


Link to post
Share on other sites
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.

image.png.30867bb26bccae5b3a2e8e0f43a2c2d1.png

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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/

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

 

Share this post


Link to post
Share on other sites
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!)

Share this post


Link to post
Share on other sites

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 by Sensei

Share this post


Link to post
Share on other sites
11 minutes ago, Sensei said:

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

Well spotted!

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.