Website Documentation:

Academic Skills Center

The ASC homepage uses a standard 2020 academicguides header. The template is the standard Academic Skills Center Landing Page template. The column layout is custom two column: 55%, 42%

The homepage content includes:

• hero image
• site tagline
• all academicguides search box
• 6 icon-type buttons
• ad
• social media icons

Hero

The hero is set as the body background at the page level.

Image: https://libapps.s3.amazonaws.com/accounts/4312/images/homepage-background.jpg

Image size: 2000x500px

Widget: "CODE: ASC Homepage" widget in tagline box (21762932).

Tagline

The tagline is in the tagline box (21762932).

Text: Academic Skills You Need to Succeed

Font: 36px bold

Font color: white, set in the rich text box

All academicguides search box

The search box is a widget placed after the tagline text in the tagline box (21762932). The widget is centered on the hero image, under the site tag line.

Div: #homepage-search

Widget: "CODE: ASC System Search Box"

CSS: asc-website-new-css

Buttons

There are 6 buttons. The button margin, width, and font-size are adjusted from the 2020 standard to accommodate the size of the ad and the long button titles. The buttons are in one box (21763015) in two richt text content items.

Button-type: icon-button

Image: background images, id's located in ASC style sheet

CSS: 2020-system-css.css, asc-website-new-css

Ad

The ad image is to the right of the buttons. The image is in a rich text box (21762992). The image border-radius, border, shadow,  focus, and hover are styled in the ASC style sheet. The image link is a campaign URL.

Image: https://libapps.s3.amazonaws.com/accounts/4312/images/homepage-background.jpg

Image size: 2000x500px

CSS: asc-website-new-css

Social Media Icons

The social media icons recur on every page in the website. They are built into the site templates. The icons live in the Embedded Content ASC guide. The icon style is in the ASC style sheet.

CSS: asc-website-new-css

Content Location: Embedded Content ASC: Social Media Icons

Blog Buttons

The blog button is used to link to WordPress blog posts.  The button includes an image, the blog title, and a Wordpress icon. The buttons are in widgets. The widget contains the button code and the background image style, making them easy to update without touching the site css.

Widget Naming Convention: the same as the box title it is in

Button Class: blog-button

Image: background images, id's located in ASC style sheet

Image Size: 250x150

WordPress icon: in the button text

CSS: asc-website-new-css

Button Code Example:

<a class="blog-button" href="https://waldenacademicskills.wordpress.com/2019/06/25/becoming-tech-savvy-at-walden/" id="MentorBlog1">Becoming Tech Savvy at Walden<br><img alt="WordPress" src="https://libapps.s3.amazonaws.com/customers/1460/images/icon-wordpress.png" /></a>

Widget Code Example:

<p style="text-align: center;"><a class="blog-button" href="https://waldenacademicskills.wordpress.com/2017/11/17/doctorallifeholidays/" id="MentorBlog2">Balancing Doctoral Life <br>During the Holidays<br><img alt="WordPress" src="https://libapps.s3.amazonaws.com/customers/1460/images/icon-wordpress.png" /></a></p>

<style>a#MentorBlog2 {
 background-image: url("https://libapps.s3.amazonaws.com/accounts/31417/images/MentorBlog2.jpg");
}
</style>

 

Module Buttons

The interactive modules use custom buttons. The buttons include a background image, the module title, and the interactive icon.

Button Class: module-button

Image: background images, id's located in ASC style sheet

Image Size: 150x125

Interactive Icon: in button text, interactive graphic image

CSS: asc-website-new-css

Button Code Example:

<a class="module-button" href="http://mym.cdn.laureate-media.com/2dett4d/Walden/SKIL/1234/M1/module1/index.html" id="reading-understand">Reading to Understand<br>Self-Paced Module<br><img alt="Interactive Module" src="https://libapps.s3.amazonaws.com/customers/1460/images/interactive-icon-small.png"/></a>

 

Square Bio Button

The Doctoral Peer Mentors use the a button that links to the mentor's biography page. The buttons include a picture, the mentor's name, and their degree program. The buttons are widgets.

Widget Naming Convention: <mentor first name, last name-DPM Bio Button" e.g., Ashley Beverly-DPM Bio Button

Button Class: square-bio-button

Image: in the link text

Image Size: 150x175

CSS: asc-website-new-css

Button Code Example:

<a class="square-bio-button" href="https://academicguides.waldenu.edu/academic-skills-center/about-us/doctoral-peer-mentors-bios/ashley-beverly"> <img src="https://libapps.s3.amazonaws.com/accounts/4312/images/ashley-beverly-panel-body.jpg" alt=""><h3>Ashley Beverly, MSW</h3><hr>Social Work with a focus in Clinical Social Work </a>

The SKIL Courses and Workshops are organized by course topic:

• Doctoral Workshops
• General Courses
• Social Change Courses
• Writing Courses

Each course topic has a guide consisting of a landing page with links to each course, the course description  page, and the course faculty. The guides include previous/next buttons. The landing pages use a 3-column layout--17%, 67%, 17%. The course pages use a different 3-column layout--58%, 33%, 8%

The SKIL Course and Workshop pages include an embedded Quick Answer, a register button, and testimonials.

The page title is in the floating box that contains the QA widget. It is an H1 Header.

The testimonial boxes are styled in the ASC style sheet.

Page Title: Course Code + Course Name e.g.,SKIL 8100/8105: Preproposal Doctoral Writing Workshop

There is a <br> between the course code and course name.

Widget: Quick Answer widget

Widget Naming Convention: QA:<Course Title>

Widget Code Example:

<script src="https://api2.libanswers.com/1.0/widgets/8394"></script>
<div id="s-la-widget-8394"></div>

CSS: asc-website-new-css

Soundcloud podcasts are iframes embedded in the page using widgets. The podcast box spans the full width of the page and has a background image. The background image is on the box wrapper, styled in the ASC style guide. The podcast player is styled in the ASC style guide.

Background image: https://libapps.s3.amazonaws.com/accounts/4312/images/podcast-background.jpg

Image Size: 1920x468

CSS: asc-website-new-css

Code Example:

<iframe width="75%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493473387&color=%230085a3&auto_play=false&hide_related=false&show_comments=false&show_user=true&show_reposts=false&show_teaser=true"></iframe>