Use this guide if you want to change information on your profile by yourself. Alternatively, skip this guide and just ask David or Shelly to make changes on your behalf. Note to faculty: you can only edit the upper part of your profile page by yourself (due to a severe limitation of Web Express).
Regardless of your approach, David and Shelly can offer assistance to help make your profile what you want it to be, while fitting into the overall INSTAAR context.
Do not edit your profile on a shared computer
Logging out is is not reliable on UCB's Web Express system. After clicking the "Log Out" button, it can take hours before you are actually logged out. This delay is a serious security issue on a shared computer.
Step 1. Request & accept your invitation
Step 2. Log in
Step 3. Edit
Once you've logged in and clicked the "Edit" button on your profile page as outlined above, you'll see an editing screen with a number of form fields spread across three tabs: Personal, Contact, and Other. Open the tabs below to see instructions and tips:
Personal
Example screenshot
The orange labels show the fields you can edit via the Personal tab.
See live page for Nova D. Doggo
Instructions
Enter at least your name, INSTAAR people category, and title.
Title (and specialties)
Overview
- We’re using this field for both your titles and research specialties.
- Keep it all as short as possible, since otherwise the list view of people gets really awkward and long.
- You’ll need one item (entry box) for each title or specialty.
- You'll need to add several html tags to increase legibility.
Example
Here is an example with two titles and three specialities, totalling six entries:
Titles
- Stick with one to three titles; the fewer the better.
- Make them consistent with other people’s titles (i.e., use Professor, Associate Professor, PhD Student, MS Student) rather than inventing variants (like Geography Professor).
- To ensure the titles can be easily seen, bold each with a bracketing html strong tag. For example:
- Separate the titles and specialities sections by entering a single html line break tag, like this:
Research specialties
- Specialities in total should be < 70 characters including spaces and bullets. Keep ‘em concise, please. We will edit your specialities if you get carried away.
- Enter each term on a separate line.
- Capitalize the first letter of each item; the rest of the phrase is lowercase. (Example: Stream ecology)
Photo
Would you like to switch out your picture on your profile? Great! It’s a nice way for other INSTAARs, students, and colleagues to recognize you. That said, there are lots of reasons why people don’t want a photo on their profile. Just let Shelly or David know and we can remove your photo from your profile and replace it in lists with an icon.
Here’s what your profile picture should be:
Headshot
A picture of you that shows mostly just your head and is cropped near your collarbone or upper chest. Even if you are in a beautiful or meaningful outdoor setting, please crop to just your head and upper chest. The goal is to be able to see you well enough in that little picture that your fellow INSTAARs can recognize you in real life. Keep in mind that your picture will be even smaller when on a group listing page like Faculty Fellows or Students, especially on phone screens.
Good resolution
Try to find a decent resolution image with face+neck spanning at least 700 x 700 pixels. But if necessary, use a lower resolution like 400 x 400 pixels.
Face & eyes visible
The best photos show your face pretty straight-on and without dark sunglasses.
Adjusting color
Please take a few seconds to make sure the color of your face is good. Try auto levels to see if it makes an improvement. If using MacOS Preview, choose Tools > Adjust Color > Auto Levels button. If your face remains too dark, too red, etc., make a small adjustment.
Centering
You can be centered or a little off-center when you crop to a circle (next step), whichever looks better.
Cropping
Crop to a circle (1:1) before uploading. Use any app that works for you.
Cropping with Preview (MacOS only)
- Double click the image to open it in Preview.
- Then choose View > Show Markup Toolbar or click the pencil icon in the upper right as shown here:
- The Markup Toolbar is now visible. Note its boxy Selection tool icon in the upper left. It defaults to a square selection, so click on the adjacent dropdown arrow and choose Elliptical Selection as shown here:
- Then hold down shift before you click and drag your circle. Holding shift constrains the elliptical selection to an exact 1:1 circle.
- Once you like your circle, click the Crop button, choose Tools > Crop, or type ⌘K (ie command k). Then Save. Save in .png format.
- Double check that your cropped image has the same number of pixels for width and height. Check your results by opening Tools > Show Inspector (⌘I) and looking at the pixel dimensions. Otherwise the non-circle may get truncated when showing multiple people on a people listing page.
Filename
Try to rename your image with your name, ideally in the format lastname_firstname. This isn’t critical, but it improves internet search results for images.
Uploading
Okay! You’ve got your new picture all ready. Now upload it:
- Under the Photo section at the bottom of the Personal tab, click the Remove button to get rid of what’s there now.
- Click the Browse button to select the file on your computer. But don’t click the Upload button yet!
- First, enter “Picture of Yourfirstname Yourlastname” in the Alternative Text box. (This lets people using screen readers understand what this picture is–plus the form won’t upload your picture without the alt text.)
- Now hit the Upload button.
You’ve just done the hardest thing to do on your profile. Good job.
Contact
Example screenshot
The orange labels show the fields you can edit via the Contact tab.
See live page for Nova D. Doggo
Instructions
Enter whatever information you have. Most folks have an email but fewer show their phone number.
You are doing great! Save your changes so far by clicking the green Save button at the bottom of the page. Check what you changed to make sure it looks right. Click on Edit again if you want to make more changes.
Other (not faculty)
Example screenshot
The orange labels show buttons you can edit via the Other tab. You can also add a bunch of content below those buttons.
See live page for Nova D. Doggo
Instructions (if you're not faculty)
If you're not faculty, enter any additional content you want as outlined below. You will enter nearly all content in the single Body field of the Other tab. Postdocs and students should at least enter a summary and their advisor's name. All other content is optional.
Edit Summary field
If you are a postdoc or student, entering a summary is required. For everyone else, the summary is optional.
Your summary does not appear on your webpage. Instead, it is used as metadata for search engines like Google, increasing the chance that people will find you. Search engines may also show your summary on their search results pages. We suggest using a one-sentence summary that encapsulates your research interests, teaching, etc. Rather than start from scratch, you might want to recast existing text from your bio or elsewhere.
The summary for postdocs and students will automatically appear next to their photo on their advisor's webpage. The layout of the advisor's page can get messy if the postdoc/student does not enter their summary; bthe first 75 words of the Body field are used instead.
Finding the entry field for the Summary is a little tricky in Web Express. Look for the "Edit summary" link right next to the Body field label:
Click on the link and a new entry field will appear. Add your summary sentence there.
Call-to-action blue button
- If you have a personal or primary lab/group page that you should be linked to, add a blue button for it.
- The button is optional, but it’s pretty common for faculty, students, and research staff.
- Each person is limited to one button (to prevent visual clutter).
To start from scratch, click the Button generator shortcode icon 
and fill out the button fields, choosing blue, small, and regular style
Or just copy, paste, and edit the following example shortcode
[button url="https://csdms.colorado.edu" color="blue" size="small" style="regular"]Community Surface Dynamics Modeling System[/button]
- Note that you can click the “More information about text formats” link on the right hand side below the body field to see the shortcode code for a button and many other shortcodes.
- If the button text isn’t too long, add an action verb at the beginning, like “Visit the Stable Isotope Lab”
If you want to include an icon in your button, click the shortcode icon and choose an icon. See this link for Icon choices (visible when logged in).
Advisor's name white button (for students & postdocs)
If you’re a student or postdoc, manually add your advisor’s name.
- Enter their name directly below the optional blue button (no blank line in between, use shift+return).
- Use a combination of text and white button:
- Advisor: [white button with advisor’s Firstname Lastname]
- Click the Button generator shortcode icon & fill out the button fields, choosing white, small, and regular style.
- Or just copy, paste, and edit the following example shortcode, which includes text and button:
Advisor: [button url="node/67" color="white" size="small" style="regular"]Holly Barnard[/button] - Multiple advisors are fine, just add more white buttons.
- If your advisor is not within INSTAAR, just use text, like:
- Advisor: Peter Molnar (GEOL)
Adding more content, like Bio, Research, Teaching, and Outreach
Ready to make some more edits? The Other tab → Body field below the optional blue button is the container that holds the rest of your information.
If you only have a little content, like a sentence or a single paragraph, then place it in the body field directly below the optional blue button. No need for any headings. You’re all set! Save and enjoy your completed profile.
Got more to add? Arrange your info into the structure below, and add headings to separate the sections. Headings are the little headlines that label each section of your bio. They help readers “chunk” your content into pieces they can read more easily.
Every section is optional, so just fill in what makes sense for you and skip the rest.
Okay, HEADINGS. We’re gonna get persnickety here because headings matter on the web. Using headings in precise order means that all our profiles look like they belong together. And it means that folks using screen readers or other assistive technologies can read your page without friction. So using headings correctly means you’ve helped make the internet more inclusive!
When you paste or type in your heading, format it using the toolbar at the top of the Body field. Look for a pulldown menu that says “Format.” Click on that to see Heading 2, Heading 3, and other choices. Select your headline by clicking on any of its text, then use that pulldown menu to choose Heading 2 for main sections and Heading 3 for subheadings within each section.
Research heading: statement, publications
Horizontal line?
If you using a H2 Bio header above your Research section, add a horizontal line to separate the sections. The easiest way is to click on the Horizontal Line button in the toolbar:
Research [Heading 2]
Text statement: briefly describe your research interests and goals.
Publications [Heading 3]
- Do you fill out a FRPA to get your publications into the CU Boulder Elements (CUBE) system? If you do, email David and he can set up an automatic feed of your pubications on your profile.
- If you’re not part of CUBE–which is most people–then manually add publications, most recent first, following this format:
- Gan, T., Tarboton, D. G., Dash, P., Gichamo, T. Z., Horsburgh, J. S. 2020: Integrating hydrologic modeling web services with online data sharing to prepare, store, and execute hydrologic models. Environmental Modelling & Software, 130: 104731. doi 10.1016/j.envsoft.2020.104731
Teaching heading: statement, courses
Horizontal line?
If you using a H2 Bio and/or H2 Research header above your Teaching section, add a horizontal line to separate the sections. The easiest way is to click on the Horizontal Line button 
in the toolbar.
Teaching [Heading 2]
Text statement: briefly describe your teaching experience, approach, and/or philosophy.
Courses [Heading 3]
Bulleted list, formatted like this
- GEOG 5700: Geomorphology Seminar
- GEOL 5100: Geomechanics
Outreach heading
Horizontal line?
If you using a H2 Bio and/or H2 Research header above your Teaching section, add a horizontal line to separate the sections. The easiest way is to click on the Horizontal Line button in the toolbar.
H2 Outreach [Heading 2]
Text statement: write anything you wish that describes your outreach and engagement activities, approach, goals, or philosophy. You can link to online materials if you wish.
Video, but not photos
- You can’t add photos into a non-faculty person’s profile because WebExpress is dumb sometimes.
- Use the video shortcode to add videos already on Vimeo, YouTube, YouTube (Playlist):
- Either click the video icon (it looks like a strip of film) in the shortcode toolbar and enter the URL.
- Or type the shortcode directly, like this example
![https://youtube-embed-URL]](https://www.colorado.edu/instaar/sites/default/files/block/video-embed-shortcode-3.png)
where your URL is something like https://www.youtube.com/watch?v=B1CPE6WWsAQ
- Either method will embed the video within the text block.
- Unfortunately, Web Express does not allow photos for non-Faculty person pages.
- If you want to show some image content, you might consider turning a slideshow into a video and uploading it to YouTube or Vimeo.
If anything looks wonky, you have questions, or you couldn’t quite figure out how to get what you want onto your profile, email David or Shelly. We’re happy to help make your profile meet your needs.
All done! Save and admire your fresh profile.
Other
Example screenshot
The orange label shows a blue button you can edit via the Other tab.
See live page for Nova D. Doggo
Instructions (if you're faculty)
If you're faculty, consider entering the optional summary and a call-to-action blue button. To edit content lower on your page, you need to ask David or Shelly to do it for you (a really annoying Web Express limitation). This includes content in your horizontal tabs (ie Bio, Research, Teaching, Outreach, News). See more information about that below.
Body field: Edit Summary
Your optional summary does not appear on your webpage. Instead, it is used as metada for search engines like Google, increasing the chance that people will find you. Search engines may also show your summary on their search results pages. We suggest using a one-sentence summary that encapsulates your research interests, teaching, etc. Rather than start from scratch, you might want to recast existing text from your bio tab or elsewhere.
Finding the entry field is a little tricky in Web Express. Look for the "Edit summary" link adjacent to the Body field label, like this screenshot:
Click on the link and a new entry field will appear. Add your summary sentence there.
Body field: Call-to-action blue button
- If you have a personal or primary lab/group page that you should be linked to, add a blue button for it.
- The button is optional, but it’s pretty common for faculty, students, and research staff.
- Each person is limited to one button (to prevent visual clutter).
To start from scratch, click the Button generator shortcode icon
and fill out the button fields, choosing blue, small, and regular style.
Or just copy, paste, and edit the following example shortcode
[button url="https://csdms.colorado.edu" color="blue" size="small" style="regular"]Community Surface Dynamics Modeling System[/button]
- Note that you can click the “More information about text formats” link on the right hand side below the body field to see the shortcode code for a button and many other shortcodes.
- If the button text isn’t too long, add an action verb at the beginning, like “Visit the Stable Isotope Lab”
If you want to include an icon in your button, click the shortcode icon and choose an icon. See this link for Icon choices (visible when logged in).
