DRAFT: This module has unpublished changes.

Special Thanks to Mo Lam of Stonybrook University for his outstanding technical support and the framework of this page.

 

To all that visit my page, you can see the code that I used to make it happen within the LaGuardia Community College digication HTML framework. I will be adding coding notes as I figure out what does what.

 

You can find a short tutorial on CSS editing at this website: www.anniemation.com... http://www.w3schools.com/css

My makeshift inline notes are done in red. If you use this code, remove all the red text.

 

body

{

    background-color: #FADA86; <---this changes the color of the background or border(the yellow color).

background-image:thumbnail5.jpg!important;< List of color codes: >www.somacon.com...

    color:            #00008B;

    font-family:      "Times New Roman",Georgia,Serif;

    cursor:           default;

}

.container, #subcontainer{

  width:              1030px;

}

#header_container .title{

  display:            none;

}

#header_container,

#main_container

{

    background:      #FF0000;

    border-color:    #39438B;

    border-style:    groove;

border-width: 8px;

    position:        relative;

    color:           #000000;

    width:           1030px;

    background-color: #39438B; #31535C;<------ background color for everything but the button container and main text area

    padding:         2px;

}

#header_container

{

    border-width:      10px 10px 0px 10px;

}

#main_container

{

    border-width:      0px 10px 10px 10px;

}

 

#site_headerimage img

{

    width:           1000px;

    margin:          auto;

}

.title

{

    border-bottom:   2px solid #CCCCCC !important;

    padding:         15px;

    display:         block;

}

#module_topnav {

boarder: 20px grove;

}

.navigation_topnav {

                        background-color: #CDCDCD; <-------background color for the button container

                        padding: 5px 5px 5px 20px;

border-width:    15px;

border-style:    groove;

}

 

.navigation_topnav ul li a {<--- This is the framework for the buttons and text inside them(resume, connections ect..)

    border-width:    5px;

    display:         inline-block;

    text-align:      center;

    width:           30%;

    padding:         5px;

    margin:          2px 2px 2px 2px;

    text-decoration: none;

    text-shadow: black 1px -1px 3px;

#filter: glow black 3;

#color: #0000ff;

#strength: 3;

    font-family:     Times New Roman;

    font-weight:     900;

    font-size:       20px;

    color:           #FFFFFF;

    background:      #40A0FF;

    border-style:    outset;

    border-color:    #40A0FF;

    border-bottom:   5px outset #40A0FF !important;

    }

.navigation_topnav .first a {

    border-left:     7px outset #40A0FF;

border-right:     7px outset #40A0FF;

}

.navigation_topnav a:hover,.navigation_topnav a.selected{<---This 'insets'/underlines text in the selected button.

 

    background:      #40A0FF;

    border-style:    inset;

text-shadow: black 2px -2px 6px;

                        text-decoration: underline;

}

.navigation_topnav a:hover span{

    text-decoration: none;

}

 

.navigation_topnav img {

    left:            -30px;

    position:        relative;

    top:             -2px;

    margin-right:    -15px;

}

#module_leftnav {  <--This is the thing that manipulates the navigation menu on the left side of the page be careful, if you change the color for these elements you have to change it all the way through all the 'left navs'

 border: 10px groove #BFC5EB!important;

                        margin-left: 5px;

width: 234px;

overflow:        hidden;

background-color: #8D98EB!important;

}

div.navigation_leftnav ul ul ul ul

{

    width:           143px;

background:      #8D98EB;

}

div.navigation_leftnav ul ul ul

{

    width:           153px;

background:      #8D98EB;

}

div.navigation_leftnav ul ul

{

    width:           163px;

background:      #8D98EB;

}

div.navigation_leftnav ul

{

    display:         block;

    float:           left;

    width:           173px;

    font:            normal 10px Verdana;

    position:        relative;

    left:            0;

    z-index:         17;

background:      #8D98EB;

}

div.navigation_leftnav ul a.li-link

{

    top:             0;

    margin-bottom:   0;

background:      #8D98EB;

}

div.navigation_leftnav ul a.underline

{

    float:           none !important;

background:      #3DAD4B;

}

div.navigation_leftnav ul ul ul ul img.edit

{

    left:            -48px;

}

div.navigation_leftnav ul ul ul img.edit

{

    left:            -38px;

}

div.navigation_leftnav ul ul img.edit

{

    left:            -28px;

}

div.navigation_leftnav ul img.edit

{

    top:             8px;

    left:            -18px;

    z-index:         5;

}

div.navigation_leftnav img.collapseablef

{

    padding:         25px 5px;

    position:        relative;

    margin:          -4px 0 0 -20px;

    z-index:         4;

    top:             6px;

}

div.navigation_leftnav ul a.selected

{

     background:      #8D98EB;

    border-style:    inset;

                        text-decoration: underline;

text-shadow: red .5px -.5px .1px;

}

div.navigation_leftnav span.selected,

div.navigation_leftnav ul a.selected,

div.navigation_leftnav ul a:hover

{

    padding:         20 10px;

    font-size:       12px;

    line-height:     12px;

    text-decoration: underline;

background:      #8D98EB;

}

div.navigation_leftnav li a

{

    display:         block;

    padding:         20px 10px;

    text-decoration: none;

    font-size:       12px;

    line-height:     12px;

background:      #8D98EB;

}

div.navigation_leftnav ul a:hover

{

    background:      #8D98EB;

}

 

div#module_leftnav p.notice,

div#module_topnav p.notice

{

    display:        none;

}

 

#portfolioright {<---manipulates the area where the majority of the text for your eportfolio is

position: relative;

left: 35px;

    border-width:    5px;

    display:         inline-block;

    width:           760px;

    padding:         15px 0;

    margin:          2px 2px 12px 2px;

    text-decoration: none;

    background:      #BFC5EB;

    border-style:    groove;

    border-color:    #40A0FF;

    border-bottom:   5px ridge #40A0FF !important;

}

}

#footer_container {

color: #FADA86;

background-color: #FADA86;

width:          1000px;

}

#footer p {<--This is the thing that makes your quote at the bottom of your page bigger

font-family: fantasy, "Courier New", Courier, monospace;

font-size: 20px;

font-weight: bolder;

color: #FF1919;

line-height: 1em;

text-align: center!important;

padding: 0 190px;

background-color: #FADA86;

width:          600px;

}

.comments_toggle {

width:          1000px;

font-size: 10px;

}

.comments_wrapper {

width:          985px;

font-size: 10px;

}

 

.m_slideshow img{

                        margin:         auto;

}

 

.m_slideshow .slideshow_thumbsnone {

  margin:           auto;

  text-align:       center;

  width:            690px;

}

 

.m_slideshow .slideshow_thumbstop {

  margin:           0 auto 10px;

  width:            690px;

}

 

.media .mediaelement,.media_content img {

    width:          650px;

    margin:         auto;

}

 

.last.span-24, div.last.span-24

{

  width:            1000px;

}

 

.m_comments .left

{

  width:            580px;

}

 

.m_comments .left input.txtbox, .m_comments .left textarea.txtarea

{

  width:            540px;

}

 

p textarea.text_input_contact

{

  height:           150px;

  width:            700px;

}..

DRAFT: This module has unpublished changes.