This is a page for CSS and script resources – mostly to copy and paste.

Paul Smith's CSS Styles

Blurb Module

blurb--text-on-image

Blog Module

blog--green – Adds color bar to top of image and colors post title.

blog--navy-blue – Adds color bar to top of image and colors post title.

blog--orange – Adds color bar to top of image and colors post title.

Image Module

image--green

image--navy-blue

image--orange

Email Optin Module

optin--horizontal

Text Module

text--excerpt

text--green

text--navy-blue

text--orange

Section Module

section--dark-background – Darkens background image and makes foreground text white.

section--light-background – Lightens background image and makes foreground text black.

section--full-width-header-primary

Row Module

row--flush-top – Primarily used to make a logo inside a row to be even with the top of another column.

Call To Action Module

cta--button-green – CTA with dark green button styling

Button Module

button--green – Dark green styling for button

Fullwidth Menu Module

menu--force-desktop-view – Forces menu to stay in desktop view on mobile devices.

CSS: Target a page

For page-specific CSS; example:

#post-972 a { text-decoration: underline; }

972 can be identified by mousing over a page and inspecting the URL

a here is text; can also us .et_pb_button, etc.

{ } houses the CSS code 

CSS: Hyperlink colors

/* unvisited link */
a:link {
color: #0000EE;
}

/* visited link */
a:visited {
color: #0000EE;
}

/* mouse over link */
a:hover {
color: #6BA539;
}

/* button styling green*/
.et_pb_button_0 {
border: 0px!important;
background-color: #2b8716!important;
color: #FFF!important;
}

/* hyperlink color in menu override */
.et_slide_menu_top, .et_slide_menu_top a, .et_slide_menu_top input {
color: rgba(255, 255, 255, 0.6)!important;
}

CSS: Button (solid green)

/* button styling green*/
.et_pb_button_0 {
border: 0px!important;
background-color: #2b8716!important;
color: #FFF!important;
}

CSS: Toggle & Accordion

/* ACADEMIC TOGGLES */
.et_pb_toggle {
border-width: 0px !important;
}
.et_pb_toggle_cl {
background-color: #F4F4F4 !important;
padding: 20px!important;
}
.et_pb_toggle_title:before {
color: #6ba539!important;
}

Sidebar Redesign April 2020

/* andy’s widget tweaks */
.et_pb_widget_area .menu .menu-item {background-color: #6BA539; border-radius: 15px;}
.et_pb_widget_area .menu .menu-item a {text-align: center!important; color: #ffffff;}
.et_pb_widget_area .menu .menu-item:hover {background-color: #658D1B}
.et_pb_widget_area .menu .menu-item:hover a {font-weight: 600; text-align: center!important;}
.et_pb_widget_area .menu .menu-item a {
-webkit-transition: all .3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}
.et_pb_widget_area .menu .menu-item {
padding: 10px 20px 10px 20px;
-webkit-transition: all .3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

CSS: Vertical alignment

psc-vertical-align required in each column’s CSS Class and equalize column height in advanced row settings

.psc-vertical-align {
display: flex;
flex-direction: column;
justify-content: center;
}

Script: Unibuddy

Place in fullwidth code module

<script>
window.unibuddySettings = {
uni_id: ‘paul-smith-s-college’,
colour: ‘114734’,
domain: ‘https://popcard.unibuddy.co/’,
title: ‘Unibuddy Popcard’,
align: ‘right’,
};
</script>
<script src=”https://cdn.unibuddy.co/unibuddy-popcard.js” type=”text/javascript”></script>

CSS: Mouse-over image description/link

Code module CSS style:

psc_overlay_text

Code module content:

<div class=”custom_overlay”>
<img src=”imageurl.jpg” alt=”Image” class=”image”>
<a href=”http://hyperlink” target=”_blank” rel=”noopener noreferrer”>
<div class=”overlay”>
<div class=”text”>Overlay text</div>
</div>
</a>
</div>

Theme level CSS:

/* overlay */
.psc_overlay_text .custom_overlay {
position: relative;}
.psc_overlay_text .image {
display: block;
width: 100%;
height: auto;}
.psc_overlay_text .overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.29);
overflow: hidden;}
.psc_overlay_text .custom_overlay:hover .overlay {
opacity: 1;}
.psc_overlay_text .text {
color: #fff;
font-size: 18px;
line-height: 20px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: 100%;}

H1-H6 Open Sans (Light)

.et_pb_text p {font-family: “Open Sans”, Source Sans Pro, sans-serif!important;
font-size: 14px!important;
color: #333333!important;
}

.et_pb_text h1 {font-family: “Open Sans”, Source Sans Pro, sans-serif!important;
font-size: 34px!important;
color: #154734!important;
font-weight: 100!important;
}

.et_pb_text h2 {font-family: “Open Sans”, Source Sans Pro, sans-serif!important;
font-size: 30px!important;
color: #154734!important;
font-weight: 100!important;
}

.et_pb_text h3 {font-family: “Open Sans”, Source Sans Pro, sans-serif!important;
font-size: 26px!important;
color: #154734!important;
font-weight: 100!important;
}

.et_pb_text h4 {font-family: “Open Sans”, Source Sans Pro, sans-serif!important;
font-size: 22px!important;
color: #154734!important;
font-weight: 100!important;
}

.et_pb_text h5 {font-family: “Open Sans”, Source Sans Pro, sans-serif!important;
font-size: 18px!important;
color: #154734!important;
font-weight: 100!important;
}

.et_pb_text h6 {font-family: “Open Sans”, Source Sans Pro, sans-serif!important;
font-size: 14px!important;
color: #154734!important;
font-weight: 100!important;
}