How-To Recommendations for HTML/CSS

EthosCE Support
1

Hi Everyone!

For those who don’t know me, I’m Remy Perez, EthosCE’s Web Designer. Thank you so much for letting me attend the User-Led Discussion last week to talk about web design, HTML, and CSS with you all! Some folks were interested in a document or cheat sheet of some HTML/CSS for their websites, as well as a “Basics of HTML/CSS” webinar sometime. If you have particular requests for what you’d like to learn, please share them here and I will be sure to incorporate what I can :slight_smile: Some examples include:

  • Changing Font Colors
  • Changing Font Sizes or Case (all-caps, sentence case, etc)
  • Navigating the Inspect tool on your browser

Don’t be shy—there’s no such thing as a silly question or request! Looking forward to hearing from you all. Thanks in advance!

Remy

1 Like
2

Hi Remy!

I think for me, I would like to learn more about how to hide/edit certain elements on the site such as the course title, course-nav bar, etc. I know there’s already some posts that discuss this but, if possible, I’d like to learn how this works.

I am also interested in the customization of a learning group CSS, an example of how that is done would be helpful.

Sorry if these are too specific…

Thank you,
Andrew

3

Hi Remy,

I wanted to throw in another request if this is still open.

Is there a template for adding Font Awesome icons within the WYSIWYG source code?

Thanks!
Andrew

4

Any and all suggestions are welcome! Thank you :slight_smile:

5

The Inspect tool has been extremely valuable in designing and debugging new CSS elements and safely making global CSS changes.

I’m curious to know if there is a way to override the main web font via the global CSS options.

6

I would also be interested in a Font Awesome cheat sheet.

7

@adodgson I was able to get Font Awesome working using this HTML code:

<i class="fa fa-angle-right"></i>

Replace fa-angle-right above with the code provided from one of the icons in the link below.

1 Like
8

These two items (changing fonts and Font Awesome icons) have similar solutions, I think! I’ll try to look into this and figure out a way to explain it :slight_smile: Basically with Font Awesome, I believe you can import it as a “font” (similar to a WingDings situation) and use characters from it in that way. EthosCE doesn’t support SVGs, so we can’t incorporate them that way, unfortunately.

If anyone is reading, please feel free to add any more questions or suggestions regarding HTML/CSS that you may have!

9

@Remy_Perez I figured out a way to import a different global font altogether using the global CSS options.

  1. Look up our desired font on Google Fonts.
  2. Select the desired font weights.
  3. Ask Google to generate the CSS import code for the font.
  4. Copy the filename in the code and open it in the browser.
  5. Copy all of the CSS code and paste it into the EthosCE global CSS options.
  6. Look up CSS selectors that used the old font using the Inspector tool and set the right font properties for all of those selectors in the global CSS settings.

It took a while to find the relevant CSS selectors, but it worked for me.

10

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.