Digication Custom CSS Guide

8/12/2019 Digication Custom CSS Guide

1/12

1

The following document is a draft for teaching DePaul writers how to use the CSS

language to customize their Digication e-portfolios. The audience for this document is

writers who are unfamiliar with CSS but want to learn more.

Your Digication e-portfolio can be customized in a variety of ways, from modifying

the background color to changing the font of your text. You can make these changes

through using the computer language called Cascading Style Sheets or CSS. Evenif you are not familiar or comfortable with website-building, you can make many

simple, but effective changes to your e-portfolio by altering a few numbers and text

in CSS.

To begin customizing your e-portfolio, you must first navigate to the Custom CSS

space.

1. Click on the Portfolios Tool tab in the top right of your e-portfolio.

2. Once the tab expands, click on Settings and it will take you to a new page.


2/12

2

3. Scroll down to the Choose a Theme subheading and click on Customize.

4. The areawill expand to reveal the Customize CSS section.

5. You can modify the CSS code in this area to change the look and feel of your e-portfolio. Before you can view the effects of any changes you make, you have to

scroll down to the bottom of the page and click Save. This will bring you back toyour e-portfolios homepage. Click on the Published tab to see the effects of any

changes you make.


3/12

3

Modifying certain structural elements in the CSS, such as the position of containers,

can cause your Portfolio Tools to become inaccessible. As a precaution, always

record your Portfolios IDnumber (PID) before making any changes to the CSS. The

PID can be found at the end of the URL when viewing your Portfolios Settings page.

Example: https://depaul.digication.com/portfolio/sitemap.digi?pid=123456

If you do end up having trouble accessing the settings page, including the custom

CSS, insert the above URL with your PID into your web browser. You will be able to

reset the CSS (see below).

Next to the CSS textbox, there is a reset button. Note: This reset button will revert

your CSS to the original settings! We recommend saving your current CSS to a

notepad file as a sort of bookmarkin case you want to make some changes but are

not sure how they will turn out. That way, you can just copy and paste the

bookmarkinto the box if you want to return to an earlier version.

Almost every element in your e-portfolio can be modified with CSS, from the header

image to the navigation bar to the footer. Elements like these are controlled by

selectors in the CSS. Making changes to these selectors makes changes to the

elements they control. By doing so, you will change how your e-portfolio is

displayed.

In CSS, selectors are written in a format made up of several pieces of information.

Below is what a typical selector is made of.

Selector

{

Property:Value;

}


4/12

4

Selector - refers to the element that the code will be modifying, such as the header.

The selector is followed by two brackets. All properties listed between these two

brackets affect the element.

Property - the specific feature that you would like to make changes to in the

element. Each property ends with a colon and is followed by a value. A semicolon

must follow the value.

Value - the variable that you assign to each property, such as red for a color

property.

Below is an example of a selector which contains information that affects the div

element header_container. (You can learnmore about div elements and how they

differ from class elementshere).

#header_container

{

color: red;

border-width: 10px;

}

For this example, the selector is header_container, which refers to the header of

an e-portfolio. There are two properties, color and border-width. The color

property changes the text color of the header; in this case, its value is red, so the

text contained in this element will appear red. Border-width refers to the borders

of the header. Based on its assigned value, the border will now be 10 pixels wide.
http://css-tricks.com/the-difference-between-id-and-class/http://css-tricks.com/the-difference-between-id-and-class/http://css-tricks.com/the-difference-between-id-and-class/http://css-tricks.com/the-difference-between-id-and-class/


5/12

5

The following is a list and explanation of the main elements that comprise your e-

portfolioslayout in CSS. By modifying these elements using their selectors, you can

change the way each will appear in your portfolio.

bodyThis is the element that contains the entire page. Any property written in this

section will affect all of the other elements UNLESSanother property is defined in that

element.

For example, if color: blue is typed in the body element, then the text for the

entire e-portfolio will be blue. However, if the #header_container element has

color: red as a property and value, then the #header_container will appear blue,

not red.

#site_topnavThe top navigation bar, which contains the Home and Log Out

buttons, as well as other navigational links.

#header _container This div contains the header. You can adjust the margin

around your header, as well as other properties, by modifying this selector.

#main_containerSimilar to the #header_container, it contains the main content in

your portfoliothat is, the stuff between your header at the top and your footer at the

bottom.

.navigation_topnavThis class selector affects the navigational links just below

your banner. These links connect the different sections of your portfolio together.

#footer _container

This div contains the footer. It is essentially the same as thefooter element except that it also affects the margin border around your footer.

.titleBelow your header, this is the area where the title of your portfolio is

displayed.

#footerThis is the div that contains the footer at the bottom of your portfolio.


6/12

6

Below is an example of a bare bones portfolio, with the major elements colors

modified through CSS.

body

{

background: black;

}

#site_topnav

{

background: red;

}

#header_container

{background:orange;

}

.title

{

background: yellow;

}

.navigation_topnav

{

background: green;

}

#main_container

{

background: blue;

}

#footer_container{

background: purple;

}


7/12

7

While some properties can be modified by changing words, such as font names,

most properties require numeric values to modify the elements. In HTML\CSS, there

are several types of units of measurement that users can use. While the most

commonly used units are the pixel (px) and em units, other units can be useful, too.

Below is a list of these different units of measurement.

pxShort for pixels. This is the default unit, if no measurement is specified.

emRelative to the current font size. If the font size is 12, then 1 em is equal to 12

pixels.

%Percentage from 0 to 100. If set to 100%, the property will be 100% of the size

specified in its parent (i.e., the element where the size is specified by a numeric

value).

mmmillimeter

ininch

cmcentimeter

ex Similar to em, but instead relies on the height of the font, instead of the overall

size.

ptpoint. 1 point is 1/72 of an inch

pcpica. 1 pica is equal to 12 pts

To use one of these units, type your numeric value, followed by the specific unit

type. Below is an example code that uses various units of measurement..

#footer

{

margin: 3em;

border-width: 30px;

}


8/12

8

In the above code, we are modifying the margins of our footer. We will make the

margin three times the size of current font size. At the same time, we are specifying

that the footer border is to be 30 pixels wide.

Each element of a Digication portfolio, from the text to the background, can be

assigned a color. In CSS, colors can be designated three ways: hexadecimal color

code, RGB, and color names. Below is an example of how to define green using all

three of these methods.

body

{

background: #00FF01; [hexadecimal]

background: rgb(0,256,33); [RGB]

background: green; [color name]

}

All three make the body background green, but each refers to different shades of

green. While color names are by far the simplest nomenclature, there are a limited

amount of colors that can be named. On the other hand, Hex and RGB allow for 16

million different colors to be defined by unique combinations of numbers.

In RGB, colors are defined by a combination of three colors: red, green, and blue.

Each of these colors strength can be increased from 0 to 256. If all three colors have

a value of 0, then the color output is black. If all colors are at max value, 256, then the

output will be white.

Here is a list of several properties that involve color and what they modif:

background-color: Changes the background color of your designated element

color: Changes the font text color


9/12

9

border-color: Changes the border color

To learn more about colors and CSS, seethe excellent resource at W3schools.com.

Adobe Kuleris a free resource that allows you to create and share custom color

palettes, as well as calculate different color codes.

Even though every section of your e-portfolio can have its own font, you can also

specify a default font by including in the body element, it will change your entire e-portfolio into that font. Fonts are defined by typing a name of a font in the font-family

property.

Not all browsers have the same types of fonts. As a safety precaution, you should

type several font names into the font-family property. If the browser does not

support the first font, it tries the next font.

As a suggestion, input at least three fonts for the property. Begin with a font you want

most and end with a generic family font. If your font is more than one word, it must

be in quotation marks, for example, "Times New Roman."

Below is a list of generic font families. All browsers will have definitions for fonts with

these three features. A generic font is your safety net because they are guaranteed

to be valid.

serif-fonts with small lines at the end of each letter

san-serif-fonts without lines at the end

monospace-fonts where all characters are the exact same width.

In addition to defining fonts, CSS allows users to modify their fonts with several other

properties. Below is a list of those properties.
http://w3schools.com/cssref/css_colors_legal.asphttp://w3schools.com/cssref/css_colors_legal.asphttp://w3schools.com/cssref/css_colors_legal.asphttp://kuler.adobe.com/http://kuler.adobe.com/http://kuler.adobe.com/http://w3schools.com/cssref/css_colors_legal.asp


10/12

10

Font-size-Modifies the size of the font.

Font-weight-Makes the font thinner or thicker. The acceptable values are; normal,bold, bolder, and lighter.

Font-style-Italicisizes the font. The acceptable values are normal, italic, and oblique.

Below is an example of changing the font for one element.

#main_container

{

font-family: Algerian, Comic Sans, Sans-serif;

font-weight: bold;

font-size: 20;}

For more information on fonts,W3 SCHOOL

You can add borders to most sections of your e-portfolio. Border properties can only

be added to container elements, they do not work in simply header, but the

header_container. Apart from color, mentioned above, there are two majorproperties that you can modify when it comes to borders; border-width and border-

style.

Border-style refers to the type of border that surrounds your container. Below is a list

of border-styles. By default, borders are at solid. The other styles include; dotted,

dashed, double, groove, ridge, inset, and outset.

Each border has four sides. By inputting only one value, all four sides are affected.

However, each side of the border can have its own width and style depending onhow many values have been inputted. Up to four values can be given, each with a

space between them to indicate their separation.

one value-all four sides are affected

two values-top and bottom are first value, left and right are second

three values-top is first value, left and right are second, bottom is third

four values-the order goes top, right, bottom, left
http://www.w3schools.com/css/css_font.asphttp://www.w3schools.com/css/css_font.asphttp://www.w3schools.com/css/css_font.asp


11/12

11

The following is an example of adding a border for the header. We will adding a red

border with dotted sides, but a solid top and bottom.

#header_container

{

border-style: solid dotted;

border-width 10;

border-color: red;

}

For more information on borders,W3 SCHOOL

With CSS, the position of all elements can be moved, adding more white space or

putting things closer together. By increasing these properties for each object, you

will essentially increase the white space.

There are two similar properties for increasing the white space; margins andpadding. The biggest difference is that padding alters the white space between the

element and its border, while margins affect the white space between the element

border and the other elements in your portfolio. Below is an image that

demonstrates the different areas that margins and padding affects.
http://www.w3schools.com/css/css_border.asphttp://www.w3schools.com/css/css_border.asphttp://www.w3schools.com/css/css_border.asp


12/12

12

Similar to the border-style and border-width properties, both the margin and

padding property accept up to four values, separated by a space. If only one value is

given, all four sides are affected etc.

The float property places elements such as text and images as far left or as far right

as they can depending on which value you give them. If two images have the float:

left property for example, than they will be as close as left they can be without

overlapping each others margins.

The align property effects the alignment of content within the element. There are

four values; right, left, center, and justify. Similar to magazine print, justify stretches

the text lines so that each of them is the same width.

As an example, we want our header container to be 40px away from other elements.

We want the text and images to be 20px away from the border sides.

#header_container

{

padding: 40px;

margins: 20;

align: center;

}

For more information on spacing,W3 SCHOOL
http://www.w3schools.com/css/css_positioning.asphttp://www.w3schools.com/css/css_positioning.asphttp://www.w3schools.com/css/css_positioning.asp

Digication Custom CSS Guide

Documents

Transcript of Digication Custom CSS Guide