DIY Layout

Back to: Exploring GravityView Layouts

0

Licensing Note

DIY Layout is available with a GravityView All Access License.

To install the DIY Layout Extension, go to Extensions under the Views menu in the Admin sidebar. Find DIY Layout and Install and Activate the extension.

Multiple Entries

Out of the box, DIY View is very plain. This is intentional to allow you to create the styling that works for you. This is what it looks like:

This is what our final multiple view layout will look like with all the styling applied:

Setting Up the View

The field settings allow for some styling without needing to use HTML or CSS. Select the gear icon next to the field name and change the container tag to invoke your theme’s styling of the HTML elements, such as heading or paragraph text.

Here are the fields in this layout and the HTML Container Tags and CSS Class names I’ve added:

  • Name (Container Tag: H2; CSS Class: member-name)
  • Headshot (CSS Class: gv-multiple-image) 
  • Company Name (Container Tag: H3; CSS Class: company-name)
  • Job Title (Container Tag: H4; CSS Class: job-title)
  • Address (CSS Class: company-address)
  • Email
  • Custom Field for Office Phone (Container Tag: Div)
  • Custom Field for Mobile Phone (Container Tag: Div)
  • Edit Entry (CSS Class: update-link)

We need to make a few additional field settings updates:

Headshot: set Custom Width to 200 to reduce the size of the image

Address: uncheck Show Map Link

Office Phone and Mobile Phone: as we’ve done in the other layouts, we’ll use gvlogic to fill in the custom content fields with the entries from the phone number fields on our form as shown below:

Edit Entry: change Edit Link Text to “Update Profile”

Like in the original View, don’t forget to restrict the visibility of the contact information fields to only logged in users.

Customizing the View with CSS

Now let’s add some Custom CSS to create this layout. Where do you add Custom CSS to your site?

You’ll need to embed your View on a page to take advantage of the customized styling.

CSS Styling

Your theme settings will dictate the styling of your DIY Layout View. You may need to tweak the styling listed below. Watch the video for a more detailed explanation.

The code below is applied to theme Twenty Twenty with default styling intact. Note that the Twenty Twenty theme uses very large font and white space around headings which doesn’t work well for this layout, so there is a lot of tweaking the font size and margins in the code below. You may not need as much tweaking or as many important tags if you are using a different theme.

Start by expanding the View to cover the full width of the page and creating a flex container for the entries:

.gv-diy-container{
  max-width:100% !important;
  display:flex;
  flex-wrap: wrap;
  flex: 1 0 auto;
  justify-content: space-around;
}

Here are some helpful resources for learning more about Flexbox:

Next change the font size and set a minimum width for the entries:

.gv-diy-multiple-container .gv-diy-view{
  font-size: 18px;
  min-width: 450px;
}

The font size seemed a necessity because the fonts in Twenty Twenty are big, but your theme’s default font size may be acceptable.

Once your entries are set up, you may need to tweak the min-width value to be larger or smaller depending on the width of your entries. Flexbox’s default is to show all entries on one line, so it makes them as narrow as possible unless you specify otherwise. Setting a min-width value ensures that your entry will not go too narrow even when the screen size changes. I chose the min-width value based on the widest email address in my entries. You’ll see that some of the states and zip codes flow to an additional line in the address field, but the email addresses remain intact. You can set your min-width wider if you want to keep the states and zip codes on the same line too.

Next style the name of the member:

.member-name {
	font-size: 30px;
	margin-bottom: 5px !important;
}

Next, let’s move the headshot to the left and the text to the right:

.gv-multiple-image{
  float:left;
  padding-right: 10px;
  padding-bottom: 100px;
}

The bottom padding clears the space beneath the image so that the text doesn’t wrap around beneath the image. It also adds a buffer between rows. If your text entries are longer, you will want to make the padding-bottom value larger.

Next, we’ll style the company name and job title:

.company-name {
	font-size: 25px;
	margin-top: 0px !important;
	margin-bottom: 5px !important;
}

.job-title {
	font-size: 20px !important;
	font-style: italic;
	margin-top: 0px !important;
	margin-bottom: 5px !important;
}

Then, reduce the line height of the address so that it appears grouped together:

.company-address{
  line-height: 1.4em;
}

This is theme specific, so you may want to play around with this number or add a few pixels of top and bottom padding to set the address apart.

Finally, set the Update Profile link slightly apart from the rest of the entry by adding a little top padding.

.update-link{
  padding-top:10px;
}

Single Entry

In the single entry, we’ll add in the fields that weren’t displayed on the Multiple Entries screen. Here is what it will look like:

Setting Up the View

Here are the fields with their HTML Container Tags and CSS Classes:

  • Name (Container Tag: H1)
  • Headshot (CSS Class: gv-single-image)
  • Company Name (Container Tag: H2; CSS Class: single-company-name)
  • Job Title (Container Tag: H3; CSS Class: single-job-title)
  • Address (Container Tag: P)
  • Email
  • Custom Content for Office Phone (Container Tag: Div)
  • Custom Content for Mobile Phone (Container Tag: Div)
  • 100 Word Bio (Container Tag: P; CSS Class: single-bio)
  • Committee Participation (CSS Class: committee-participation)
  • Edit Entry

Like in Multiple Entries, we need to make a few additional changes to the field settings:

Address: uncheck Show Map Link

Office Phone and Mobile Phone: copy and paste the gvlogic code from the multiple entries fields into these fields so that the single entry matches the multiple entries.

100 Word Bio: in the Before Output field add “<b>Biography:</b><br>” to add a label above the bio text.

Committee Participation: “<b>Committee Participation:</b><br>” to add a label above the committee list.

Edit Entry: change Edit Link Text to “Update Profile”

Also as with Multiple Entries, don’t forget to restrict the visibility of the contact information fields to only logged in users.

Customizing the View with CSS

Finally, a few more lines of CSS to style the single entry:

First style the headshot by making it smaller, moving it to the left, adding a small clear space between the image and the text on the right, and adding the clear space:

.gv-single-image img{
   width: 500px;
   height: auto;
   float: left;
   margin-right: 20px;
   margin-bottom: 270px
}

Next, style the company name and job title fields:

.single-company-name {
	margin-bottom: 0px !important;
	font-size: 50px;
	margin-top: 0px !important;
}

.single-job-title {
	font-style: italic;
	font-size: 25px;
	padding-bottom: 5px;
	margin-top: 0px !important;
	margin-bottom: 10px !important;
}

Change the font-size of Heading 4 (the titles for Biography and Committee Participation) and adjust the margins around it:

.gv-diy-view h4 {
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 25px;
}

Adjust the margins around Paragraph Text (the content in the 100 Word Bio field):

.gv-diy-view p {
	margin-top: 5px;
	margin-bottom: 5px;
}

Finally, align the bullet points for the committees under the Committee Participation heading:

.committee-participation ul{
  list-style-position: inside;
}

Now your DIY Layout is styled! Below is the full code block so you can copy and paste.

Full Code Block

/****Member Directory GravityView Layout from Gravity.Guide****/
/*Set View to 100% width and create flex container*/
.gv-diy-container{
  max-width: 100% !important;
  display: flex;
  flex-wrap: wrap;
  flex: 1 0 auto;
  justify-content: space-around;
}

/*Modify font size and set min width for entries*/
.gv-diy-multiple-container .gv-diy-view{
  font-size: 18px;
  min-width: 450px;
}

/*change member name size and margins*/
.member-name{
  font-size: 30px;
  margin-bottom: 5px !important;
}

/*set headshot to the left of text with small blank space before text, ensure
all text stays to right with bottom padding*/
.gv-multiple-image{
  float:left;
  padding-right: 10px;
  padding-bottom: 100px;
}

/*change company name size and margins*/
.company-name{
  font-size: 25px;
  margin-top: 0px !important;
  margin-bottom: 5px !important;
}

/*change job title size and margins and make italic*/
.job-title{
  font-size: 20px !important;
  font-style: italic;
  margin-top: 0px !important;
  margin-bottom: 5px !important;
}

/*reduce line height so company address appears grouped together*/
.company-address{
  line-height: 1.4em;
}

/*set update profile link apart from contact information with a little padding*/
.update-link{
  padding-top: 10px;
}

/*adjust the size of the image, move it to the left with a small blank space
before the text on the right, clear the space beneath the image with padding*/
.gv-single-image img{
   width: 500px;
   height: auto;
   float: left;
   margin-right: 20px;
   margin-bottom: 270px
}

/*change size and margins of company name*/
.single-company-name{
  margin-bottom: 0px !important;
  font-size: 50px;
  margin-top: 0px !important;
}

/*change size and italicize the job title, add a small space below and adjust margins*/
.single-job-title{
  font-style: italic;
  font-size: 25px;
  padding-bottom: 5px;
  margin-top: 0px !important;
  margin-bottom: 10px !important;
}

/*change size and margins of h4 for field labels*/
.gv-diy-view h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 25px;
}

/*change margins around paragraph text*/
.gv-diy-view p {
  margin-top: 5px;
  margin-bottom: 5px;
}

/*line up the bullet points below the committee participation heading*/
.committee-participation ul{
  list-style-position: inside;
}