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;
}