If anyone is interested in learning CSS...

[Angelblue05 4130]

I thought it would be a good idea to gather information for people who wish to quickly and somewhat appropriately learn CSS. I hope this will be helpful to someone.   Feel free to contribute!

 

Custom CSS in Media Browser server

You can find the CSS editor in your Media Browser server dashboard

under Settings -> Branding. All you need is the name of HTML element you want to change,

the CSS property you want to modify and the new value you want to apply.

Get started!

To give you a quick example, let's change the background color of the dashboard from white to dark grey. When modifying your UI, you will need to consider how it impacts other CSS properties. For example, if you change the background color to a darker one, you will also need to change the font to a lighter color. Let's get started by including the following in the custom CSS editor of your dashboard:

.ui-page-theme-a {
  background-color: #333333;
  color: #ffffff;
}

What does it mean?

.ui-page-theme-a        is the HTML element. An element can be a title, an image, etc. It can also contain other elements.
background-color        is a CSS property. It modifies the background-color of the element.
color                   is another CSS property. It modifies the font color of the element.
#333333, #ffffff        is the value. In this case, the color code is being modified.

New to CSS? Check out Codecademy.

For complete beginners, I suggest this free website: http://www.codecademy.com/learn // Codecademy is an interactive website and a forum is available for any questions you might have. Check out the HTML & CSS course. It covers how CSS interacts with the HTML in a web page. You don't need to complete every sections, but it's a very good base to understand the possibilities of CSS.

 

How to find the HTML element?

If someone wants to make a cheat sheet for all possible HTML elements users can modify, I'm sure it will be very useful to the community. Until then, navigate to the page you wish to modify. Right click, and Inspect the page. Look for the area titled Styles or Rules. It will display a list of HTML elements used in the page, like shown above. This should be valid for any browser.

 

CSS Properties. It's all on W3Schools.

You can check the CSS properties here: http://www.w3schools.com/css/ // W3Schools has a complete summary of every properties in CSS. There's even an interactive part of the website that allows you to test your code. 

 

Know Your Colors

To use color in CSS, you will need to know the color code, which looks like White: ffffff, black: 000000. Here's a color picker: http://html-color-codes.info/

 

 

Don't forget to share.

Start a new topic with an appropriate title. Post your CSS code and some screenshots of the result! Share your custom UI modifications!

 

[Abobader 2942]

Well done.

[CarlosLima 148]

Great work !!!

[chef 3745]

10 hours ago, oli123 said:

I am interested in learning CSS and looking for further assistance. Previously, I gone through the basic learning of CSS from eduhelphub and delighted to get the information of learning further in the field of CSS.

Watch Kevin Powell on YouTube.

He will explain everything.