Home → Platform Knowledge Base → News and Announcements → This Week Styles and Sections

1.2. This Week Styles and Sections

On Platform based Websites, This Week pages and its respective Newsletters, will include different SECTIONS and STYLES to allow more customization in news presentation, while also keeping the page scroll shorter and more straightforward. This is defined by the parameter news_v2.

News Index

Insert the class <div class="index_thisweek"> in the news page in order to enable Index with the announcements titles at the top of the newsletter. Currently, the space is being divided by fx_2 with a Sponsor Banner, and with an Aside menu. In the future, this should replace the “aside” in This Week page entirely.

<div class="flexC">

<div class="fx_2">

<div class="index_thisweek">

<h2> BULLETIN TITLE/DATE </h2>

##news_index(thisweek_E)##

</div>

</div>

<div class="fx_2">

##SPONSOR BANNER##

</div>

</div>

Banner Size

For the pictures size, the new default is 560 x 260 px – Both in This Week page and for Rotators. No need to create thumbnails in a different format.

Section Place of importance in the newsletter

Section A is more important than B and C. B is more important than C.

Section A = Large width space, for very important announcements

B = Medium/Little width space, for lots of events

C = Text hidden / Title only

The Sections work independently from each other, so we can’t move something from inside B out to A or C. We can only arrange/sort articles inside their respective sections.

If an article needs to be in another section, first it’s necessary to edit the article and choose the new section for it.

Style Visual style (CSS) for Title, Text, Color, Background, Image position relative to text, etc.

We will create many different styles for the news to show depending on each website colors and design. Each style also vary depending on the section. This way, we can have many combinations. For example: Section A + Styles 1, 2, 3... Section B + Styles 1, 2, 3... Section C + Styles 1, 2, 3...

(Currently, only a few combinations work)

Section A + Style 1 = Picture above the text, news alone in center, gray background (most important news)

Section A + Style 2 = Picture in left side of text, news alone (all width).

Section A + Default = Picture above text, 1/2 width (medium size). If you have 2 news A+C, they will show as 2 columns.

 

 

Section B + Style 3 = Picture above the text, 1/3 width (small size). If you have 2 or 3 news B+C, they will show as 2 or 3 columns.

Section C puts the text as hidden. So all the Styles doesn't matter, all look the same