Examples & Take Home Activity

Instructions:

1. Go to "Custom JS/CSS" to enter external CSS for this guide (NOTE: if this is the first external CSS element in the Custom JS/CSS make sure you open the style tag (<style>), if this is the last external CSS element make sure you close the style tag (</style>).
2. Begin with the CSS selector, which in this case is: #s-lg-guide-header-search
3. Open the CSS elements with the left brace: {
4. Enter the CSS elements you want, in this case we want to hide the element that the selector is referring to so we will use: display: none;
5. Close the CSS elements with the right brace }

End Product: 

<style>

#s-lg-guide-header-search {

display: none;

}

</style>

Instructions:

1. Go to "Custom JS/CSS" to enter external CSS for this guide (NOTE: if this is the first external CSS element in the Custom JS/CSS make sure you open the style tag (<style>), if this is the last external CSS element make sure you close the style tag (</style>).
2. Begin with the CSS selector, which in this case is: #s-lib-bc
3. Open the CSS elements with the left brace: {
4. Enter the CSS elements you want, in this case we want to hide the element that the selector is referring to so we will use: display: none;
5. Close the CSS elements with the right brace }

End Product: 

<style>

#s-lib-bc {

display: none;

}

</style>

Instructions:

1. Go to "Custom JS/CSS" to enter external CSS for this guide (NOTE: if this is the first external CSS element in the Custom JS/CSS make sure you open the style tag (<style>), if this is the last external CSS element make sure you close the style tag (</style>).
2. Begin with the CSS selectors, which in this case is: #s-lg-guide-name, #s-lg-guide-description
3. Open the CSS elements with the left brace: {
4. Enter the CSS elements you want, in this case we want to hide the element that the selector is referring to so we will use: display: none;
5. To ensure our external CSS overrides the LibGuide system we are going to use the important CSS property: display: none !important;
6. Close the CSS elements with the right brace }

End Product: 

<style>

#s-lg-guide-name, #s-lg-guide-description {

display: none !important;

}

</style>

Instructions:

1. Go to "Custom JS/CSS" to enter external CSS for this guide (NOTE: if this is the first external CSS element in the Custom JS/CSS make sure you open the style tag (<style>), if this is the last external CSS element make sure you close the style tag (</style>).
2. Begin with the CSS selector, which in this case is: #s-lg-tabs-container
3. Open the CSS elements with the left brace: {
4. Enter the CSS elements you want, in this case we want to hide the element that the selector is referring to so we will use: display: none;
5. To ensure our external CSS overrides the LibGuide system we are going to use the important CSS property: display: none !important;
6. Close the CSS elements with the right brace }

End Product: 

<style>

#s-lg-tabs-container {

display: none !important;

}

</style>

Instructions:

1. Go to "Custom JS/CSS" to enter external CSS for this guide (NOTE: if this is the first external CSS element in the Custom JS/CSS make sure you open the style tag (<style>), if this is the last external CSS element make sure you close the style tag (</style>).
2. Begin with the CSS selector, which in this case is: #custom-bootstrap-menu.navbar-default
3. Open the CSS elements with the left brace: {
4. Enter the CSS elements you want, in this case we want to add some styling elements to the content that the selector is referring to so we will use:

   font-size: 14px;
   padding: 0 15px;
   height: 52px;
   line-height: 80px;
   background-color: #0f2047;

5. Close the CSS elements with the right brace }

End Product: 

<style>

#custom-bootstrap-menu.navbar-default {

font-size: 14px;

padding: 0 15px;

height: 52px;

line-height: 80px;

background-color: #0f2047;

}

</style>

Instructions:

1. Go to "Custom JS/CSS" to enter external CSS for this guide (NOTE: if this is the first external CSS element in the Custom JS/CSS make sure you open the style tag (<style>), if this is the last external CSS element make sure you close the style tag (</style>).
2. Begin with the CSS selector, which in this case is: #custom-bootstrap-menu.navbar-default.navbar-nav>li>a
3. Open the CSS elements with the left brace: {
4. Enter the CSS elements you want, in this case we want to add some styling elements to the content that the selector is referring to so we will use:

   color: #ffffff;
   font-weight: bold;

5. Close the CSS elements with the right brace }

End Product: 

<style>

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {

color: #ffffff;

font-weight: bold;

}

</style>

Instructions:

1. Go to "Custom JS/CSS" to enter external CSS for this guide (NOTE: if this is the first external CSS element in the Custom JS/CSS make sure you open the style tag (<style>), if this is the last external CSS element make sure you close the style tag (</style>).
2. Begin with the CSS selector, which in this case is: #custom-bootstrap-menu.navbar-default.navbar-nav>li>a
3. Since we are specifically referring to what happens to this element when you mouse over it we are going to add "hover to the selector: #custom-bootstrap-menu.navbar-default.navbar-nav>li>a:hover
4. Open the CSS elements with the left brace: {
5. Enter the CSS elements you want, in this case we want to add some styling elements to the content that the selector is referring to so we will use:

   background-color: #15316b;

6. Close the CSS elements with the right brace }

End Product: 

<style>

#custom-bootstrap-menu.navbar-default .navbar-nav>li>ali:hover {

background-color: #15316b;

}

</style>