How to use Article Styles

Theming is one of the more complex functions within Evolve and as such we recommend booking in a webinar for more information. However see below for the main steps in creating article styles and check out our YouTube channel for videos.

You can set up to 10 article styles in a theme. Setting article styles allows you to have more flexibility with the theme of your course. Certain article styles can be used for certain content, providing learners with signposts and creating consistency.

Before you set up individual article styles you should first create your global article style;
This will include settings for;

  • Article
  • Article locking
  • Block
  • Button
  • Attempts Counter
  • Caption
  • Component
  • Component Item
  • Label
  • Link
  • Marking

Once your global style is set, you can start creating your individual article styles.

  1. Navigate to Appearance in the course youā€™re updating the theme in

  2. Under the theme you wish to edit select Edit

  3. Scroll down and select the Article Styles tab

  1. Each of the 10 article styles are available to edit.

  2. Change the article style name by selecting the pencil icon

  3. The first element of the article style to edit is the article itself

  1. Click the Element drop down to select the next element in the article style to edit - N.B. each element is updated in the same way as the global settings

A couple of helpful hints;

In the General tab of Appearance, turn on Show Article Style Labels in Preview so you can easily see which article style youā€™re using in the Live Preview.
When youā€™re editing an article style notice thereā€™s an Apply Element Styles button - use this to copy over styles from certain elements from another article style youā€™ve created.
When you want to update an element double check; is the element you want to change in an article style or in the global settings?

1 Like

Hi there,
Iā€™m trying to style a flowchart component. Specifically, the background colours, and border. The component does not seem to respond to changes iā€™m making to the component item in the theme.
Am i missing something? Any help would save me some heartburn!
Ben

Hello @benwebber In the case of the flipchart component - you do this via Appearance > your theme > List.
This is where the flowchart takes styling from - each item in the flowchart is considered to be a ā€œlist itemā€.

2 Likes

Awesome work @appitierre this has bugged me for months! :man_dancing:

No problem @benwebber, thank you for using Evolve.

Hi all,
Can someone provide guidance on how to alter styles of extension pages? I need to change the way the glossary looks.
Thanks in advance!
Ben

Hello @benwebber.

Navigate to your theme on the course you wish to edit by clicking on the ā€œAppearanceā€ tab.

Click Edit on the theme in question.

Select the Extensions area. In here youā€™ll find some options for altering specific extensions.

You may also want to experiment with the Header and Page areas - these impact extensions as well as normal course pages.

I hope this helps.

2 Likes

I tried all the combination with components color had no luck but here we go it was in the list. Thank you @appitierre, it saved my time :slight_smile:

Hi there - Iā€™ve managed to create an Article Styleā€¦ woo hoo!!!
Question: How can I duplicate it and tweak it for a similar styling I need? Or do I have to start again for Article Styling? (hoping not).

Thanks in advanceā€¦
D

1 Like

Hello!

Go to Appearance > Article Styles and select one of your as yet unused article styles. Name it and save.

In he top right hand corner you should see a button that says Apply Element Styles. Click this and then select the style you want to duplicate and click Apply. That should copy all the settings across.

2 Likes

Question Helenā€¦ do you know if you can add video into tabs interactions?

And thank you for your Article Styles info.

D

Not into tabs no - you can put them in Accordions, Media Carousel or Media Grid but not tabs.

Where do i find the style for the flipcard content? Iā€™d like to make the content left aligned and canā€™t seem to find it anywhere.
Thanks,
S

Hi Steve!

Some components that have ā€œitemsā€ rather than a straight forward one-off piece of content, often have an ā€œAppearanceā€ tab in their settings - and thatā€™s where you will find flipcard colour and alignment for text.

Thanks @hbailey - how do we change the flipcard text padding?
Thank you,
Nina

Hey Nina,

You can adjust the Flip Card text padding by going to Components, Flip Card, and enabling ā€˜Use Component Item Stylesā€™.

Then adjust the Component Item Padding in the Component Items section.

2 Likes

Hi there, Iā€™m curious: Is it possible to add more article styles? At the moment I am able to configure 20 article styles, which is pretty much, but maybe I want to use more than 20 for a course. :upside_down_face:

Best regards
Lars

Hi @LoarsWoars, unfortunately thatā€™s not possible.
Cheers-Sam

Hi @Sam_Cook_Evolve_QA and thanks for the answer. It would be good, if this would be possible sometime. As far as i can tell, the number of articles must have been increased in the past, because the first post of appitierre shows an old screenshot with just ten articles - now i can see twenty of it.

Best regards
Lars

1 Like

How can I edit the checklist buttons color? Without affecting the accordion colors? Article style doesnt have the component item dd.