Customizing Your Rise Up Platform with CSS

Prerequisites
Administrative access to the Rise Up platform.
Basic knowledge of CSS.
Familiarity with HTML (optional but helpful).
It is recommended that a developer or someone with technical expertise handles CSS modifications.

What is CSS?

CSS stands for Cascading Style Sheets and it is used to control the layout and appearance of web pages. CSS allows you to apply styles to HTML elements (such as text, images, and containers) across multiple pages from a single style sheet, greatly simplifying maintenance and updates.

Customizing the appearance of your Rise Up platform via CSS (Cascading Style Sheets) allows for a tailored user experience that aligns with the branding and design preferences suited to your organization.

Key Benefits

Optimal Brand Image Compliance: CSS allows you to customize the platform to match your organization's branding guidelines, such as colors, fonts, and layout styles, ensuring a consistent brand experience across all user interfaces.
Enhanced User Experience: With CSS, you can improve your platform's design and usability, making it more attractive and easier to navigate for users. This includes customizing layouts, spacing, and interactive elements such as buttons and forms.
Increased Flexibility: CSS style sheets allow for specific modifications and updates without altering the underlying HTML structure. This means you can adjust visual elements as needed without affecting functionality.
Performance Optimization: Skilled use of CSS style sheets can speed up loading times and improve performance. By minimizing the use of inline styles and reducing the complexity of style rules, you can enhance your platform's speed and responsiveness.

Access CSS Settings

Go to your settings menu by clicking on the gear icon then select the 'CSS' menu at the bottom of your left menu in the 'Developer' menu.

How Does CSS Work?

Linking CSS to HTML

CSS can be applied to HTML via inline styles, internal style sheets, or external style sheets. The most common method is to link an external .css file using the '<link>' tag in the '<head>' section of the HTML document.

Selectors and Properties

By selecting elements based on their name, class, id, or status and applying styles using properties and values. For example, to change the text color of all elements to blue, you would write:


      p {
      color: blue;
      }

Cascade Order

The 'cascading' part of CSS means that styles are applied top-down in the style sheets and according to specificity order. Styles declared last or with more specific selectors will override previous, less specific ones.

Basic CSS Properties

Text Styles: 'color', 'font-family', 'font-size', 'text-align'
Box Model: 'margin', 'border', 'padding', 'width', 'height'
Positioning and Display: 'position', 'display', 'flexbox', 'grid'

Create a Simple Style Sheet

Create a file named 'style.css', add the following CSS to style a simple HTML page:


      body {

        font-family: Arial, sans-serif;

        line-height: 1.6;

        padding: 20px;

      }

      h1 {

        color: navy;

      }

      p {

        color: gray;

      }

Link This CSS File to Your HTML Using:


   link rel="stylesheet" href="style.css"

Edit CSS

In the CSS editing area, you'll find an input box where you can enter or modify existing CSS. Common modifications include:

Changing the size and color of the logo.
Adjusting the opacity of the login panel.
Hiding certain elements like acceptance of terms and conditions.

Test the Modifications

After updating your modifications, ensure these changes are reflected on the live platform by refreshing your browser or clearing the cache if necessary. Regular testing, ideally monthly, is recommended to maintain performance standards. Additionally, note that you can fully submit custom CSS requests to our team by contacting your CSM.

Problem: Styles are not applying.
Solution: Ensure the style sheet is correctly linked in the HTML. Check for typos in the file name or path.

Problem: Unexpected styling results.
Solution: Check for conflicting styles. More specific selectors or styles defined later in the CSS file can override your intended styles.

Problem: Changes are not reflecting on the platform.
Solution: Clear your browser cache and ensure the CSS code is correctly entered without syntax errors.

Problem: Platform performance issues after CSS changes.
Solution: Review CSS changes for any heavy elements that might affect load times and optimize accordingly.
What is the best way to learn CSS?
- Practice is key. Start by experimenting with different property changes and observe how they affect layout. Use resources like W3Schools or Mozilla Developer Network for guidance.

Can CSS be used for animations?
- Yes, CSS can create basic animations using `transition` and `animation` properties.

Can I revert to original CSS settings?
- Yes, you can revert by removing custom CSS entries and saving the default settings.

How often should I update CSS?
- Update as needed, but regular checks each month are advised to ensure compatibility with platform updates.
[CSS Basics]
[Rise Up Support Request]

Knowledge base Rise Up