Components
Cards
<div class="radius bordered shadow card"> <div class="card-divider">Styled Card</div> <div class="card-section"> <h4>This is a card.</h4> <p>It has an easy to override visual style, and is appropriately subdued.</p> </div> </div>
This is a card.
It has an easy to override visual style, and is appropriately subdued.
This is a card.
It has an easy to override visual style, and is appropriately subdued.
Div Block Color
<div style="background-color: #dbe9f7; padding: 30px 30px 30px 30px"> INSERT CONTENT HERE </div>
Please encourage your students to log into R'Web Self-Service and explore the 24/7 self-service features. If you or they encounter a problem, please reportit immediately. If students are unsure about how to register for classes using R’Web self-service, please have them follow these step-by-step instructions, or visit our FAQ page. They can also visit the Registrar’s website for detailed information on topics ranging from registering for classes, viewing the schedule of classes, obtaining Authorized User access, ordering transcripts, or preparing for graduation.
Custom Sidebar
<div style="background-color: #fbe1bd; padding: 30px 30px 30px 30px; border-top: 10px solid #1893be;"> <h4><span style="color:#234674;"><strong>APPLYING TO UCR</strong></span></h4> <p><span style="color:#234674;">The application filing period is now closed. Learn more about applying to UC Riverside here.</span></p> </div>
APPLYING TO UCR
The application filing period is now closed. Learn more about applying to UC Riverside here.
DOWNLOAD A FRESHMAN CHECKLIST
Stay on track with a deadline checklist. Download
Quote
<div style="background-color: #f1f3f5; padding: 30px 30px 0px 30px; border-left: 3px solid #cccccc;"> <p>“Good design is all about making other designers feel like idiots because that idea wasn’t theirs.”</p> <p><strong>– Frank Chimero</strong></p> <p> </p> </div>
“Good design is all about making other designers feel like idiots because that idea wasn’t theirs.”
– Frank Chimero
List Arrows
<ul class="list-arrow-alt"> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul>
Callout
<div class="callout small"> <h5>This is a small callout</h5> <p>It has an easy to override visual style, and is appropriately subdued.</p><a href="#">It's dangerous to go alone, take this.</a></div>
This is a small callout
It has an easy to override visual style, and is appropriately subdued.
It's dangerous to go alone, take this.This is a large callout
It has an easy to override visual style, and is appropriately subdued.
It's dangerous to go alone, take this.Image/Text Alignment
<div class="media-object"> <div class="media-object-section"> <div class="thumbnail"><img alt="" src="https://placehold.it/150x150" /></div> </div> <div class="media-object-section"> <h4>Dreams feel real while we're in them.</h4> <p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you. So, once we've made the plant, how do we go out? Hope you have something more elegant in mind than shooting me in the head?</p> </div> </div>
Dreams feel real while we're in them.
I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you. So, once we've made the plant, how do we go out? Hope you have something more elegant in mind than shooting me in the head?
Dreams feel real while we're in them.
I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you. So, once we've made the plant, how do we go out? Hope you have something more elegant in mind than shooting me in the head?
Optional Radio Buttons
When adding a new field, choose List (text) under the TEXT heading. Label the field appropriately. Enter the allowed values separated by a return. Below mark how many options there are. Make sure this number matches how many choice options there are. For example, this form has 4 entered values (Option 1-4)
The allowed number value is "limited" and 4.
Be Well Block
MUST ADD LINK ICON REMOVER FIRST!!
<div class="text-align-center" style="background-color: #FF871E; padding: 25px 25px 25px 25px">
<h2><strong><span style="color:#ffffff;">be well</span></strong></h2>
<h6><a href="http://studentwellness.ucr.edu" style="text-decoration: none !important; color:#FF871E; display: inline-flex;" target="_blank"><span style="color:#ffffff;">STUDENT HEALTH AND<br />
WELLNESS SERVICES</span></a></h6>
</div>
<div class="text-align-center" style="background-color: #1CA6DF; padding: 10px 10px 10px 10px"><a href="https://casemanagement.ucr.edu" style="text-decoration: none !important; color:#1CA6DF; display: inline-flex;" target="_blank"><span style="color:#ffffff;">Case Management</span></a></div>
<div class="text-align-center" style="background-color: #1B75BB; padding: 10px 10px 10px 10px"><a href="http://counseling.ucr.edu/" style="text-decoration: none !important; color:#1B75BB; display: inline-flex;" target="_blank"><span style="color:#ffffff;">Counseling & Psychological Services</span></a></div>
<div class="text-align-center" style="background-color: #1CA6DF; padding: 10px 10px 10px 10px"><a href="http://recreation.ucr.edu/" style="text-decoration: none !important; color:#1CA6DF; display: inline-flex;" target="_blank"><span style="color:#ffffff;">Recreation</span></a></div>
<div class="text-align-center" style="background-color: #1B75BB; padding: 10px 10px 10px 10px"><a href="http://studenthealth.ucr.edu/" style="text-decoration: none !important; color:#1B75BB; display: inline-flex;" target="_blank"><span style="color:#ffffff;">Student Health Services</span></a></div>
<div class="text-align-center" style="background-color: #1CA6DF; padding: 10px 10px 10px 10px"><a href="http://sdrc.ucr.edu" style="text-decoration: none !important; color:#1CA6DF; display: inline-flex;" target="_blank"><span style="color:#ffffff;">Student Disability Resource Center</span></a></div>
<div class="text-align-center" style="background-color: #1B75BB; padding: 10px 10px 10px 10px"><a href="http://well.ucr.edu/" style="text-decoration: none !important; color:#1B75BB; display: inline-flex;" target="_blank"><span style="color:#ffffff;">The Well</span></a></div>
Custom Social Media Block
and Rollovers
<section class="footer-item"> <p class="social-title">FOLLOW US:</p> <div class="social-link" style="display: inline-flex; margin-left:0px;"><a href="https://www.facebook.com/UCRiversideCareerCenter/" style="text-decoration: none !important; color: rgba(0, 0, 0, 0.0); display: inline-flex;" target="_blank"><span class="mdi mdi-facebook-box" onmouseout="this.style.color='#7A8FAB'" onmouseover="this.style.color='#9fbbdf'" onmouseup="this.style.color='#7A8FAB'" style="color:#7A8FAB; font-size: 3em;"> </span></a> <a href="http://www.linkedin.com/groups?gid=88920&trk" style="text-decoration: none !important; color: rgba(0, 0, 0, 0.0); display: inline-flex;" target="_blank"><span class="mdi mdi-linkedin-box" onmouseout="this.style.color='#7A8FAB'" onmouseover="this.style.color='#9fbbdf'" onmouseup="this.style.color='#7A8FAB'" style="color:#7A8FAB; font-size: 3em;"> </span></a> <a href="http://twitter.com/ucrcareercenter" style="text-decoration: none !important; color: rgba(0, 0, 0, 0.0); display: inline-flex;" target="_blank"><span class="mdi mdi-twitter-box" onmouseout="this.style.color='#7A8FAB'" onmouseover="this.style.color='#9fbbdf'" onmouseup="this.style.color='#7A8FAB'" style="color:#7A8FAB; font-size: 3em;"> </span></a> <a href="http://www.youtube.com/user/UCRCareerCenter" style="text-decoration: none !important; color: rgba(0, 0, 0, 0.0); display: inline-flex;" target="_blank"><span class="mdi mdi-youtube-play" onmouseout="this.style.color='#7A8FAB'" onmouseover="this.style.color='#9fbbdf'" onmouseup="this.style.color='#7A8FAB'" style="color:#7A8FAB; font-size: 3em;"> </span></a> <a href="http://www.pinterest.com/ucrcareercenter/" style="text-decoration: none !important; color: rgba(0, 0, 0, 0.0); display: inline-flex;" target="_blank"><span class="mdi mdi-pinterest-box" onmouseout="this.style.color='#7A8FAB'" onmouseover="this.style.color='#9fbbdf'" onmouseup="this.style.color='#7A8FAB'" style="color:#7A8FAB; font-size: 3em;"> </span></a> <a href="http://instagram.com/ucrcareercenter/" style="text-decoration: none !important; color: rgba(0, 0, 0, 0.0); display: inline-flex;" target="_blank"><span class="mdi mdi-instagram" onmouseout="this.style.color='#7A8FAB'" onmouseover="this.style.color='#9fbbdf'" onmouseup="this.style.color='#7A8FAB'" style="color:#7A8FAB; font-size: 3em;"> </span></a> <a href="https://www.snapchat.com/add/UCRCareerCenter" style="text-decoration: none !important; color: rgba(0, 0, 0, 0.0); display: inline-flex;" target="_blank"><span class="mdi mdi-snapchat" onmouseout="this.style.color='#7A8FAB'" onmouseover="this.style.color='#9fbbdf'" onmouseup="this.style.color='#7A8FAB'" style="color:#7A8FAB; font-size: 3em;"> </span></a></div> </section>
Outside Link Icon Remover (CSS)
a[href*="//"]:not(:has([data-entity-embed-display=media_image])):after {
display: none;
}
Applying this CSS to a page will remove the outside link icon that appears after a link.
Back to Top Button
CSS:
<style type="text/css">@media only screen and (max-width: 894px) {
#btn-btt div.button-item.btn-ucr div a {
background-color: rgba(255,255,255,0.0);
color: #0979d0;
position: fixed;
bottom: 0em;
z-index: 1000;
border-radius: 4px;
float: right;
right: 0%;
font-size: 72px;
padding: 10px;
}
#btn-btt div.button-item.btn-ucr div a:hover {
color: #0d8cee;
}
}
@media only screen and (min-width: 895px) {
#btn-btt div.button-item.btn-ucr div a {
display: none;
}
}
</style>
HTML: <div id="btn-btt"> <div class="grid-container full"> <div class="button-bar btn-justified-100"> <div class="grid-x grid-padding-x grid-padding-y small-up-1 medium-up-1 text-center align-center" data-e="4pa7jx-e" data-equalize-by-row="true" data-equalize-on="medium" data-equalizer="" data-events="resize" data-mutate="xydiwa-eq" data-resize="cfqgjv-eq"> <div class="paragraph paragraph--type--button-bar paragraph--view-mode--default cell align-center-middle"> <div class="button-item btn-ucr thingtohide" data-equalizer-watch="" style="height: auto;"> <div><a href="#top" target="_self"> <span class="mdi mdi-arrow-up-bold-circle"> </span></a></div> </div> </div> </div> </div> </div> </div>
Place this CSS anywhere on the page inside a custom block. This CSS is set up with a media query. So the button shows up on screen widths less than 894 pixels. However, if you want, you can remove the media query portion out.
Also place the button (HTML) anywhere on a page. The CSS tells the button's position to be fixed. So it doesn't matter where you place it. It also doesn't matter if you place it in a full-width region or centered width. You may also change the MDI icon to be what ever you want it to be.