Skip to main content
Solved

CSS for customizing the white container in a container

  • September 10, 2024
  • 5 replies
  • 97 views
ajmacadangdang

Hello! We found a great example of designing learning experiences in TI. Have any of you used CSS codes or HTML to customize the color of the white container within a course. 

Here is an example.

 

Here is an example that still has the white container. We would like to make the entire page have the same color as the above. Thanks for your inputs in advance!

 

Best answer by charles.zimmerman

@ajmacadangdang Try this for this result.  Edit hex as needed.  Hope this helps.  I put mine in the specific course CSS but you can add this global also.

.topic__content--full-width {
  background-color: #FFD700; /* Random yellow hex: Golden Yellow */
}
.layout-panel {
  background-color: #FFD700; /* Golden Yellow */
}

 

April
M
Second Iteration of Charles

5 replies

charles.zimmerman
Forum|alt.badge.img+3

@ajmacadangdang Try this for this result.  Edit hex as needed.  Hope this helps.  I put mine in the specific course CSS but you can add this global also.

.topic__content--full-width {
  background-color: #FFD700; /* Random yellow hex: Golden Yellow */
}
.layout-panel {
  background-color: #FFD700; /* Golden Yellow */
}

 

Lifelong Learner
ajmacadangdang
ajmacadangdang

It worked!! Thanks so much. I am just testing so this color needS to be updated for accessibility reasons. 😀 @charles.zimmerman  Do you have any tips in learning CSS or any self-paced course you can recommend? 

I updated the code to this. Is this the correct way to write it?

.topic__content--full-width {
  background-color: #f5ebd7; /* Updated color */
}

.layout-panel {
  background-color: #f5ebd7; /* Updated color */
}
 

 

April
charles.zimmerman
charles.zimmerman
Forum|alt.badge.img+3

@ajmacadangdang I don’t always have an interest in learning code as a course or video.  I just jump into ChatGPT 4.0 and asked it a few questions to get started.  What must I know about CSS to begin? and then that answer led to deeper questions.  Next, I started playing with the most critical component.  INSPECT.  On any browser and on every page on the web, you can mouse over the page and right click.  At the bottom of the menu is an option to inspect.  From here, you use your mouse pointer to highlight an area of the page and when you hit the mark, select to copy that element and ask ChatGPT to hide it or change it’s color or font and so on.  You can take from here.  Hope this helps get you started.

 

Lifelong Learner
ajmacadangdang
Vandana
charles.zimmerman
Forum|alt.badge.img+3

@ajmacadangdang  also yes, your code looks great, but a good idea is to become familar with proper syntax and paste that code above into ChatGPT or CoPilot and ask, does this css appear correct?

Lifelong Learner
ajmacadangdang

Thank YOU so much for sharing your tips and tricks. I was actually using ChatGPT, Gemini and Perplexity then INSPECTED the page but got lost because I do not know where to look and what info I needed. It churned a bunch of codes but it was not working. I gave up and posted my question in the community. 😀 This is so helpful and useful!  I am taking notes of your process and sharing this with my team! Have a great day! @charles.zimmerman 

April
charles.zimmerman
Terms & ConditionsCookie settingsAccessibility statement