Advanced Template Customizations with Quick Options and CSS | LearnWorlds Blog

Advanced Template Customizations with Quick Options and CSS

| November 30, 2017 | 6 min read
LearnWorlds News

What are CSS Properties?

So you have finally managed to build your online school! How exciting! At this point, you are about to find out that with LearnWorlds you can create the school of your dreams.

In order to do this, the only thing you should be wary about is paying attention to every single detail regarding your school’s content, but also its looks. Now, wouldn’t it be great if you had the ability to customise your page’s appearance? If you had full creative control over your school?

Υοu may be wondering where you can find this powerful “wand”, but chances are you have already noticed it while editing your school’s appearance. When selecting any element on your page builder, in any of your templates, you can see on the top right some options. The third button, the gear, is the customize appearance button.

change appearance button

Older users might remember it as the ‘CSS Properties’ window but recently it has been totally revamped and renamed to ‘Customize appearance’. With this amazing tool authors can change the fonts of their texts, control line-heights, font-sizes, the transparency of specific elements and much more! 😉

Why Should I Use Them?

The ‘CSS properties’ window is the handiest tool that allows you to change the unchangeable, as it can edit or change visual elements which on other platforms would normally require you to employ (and pay) an outside developer. With LearnWorlds you can just do it by yourself!

Through the “customize appearance window”, you can transform any ordinary object (template, text, course, etc) to an eye-catching treat, to suit your preferences. Not only can you change the fonts of your school’s texts, but you can also implement your text with animation, give a different shape to your templates, and decide about the allowed visibility of your courses or templates. Customize your online school depending on your needs and those of your learners. Τhis is both a matter of improving your school by making it easier to use and at the same time more unique in terms of its its appearance.

First, take a look at the choices you have depending on each template. When clicking the gear button, the “customize properties” window pops up, that presents you with a variety of options.

1Create Animations or Change the Shapes

Some elements, for example, can only be edited regarding their animation and their shape, manually or using some CSS code.

change appearance button2

2Modify the Visibility of Your Templates

In other elements, by clicking the “eye” you can handle their visibility, whether it is a simple template or a course.

assign animation to elements

3Manage the Artistic Appearance of Your Texts

In most text elements you also have the ability to manage the appearance of your texts, by not only their size and font, but also by their lettering space, the line height and the transparency. Just choose the “painting brush” you need, your school is your canvas!

how to format text in LearnWorlds

What can I do with the customize appearance button?

Let’s check out each of the brilliant options available for customizing your pages through this “customize appearance” window!

Formatting Elements and Text

Whenever you choose to add some templates with text to your pages, you have the ability to format each written element to the detail. Apart from deciding whether your text will be bold, in italics, underlined or how the form of the paragraph will be,

1you can change the font,

change the fonts

2the size and the colour of the letters!

change the size and format of colours

3adjust the letter spacing, the line height and the transparency.

Spacing, height and transparency

Captivating Animations

Your element must already look prettier but what about making it more captivating? With the “Assign Animation” button you can make your text, box, title or photo animated when appeared on the page.

Slide it from left to right and vice versa; make it just fade in or fade in from the bottom to the top; scale, give it a pulse, or make it bouncy! These animations are triggered whenever the page is scrolled by the user.

Spacing, height and transparency

Border and Elements in a Box

Do you think the beautifying procedure for your elements is over? There is more you can do even with the box that contains your element.

Visible Only to Logged-in/out

Knowledge is for everyone but sometimes you might need specific elements with a limited group of your students. That is why we decided to give you the ability to select what level of your users will be permitted to see your well-designed material.

Change visibility

So, you can easily decide whether any part of your pages will be visible to all of your learners or only to the logged in or logged out ones.

For your Courses, you have also the additional option to decide whether some of your material will be visible only to the enrolled or to the unenrolled users.

Change visibility 2

Maybe you want to offer some sections of your course only to the enrolled learners and also prepare some free samples to attract unenrolled users. This feature can also be handy in case you want to demonstrate a new offer that will lure only new learners that haven’t purchased any course yet, or you might be interested in guiding your fresh started students, sharing some links or other material only with the enrolled ones. Never before had anyone such control over their teaching practices! 🙂

Inline CSS code

In case you are more familiar with web development, we also give you the opportunity to control your pages using css code. Just go to the “Inline Css code”window and insert the commands you wish in order to adjust the selected element in the most suitable form for your school.

Edit the CSS code of LearnWorlds

Remove formatting

So, you have edited your element, you have changed font, colours, size and you even inserted your css code, but along the way you might have changed your heart too and want to do everything from scratch. Worry not, by going to the last button of your Css Properties” window, you can click on the “Remove Formatting” button and your element will turn to its default state.

how to remove formatting
how to remove formatting

See how much simpler it is to have the control of your pages? “CSS properties” window is just the tool you needed to give your school the most captivating appearance according to your preferences!

Original Template

LearnWorlds Template Example

After Css Properties Editing

LearnWorlds CSS Editing Example

What are you waiting? Give it a go then! 🙂

(Visited 351 times, 2 visits today)
Customer Support Specialist at

Maritina is a Customer Support Specialist for the LearnWorlds Team. She is an Archaeologist, with a Masters in Arts and supplementary degrees in Educational Projects (“Museum Education”, “Educating the Educators”). She is an experienced Communicator with an expertise in Cultural Technological Methods and years of experience in Museums and European Institutions.

Get Started Free