# Article page components

The styles of article pages of a Tenant can be customized to create a unique look and feel.

Marfeel extracts the content from the HTML of the original site and applies default CSS styles that are common for every Tenant. To edit this information, it uses CSS Mappings, SASS Mixins, and definition.json flags.

Article components

These are the default parts that can be edited:

Top Media
- Top Media Caption
- Remove Top Media
Header
- CSS Mappings
- Category
- Title
- Author
- Date
Body
- Links

Next articles
Next section

Sharing bar

TIP

mrf-detailsContent is the global Marfeel class that wraps the styles of article pages. For instance, if the same selector (e.g. .awesomeDiv) is both in section an article pages, you can target only the element in articles as a child element of this class:

.mrf-detailsContent .awesomeDiv {
    text-align: center;
}

# Top Media

The Top Media is the main image that appears at the beginning of an article page. This is added by default in every Tenant.

# Top Media Caption

article-pages-top-media-caption

It can include the caption of the image by adding that flag in features of the definition.json file:

"topMediaCaptionEnabled": "caption"

and this mixin in the custom.s.scss file:

@include topMediaCaption(
    $captionColor: $secondaryTextColor,
    $fontSize:.72223rem,
    $gradientColor: $mainBackgroundColor
);

The topMediaCaptionEnabled flag accepts these values:

caption: This is the recommended option. It uses the caption extracted by Boilerpipe with CSS mappings.
true: Uses the Ad Dealer to insert the caption.
alt: Selects the alt attribute of the image tag as the caption.
data-anything: Uses the value in the data-anything attribute of the image.

# Remove Top Media

To eliminate the Top Media, you can enable this flag in definition.json, inside features;

"removeTopMedia": true

article-pages-header

Category
Title
Author and date

# CSS Mappings

CSS mappings create mrf-classes from the selected element in the original HTML.

They are defined in the providers.json file as in the following example:

"cssMappings": {
    "date": ".entry-date",
    "dateDetails": ".entry-date",
    "article__category": ".entry-category",
    "author": ".td-post-author-name a",
    "authorDetails": ".td-post-author-name a",
    "caption": ".wp-caption-text"
    "tag-list": ".td-tags"
    "tag-list__item": ".td-tags li"
}

Then in the source you will have the next scoped classes available:

mrf-date
mrf-dateDetails
mrf-article__category
mrf-author
mrf-authorDetails
mrf-caption
mrf-tag-list
mrf-tag-list__item

To learn more about how to use CSS Mappings, you can read the providers.json documentation.

# Category

Some article pages include the category label of the post. To change its styles, you can use this mixin:

@mixin customCategory(
	$margin: null,
	$padding: null,
	$fontSize: null,
	$fontFamily: null,
	$letterSpacing: null,
	$color: $secondary-color,
	$bgColor: null,
	$borderRadius: null
);

# Title

The color and font size of the post title can be edited with the next mixin:

.mrf-title {
    @include articleTitle(
        $color:$mainTextColor,
        $fontSize: 1.6rem
    );
}

# Author

When the author info is shown, you can edit the color of the text, the font size and to choose whether to show the image or not:

Use the CSS mapping class mrf-authorDetails

    @mixin articleDetailAuthor(
        $color: $secondaryTextColor,
        $imageDisplay: none,
        $fontSize: 0.8125rem);

# Date

If a Tenant is showing the date of an article, this is the mixin that is used to customize the way it looks:

Use the CSS mapping class mrf-dateDetails

@mixin articleDetailDate(
    $color: $secondaryTextColor,
    $fontSize: 0.8125rem,
    $fontFamily: null,
    $textTransform: null
);

# Body

# Links

You can edit the default color of links with the next mixin:

@mixin articleDetailLinks($color);

# Summary

There are Tenants that include an introductory paragraph (summary) right after the post title in article pages. To change the styles of this element, use:

.targetSummaryClass {
    @include articleDetailSubText(
        $color: $c-grey--darker,
        $fontSize: 1.125rem
    );
}

# Inline articles (deprecated)

The inline articles component has been removed from Marfeel. Delete any mention of this mixin in a tenant's styles if you find it: it doesn't have any effect anymore.

@mixin customInlineNextArticles (...);

# Tags

You can use the next mixin to modify the styling:

@mixin articleDetailTags(
	$fontSize: null,
	$fontFamily: null,
	$tagsColor: null,
	$tagsBgColor: null,
	$tagsPadding: null,
	$tagsMargin: null
);

TIP

This mixin only works when tags have been extracted with the .mrf-tag-list and the .mrf-tag-list__item classes

# Comments block

You can modify the comments block with:

@mixin articleCommentsLink(
	$color: $secondaryTextColor,
	$text-transform: uppercase,
	$fontFamily: $secondaryFont);

# Caption

Just like the Top Media caption, the images of the body can also include the caption with a camera icon with this mixin:

Use the CSS mapping class mrf-caption

@mixin articleDetailCaption(
	$fontSize: 0.875rem,
	$color: $c-caption
);

# Blockquote

There are two mixins that allow users to change the styles of quotes:

This mixin resets the blockquote (that is, it removes the Twitter icon Marfeel adds by default) and changes the font, color, and padding:

@mixin blockquoteReset (
    $color: $mainTextColor,
    $fontFamily: $secondaryFont,
    $fontSize: 1rem,
    $padding: 0
);

article-pages-blockquotereset

On the other hand, this mixin changes the blockquote text color:

@include blockquoteSetColor($color);

# Tables

You can apply default styles to tables that appears in the article:

@include tableReset($table: '.targetTableClass');

And apply new ones also:

@mixin tableStyles (
    $border: $fillet,
    $padding: 10px,
    $fontsize: 1rem);

Marfeel supports scrollable tables. Add the CSS selector of the table to the CSS Mappings object, with the key scrollableTable to transform it:

"cssMappings": {
	...
    "scrollableTable": "table"
	...
}

# Next articles

article-pages-next-articles

When entering a post from a section page, at the end of the article there is a "Next articles" block that Marfeel adds by default.

To edit the styles of the block of this element, you can use this mixin:

@mixin customSectionPreview (
    $titleFontSize: null,
    $titleFontFamily: null,
    $titleTextTransform:null,
    $titleTextColor: null,
    $separatorColor: null,
    $titleCentered: null,
    $separatorHeight: null,
    $separatorPositionTop: null,
    $padding: null,
    $titleBgColor: null,
    $headerBackground: null,
    $hasBorder: false,
    $marginHeader: null,
    $borderTop: null,
    $borderBottom: null,
    $borderLeft: null,
    $borderRight: null,
    $borderAll: null,
    $borderImage: null
);

If you want to modify the article title you can use:

@mixin customNextArticlesTitle(
    $titleSizeWithImage: 1.125rem,
    $titleSizeWithoutImage: 1.5625rem,
    $lineClamp: 5);

# Next section

When entering a post from a section page, at the end of the article after "Next articles" block there is a "Next section" block that Marfeel adds by default.