Category Archives: Style Sheets

Simple Image Editors on the Web

Share

Because of a conflict with the progressive design stylesheet we’re using, which adjusts the size of your web page to the visitor’s screen size, the ability to scale a photo within the CommonSpot image dialog box has been turned off.  This means that, while you can add a border or space around an image through CommonSpot image tools, you can no longer resize (scale) from this feature.  Images and graphics need to be sized correctly before being placed on your web page.

For those of you who don’t use PhotoShop, Becky has created a great tutorial introducing two FREE online photo editors that are super easy to use–even for beginners!

iPiccy requires no registration and is easy to use for cropping a picture or resizing.  fotoflexer doesn’t require you to join or register, either, and has many fun special effects. For a great explanation, see this Simple Image Editing

For those Mac or Windows users who decide to try either of these editors, please Yam your experiences using either eidtor on the CommonSpot User Yammer Group.

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.

Making Collapsible Content with jQuery

Share

One thing that you might want to do if you have very long lists of content is make them collapse or not display until the user clicks on a trigger that makes the content appear. A good example of this is the ITCS Service Catalog. If the page displayed all the links at once, the page gets very long, so instead we displayed the categories, then reveal the links when the user clicks on the category name.

To do this, we use jQuery, an open source JavaScript library.  Since jQuery is loaded on every CommonSpot page, all of its library functions are readily available for you to use at any time.  This tutorial only some of the most simple tasks that  jQuery is capable of. You can read about everything it can do at the jQuery Documentation site.

Setting up the HTML Content

The first step to cover is to create the list without hiding it. This is important, because if you hide it by default, then users who have disabled JavaScript will not be able to see the links that you are creating. I made a page with the list of links that are in the tool bar on the ECU Homepage, and some text that will be the trigger for displaying and hiding the links. The HTML for the content is this:

<p>Click Here to Toggle Links</p>
<ul id="hideableContent">
 <li><a href="http://blackboard.ecu.edu">Blackboard</a></li>
 <li><a href="http://help.ecu.edu">Help Desk</a></li>
 <li><a href="http://pirateid.ecu.edu">PirateId</a></li>
 <li><a href="/csecu/links_index.cfm">A to Z Index</a></li>
 <li><a href="/banner">Banner</a></li>
 <li><a href="/cs-ecu/email_phone.cfm">Email/Phone</a></li>
 <li><a href="http://onestop.ecu.edu">OneStop</a></li>
 <li><a href="/cs-ecu/calendar.cfm">Calendar</a></li>
 <li><a href="/admin/accessibility/">Accessibility</a></li>
</ul>

The next step is to hide the links when the page loads. What we want to hide is the list element that starts with <ul id=”hideableContent”> and ends with </ul>. The id that I have given this list is important, as that will let us change this list but not others on the page that we don’t want to hide.

Selecting

So to hide this, we will use jQuery. To explain simply what jQuery does: it selects (or finds) an element or elements and then usually performs some tasks on what is selected. The code follows this pattern:

$("[what you want to select]").[what you want to do to what is selected];

We want to select the ul with the id hideableContent, so the specific code is this:

$("#hideableContent").toggle();

The string “#hideableContent” tells the selector what to look for and is made up of two parts: the pound sign, and hideableContent.

The #hideableContent select the element with an id of hideableContent. This is case sensitive, so make sure you match the id exactly.  Also, make sure that you use an id only once per page.  If you use the same id value more than once unpredictable things will happen.  The pound sign tells the selector that the next word is an id. The toggle() function hides what is visible and shows what is hidden. Since the content is visible when the page loads, this code will hide it.

You can also use a dot and the class name to select everything that has a specific class (e.g. $(‘.collapsible) would select everything that has a class of collapsible).

You can also select html tags by using just the tag with no dot or pound sign (e.g. $(‘ul’) would select every unordered list in the document).

You can select tags that are within other tags by putting them together with a space (e.g. $(‘ul li’) would select all the list items within all the unordered lists on a page).

And finally (actually this is a far from comprehensive list, but it is all I’m going to cover today) you can limit the selection to tags that have a class or id (e.g. $(‘ul.collapsible’) would select all unordered lists that have a class of collapsible. These are just a small part of the selectors. Can read about all the other options at the jQuery Documentation site.

The ready() Function

To get our code to work, the page needs to execute it. This is done by using the ready() function. It looks like this:

$(document).ready ( function () {
     [Code we want to execute goes here]
});

This is a function that is run automatically when the page is “ready”, i.e. when the DOM (Document Object Model) hierarchy has been fully constructed. So, to hide the list on page load, first you would put a JavaScript Include element on your page. Then you have two options. You could put the JavaScript code in the Script Input box, like this:

Or, you can save the code in a separate file, upload it via the tools page, and then include the location of the file, as here, where I have saved the code in file collapse-version1.js and uploaded it via my tools page. This seems the better option to me, because to update the page, all I have to do is make the changes to my JavaScript file and upload it, overwriting the previous version.

When the page reloads, you can see that the list is now hidden.

Activating the Toggle

The last step is to make the “Click Here to Toggle Links” active. I’m using a text hyperlink, but you can use anything you want, for example a button or an image. It just has to be selectable.

So first we will make that text a link, but instead of linking to a page, we set the link to be “#”. So that part of the HTML code will now look like this:

<p><a href="#">Click Here to Toggle Links</a></p>

Next, we want to add an id to the link, so that we can select it when it is clicked on. The Rich Text Editor in CommonSpot will not let you do this without switching to HTML view, so click on the button. It will show this:

Change the <a href=”#”> to <a href=”#” id=”toggleLink”>, then click the HTML button again and the Finish button.
The only thing left to do is write the jQuery code that will actually do the toggle. To do this, first you select the link, like this:

$("#toggleLink")

and add the click() function and the start of the code for the click function:

$('#toggleLink').click( function() {
     [toggling code will go here]
});

All this code does is tell jQuery to select the link and then do something when it is clicked on.
The code that will actually toggle the list is the same as we did when the document is ready:

$('#hideableContent').toggle();

So the whole JavaScript code will be:

$(document).ready( function() {
     $('#hideableContent').toggle();
     $('#toggleLink').click( function() {
          $('#hideableContent').toggle();
     });
});

And that is it. Your page should now work like this one.

As I said, this just a tiny example of what you can do. The jQuery documents cover it all. If you have any questions, feel free to ask and I will do my best to find an answer.

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.