Category Archives: CSS

In the Works – Responsive Design for ECU’s Website

Share

Responsive design simply means that a web layout adjusts to the size of a device’s browser window (including the screen resolution).  So no matter if a user is viewing your page on a desktop, laptop, iPad, smart phone or TV, your important information is sized to the screen in a readable form.

Even better for designers, there’s only one layout to create, not one for regular screens and then another for a mobile version.

How does this Work?

Responsive design uses a “media query” to detect the height, width and resolution of the user’s browser and then adjusts the layout accordingly through the Cascading Style Sheet (CSS).  Properties such as display width, page orientation, pixel resolution and other device features determine which style sheet is used to render the page for a user.

As the browser window narrows, columns/containers stack one on top of the other so that the page narrows and lengthens to fit the screen.  Font size and images are reduced.  For larger devices, columns, fonts, images and other features expand to their fullest size into a more horizontal layout.

Rather than a “one-size-fits-all” solution for the size of a web page, a media query allows a designer to target styles based on device properties like screen size or layout orientation.

All of this resides in the default page code, so ECU’s department designers are no longer required to

  • Create separate mobile versions of their web pages
  • Manually update two sets of pages

What do ECU webmasters need to know?

  • Once this feature is live, a mobile version is automatically available for new pages created using the 960-pixel templates.
  • Pages based on the old 770-pixel layout cannot take advantage of the responsive style sheet.
  • Images  for new pages should be cropped and sized for the space—not scaled—so they load faster and display appropriately on any size device.

When will this happen?

Currently in the testing phase, the Web team intends to transition ECU departments and colleges to this new feature throughout the summer.  Web administrators will be contacted beforehand.  It’s important to note again that only new pages created from the 960-wide templates will use the responsive design style sheet.

Creating a jQuery Accordion

Share

One task that jQuery makes very easy is creating an accordion effect. To do this, we will use the jQuery UI extension library. This is useful if you have a long section of text that is broken up into subsections. By using an accordion, you only display one subsection at a time, but all the other text is available to read at any time. So, for example, on this sample page, there is a long string of information about Piratedrive, broken up in to seven subsections (General Information, Personal Piratedrive, etc.). So to make the page shorter, I’m going to put the text into an accordion. As you will see, this is very easy to do – in fact, I would say that creating the HTML structure is harder than the actual JavaScript in this case.

HTML Content

First, the content has to be formatted so that it can be converted easily. The jQuery UI library requires that the page content be formatted something like this:

<h3><a href="#">Subsection One Title</a></h3>
<div>
     Subsection One Content.  Can be text, image, links, anything you want.

     The content can be multiple paragraphs and contain any html tags that you want.
</div>

<h3><a href="#">Subsection Two Title</a></h3>
<div>
     Subsection Two Content.  Again, can be text, image, links, anything you want
</div>

The links (a href=”#”) are required, because they will be the triggers that cause the subsections to open. The subsection headings do not actually have to be h3′s, but that is the default, so for the tutorial that is what I’ll use. I’ll post a link to the documentation so if you want to do something more advanced you can. So, for step one of the tutorial, I’ve set up the sample page linked above with the content in that format.

The other next step is that all the subsections have to be wrapped in a div tag with an id that we will use to identify it. I’m going to call this one “myAccordion”, just to make it easy to see what I want it to be converted into, but you can name it any valid name.

<div id="myAccordion">
     <h3><a href="#">Subsection One Title</a></h3>
     <div>
          Subsection One Content.  Can be text, image, links, anything you want.

          The content can be multiple paragraphs and contain any html tags that you want.
     </div>

     <h3><a href="#">Subsection Two Title</a></h3>
     <div>
          Subsection Two Content.  Again, can be text, image, links, anything you want
     </div>
</div>

Remember, id’s are required to be unique on a page, so if you plan on putting two accordions on your page, you cannot name both of them “myAccordion”.

Importing jQuery UI

The next step is to include the jQuery UI library on the page. To do this, you would use the Include JavaScript Custom Element. We have the library stored on our server at http://www.ecu.edu/js/jquery-ui-1.8.13.min.js, so when you put the element on the page, put “/js/jquery-ui-1.8.13.js” (minus the quotes) in the external source text box:

Last Step

And now, there is only one more step to go. You need to add other Include JavaScript Custom Element and put this code in the Script Input box:

$(document).ready(function() {
    $('#myAccordion').accordion();
});

If you named your div something other than “myAccordion”, put that in place of the “myAccordion” (that follows the “#”) in the code.

Styling

When your page reloads, will should see that the accordion works, as here: http://www.ecu.edu/cs-training/hallwa/Accordion-Step-Two.cfm. As you can see, the style is rather plain, so you can either create your own style sheet, use one of two ECU customized one, located at /css/jquery-ui.css (very purple and gold themed) or http://www.ecu.edu/css/custom-theme/jquery-ui-1.8.2.custom.css (a subtler theme), or some combination of an existing style sheet and your own styles. There is a tutorial here on how to use a style sheet in CommonSpot.

After applying the purple and gold theme, the page looks like this: http://www.ecu.edu/cs-training/hallwa/Accordion-Step-Three.cfm

Advanced Configuration

There are several advanced configuration options that you set if you dislike the defaults. For example, as you can see, by default the first subsection is active (opened for viewing) and the height of all the subsections is the same (the height of the tallest), and one subsection is open at all times. Let’s use the advanced options (found here http://jqueryui.com/demos/accordion/ under Options) to change our accordion so that when the page loads all the tabs are closed, the user can close a subsection by clicking on it while it is open, and to have each subsection only use its own height.

To do this, we have to edit our code that called the accordion function. Right now it is

$(document).ready(function() {
    $('#myAccordion').accordion();
});

.

Within the accordion() function, we are going to change the parameters. First let’s make the accordion collapsible, i.e. not required at a subsection is open at all times. We change the code to

$(document).ready(function() {
    $('#myAccordion').accordion( { collapsible: true  } );
});

Next, let’s make all the subsections load closed:

$(document).ready(function() {
    $('#myAccordion').accordion( { collapsible: true, active: false} );
});

Last, let’s change the height as sections load.

$(document).ready(function() {
    $('#myAccordion').accordion( { collapsible: true, active: false, autoheight: false  } );
});

When all completed, the page now looks like this:
http://www.ecu.edu/cs-training/hallwa/Accordion-Step-Four.cfm

Style Sheets Tutorial

Share

Today we are going to use last week’s tutorial, the Twitter feed custom element, to demonstrate how you can use stylesheets to modify the appearance of elements on your page.

Last week we left the element with its default appearance: http://www.ecu.edu/cs-training/hallwa/Twitter-Feed.cfm.  Today we are going to use a stylesheet to transform it to this: http://www.ecu.edu/cs-training/hallwa/Twitter-Feed-styled.cfm.

First, create a empty text file in DreamWeaver, Expressions Web, notepad or any other plain text editor.  (Do not use Word.)  Save it as myStyles.css.  Then upload it to your tools page.  I put mine in a subfolder called tweetStyles, but you can put yours in the tools root if you want.

Let’s see how to include that style sheet into a page.  While in Author mode, click on the Properties and Actions option from the submenu. A popup window will appear.  Make sure that “Use Style Sheet and prevent element style override” is checked.  Click Next.  The Style Sheet Sets window will appear.

If you have never edit the style sheets for your page, then the default set should be the only one listed.  At this point, you have two options:

  1. You can create a new set containing your style sheet.  This will have the affect of removing the default styles, as defined in the default.css file, from your page.  It will not remove the general default ECU styles, which are defined else where.
  2. You can add your stylesheet to the default set.  This is probably the better option.

When you add your style sheet to a set, the style sheet listed at the bottom is the one that will take precedence. So if a style is set in both default.css and myStyles.css, and myStyles.css is listed after default.css, then the style set in myStyles.css will override the one set in defaults.css.

styles

To insert a style into the set, click the pencil icon next to the set name and select Style Sheets… from the submenu.  Use the “Click here to add a new style sheet” link to insert the sheet.  Check the “Explicit File” option and type the location of your file into the “Logical Path” box.  It should be something like “/cs-[siteName]/[subfolder]/customcf/myStyles.css.  Click Finish.  You should see your file listed after default.css.  Click Close.  Click Finish.  You page should reload, and if you view the source, you will see you CSS file listed near the top.

code

Now that our style sheet is referenced in our HTML code, we can change the way the page displays just by editing that file, without using any of the CommonSpot authoring tools.

First, let’s add a thin black border around the entire element.  If you remember from the image that shows diagrams the layout, the element is in a div with a class of “tweetContainer”.  So, open your myStyles.css file and add this CSS code:
.tweetContainer{
border: solid thin #000000;
}

The “.” denotes a CSS class (“#” is used to denoted an id).  Classes can be reused, but ids need to be unique on a page.  Upload myStyles.css to your tools page and then reload your CS page that has your Twitter feed on it.  It should now have a border around it.

Next, let’s get rid of the the default horizontal line separating the individual tweets and replace it with a dotted ECU purple line.  Add this code to myStyles:

hr.tweetSeparator {
display: none;
}
p.tweet {
border-top: dashed thin #592a8a;
}

First, by setting display to “none” the browser will stop displaying the hr tag, even though it is still in the HTML code.  Next, we are adding a dotted purple top border to each paragraph.  Upload the file and reload the page to see the results.

Now, both the border around the whole element and top border on the paragraphs are too close to the text, so let’s add some padding to both:

.tweetContainer {
border: thin solid #000000;
padding: 10px;
}
.tweet {
border-top: dashed thin #592a8a;
padding-top: 10px;
}

OK, last let’s make the “Latest tweets from…” text appear all to the right of the Twitter image.  Add this code, upload, and reload:

.twitterImage {
float: left;
padding: 0 10px 5px 10px;
}
.tweets {
clear: both;
}

With just these few lines of code, we changed the appearance rather substantially.  You can learn more about CSS many places.  One of my favorite CSS reference/tutorial sites is the W3Schools (http://w3schools.com/css/).  The site covers HTML, CSS, XML, JavaScript, and many other web technologies.