CSS: Adapting Content for Engage

In relation to our other CSS blog post, we’ve put together a more detailed comparison post to help you better understand HTML/CSS and how to apply it to your site to give it a more custom look.

 

Begin with the Background:

This is the most intimidating part for most clients. Where do we start? The best advice we have is to break this down piece by piece, starting with the theme section and asking this question: “Does my site have a background image or color?”

For anything with a background color which stretches under the main content, we suggest the Association theme. We chose that theme for this particular client.

The next step involves a browser like Firefox or Chrome with an Inspect feature.  Inspect allows you to view the HTML code and associated Cascading Style Sheets (CSS) for any web site.

Go to your Engage site first, right-click on the background and select Inspect. You can then start digging around for the right HTML code and the CSS associated with it.

It can look something like this:

insp.element

The above image is from Firefox. The right-hand side shows the HTML code. The left shows associated style areas.

Change the color codes, remove the images and make alterations. Some browsers, like Firefox, will let you make the changes right in the Inspection area so you can see how they look on the site. Then, it’s a matter of copying out the CSS code section:

body {

border-top: 30px solid #000000;

color: #444444;

background-color: #dd9933 !important;

background-image: none !important;

}

“body” is the name of the CSS code section. The parts in the brackets { } are the code itself. That’s what you fiddle with to make changes.

We suggest you separate the different sections of CSS you’re working with using a divider tag, like this:

/* PAGE CONTENT */

body {

border-top: 30px solid #000000;

color: #444444;

background-color: #dd9933 !important;

background-image: none !important;

}

So now you have the CSS code you need, with the alterations you’ve already tested out and approved using the Inspection tool in your browser.

If you’re not sure of what changes to make, go to your home page and Inspect the appropriate area of your site. It’ll show you color code, background image links, etc.  You can then transfer the appropriate information into the CSS.

 

Work Down The Page:

The rest of the process is lather/rinse/repeat.  Just work from the top of the page down. If you want to be extra organized, note down the sections you wish to change and then:

  • Inspect the element on your page (make a note of any items you want to carry over)
  • Inspect the element on the Engage site
  • Make changes in the inspection tool until you’re happy with the look and feel
  • Copy the changed CSS and put it in your master document.

Bit by bit, you’ll start to build up style sheet changes. This will start transforming your Engage site into a page which more closely aligns with your main site.

In general, the areas which will have the most impact are:

  •  Header
  • Navigation
  • Background (when applicable)
  • Fonts
  • Footer

 

 Testing the Changes

Once you’ve compiled your updated CSS, log into your Engage site. Go to “Sites-> Themes -> Extra CSS” area. Paste in the CSS you’ve compiled.

If you look at the top of your page, it should say your theme is currently in draft mode. It will give you an option to revert to the old settings or publish the new ones. It will also provide you with a hotlink to preview the changes.

If you’re OK with the changes, go ahead and publish them. Otherwise, make edits to your CSS code and preview as needed.

If you publish this and don’t like it, don’t worry. You can always remove the CSS and save the changes. After all, that’s why it’s in a separate document.

 

Trial and Error:

Quite a bit of this process is trial and error, seeing what works and what does not.  But here are a few hints we’ve found to help you get the style sheet to behave

  •  If a particular item is not being read or obeyed, use the !important tag to ensure the browser knows this is a key style item. Example:  background-color: #dd9933 !important;
  • When in doubt, move the content block to the top. For example, if your changes to .ribbon-content.nav-bar are not taking, move it up to the top of the CSS changes. Sometimes, browsers will read and apply the first changes they see before moving on to others.

 An Example:

So, following this process we helped the client pull together a series of alterations to the Engage site’s CSS. When applied, they would help transform the site and match it a bit closer to their home page.

Here’s the CSS:

.ribbon-content .nav-bar {

background: none repeat scroll 0 0 #EAEAEA !important;

}

.ribbon-content .nav-bar > li {

border-bottom: none;

}

.ribbon-content .nav-bar > li > a {

color: #444444;

}

.ribbon-content .nav-bar > li.active:hover {

background: none repeat scroll 0 0 #EAEAEA;

}

/* PAGE CONTENT */

#page-content {

width: 100%;

max-width: 1140px;

}

body {

border-top: 30px solid #000000;

color: #444444;

background-color: #dd9933 !important;

background-image: none !important;

}

 

/* FOOTER */

#page-footer {

background: #F7F7F7;

width: 100%;

margin: 0 auto;

min-height: 100px;

max-width: 1140px !important;

color: #AAAAAA !important;

background-color: #F7F7F7 !important;

-webkit-box-shadow: 0 0 0

}

footer#page-footer p {

color: #AAAAAA;

}

 

/* HEADER */

#page-header {

border-top: none;

max-width: 1140px;

background: url(http://uujmca.org/wp-content/uploads/2014/01/WEB_BANNER_wide.jpg) no-repeat;

min-height: 195px;

}

 

/* NAVIGATION */

#main-nav-association {

width: 100%;

max-width: 1140px;

height: 38px !important;

background: #EAEAEA !important;

margin: 125px 0px 0;

}

.ribbon .ribbon-content:before,

.ribbon .ribbon-content:after {

content: “”;

position: none;

display: none;

border-style: none;

border-color: none

bottom: none

z-index: none

}

.ribbon .ribbon-content:before {

left: 0;

border-width: 0;

}

.ribbon .ribbon-content:after {

right: 0;

border-width: 0;

}

.ribbon-content .nav-bar > li:hover {

background: none repeat scroll 0 0 #eeeeee;

}

 

/* FONTS */

aside.lookup h1, aside.wysiwyg h1, aside.list_engagements h1, aside.registration h1, aside.news_by_topic h1, aside.list_votes h1, aside.list_bills h1 {

color: #444444;

border-bottom: none;

font-size: 22px;

}

article h1 {

color: #444444;

}

 

/* SLIDESHOW */

.spotlight-container #region4 { margin: 0; }

.spotlight-container #region4 { display: none; }

.spotlight-container #region5 { margin-top: 250px; }

/* #region4.twelve.columns.spotlight { width: 378px; height: 300px} */

 

And if you’d like to see the changes in action: http://cqrcengage.com/uujmc

Now, the client can still use our template pages and add in content, but with the content styled to match their site.

We’ve got other examples, listed below. But if you want to start styling your page and need assistance, just contact your account executive:

 

 

 

You can see a brief video on this and adding tracking codes below:

Author: Engage Team

Share This Post On