How to Control and Override CSS by Including a CSS Link

Size: px

Start display at page:

Download "How to Control and Override CSS by Including a CSS Link"

Audra Wilcox
5 years ago
Views:

How to Control and Override CSS by Including a CSS Link Using CSS Includes User Documentation for OU By Lucero, 6-25-2014 CSS styles and definitions can be overwritten and subsequently controlled and

1 How to Control and Override CSS by Including a CSS Link Using CSS Includes User Documentation for OU By Lucero, CSS styles and definitions can be overwritten and subsequently controlled and defined by including a local style sheet. Here are a few things to keep in mind when handling CSS: The default out of the box styles automatically cascade down from a style sheet located in the www directory. This style sheet is included automatically in the site upon site creation and is in effect. Always remember, as it relates to CSS development, Last in, wins, meaning that if the same element is defined across multiple style sheets, the last style definition for any particular element as it is declared in order by link reference, local style definition on the web page, span tag, or inline style attribute in that web page is the one that will display. A user can see which CSS elements are overwritten by opening a webpage in a browser, right clicking on an element on the page, and then Inspecting Element. The CSS styles will show in the bottom right cell of the browser, and any styles that have a line through them means that particular style has been overwritten and is no longer affecting the element. In the screenshot below, a user can see that the My Home

element in <h1> tags is the element that is being inspected. Furthermore, in the bottom right hand cell, the inspector shows that the <h1> tag is being defined by the test.css file.

2 element in <h1> tags is the element that is being inspected. Furthermore, in the bottom right hand cell, the inspector shows that the <h1> tag is being defined by the test.css file. The list of CSS definitions (and file locations) in the right bottom cell that define the <h1> tag show the definitions in the order of last in to first in, so it does make sense to see that <h1> definitions are crossed out (and no longer affecting the display on that element) as they are listed below the definition that is coming from the test.css file. Remember that last in wins and test.css is declared after the main www style.css file is being called, which can also be verified by choosing to view source and then looking at the <head> section of the web page. The uark-style.css file is called on line 24 and the test.css file is called on line 33. Keeping the above bullet points in mind, in order to place custom CSS styles into a website or override the currently defined styles, a user must: 1) Upload a CSS file that contains definitions for elements 2) Link to the CSS file in the _site-headcode.inc file In order to upload a CSS file, do the following: 1) Create a CSS file on your desktop and name it with any combination of lowercase letters, numbers, and/or dashes. This file will not have the <style></style> tags in the

3 contents of it, but ONLY the definitions for the elements. So, in the above example, if the source is viewed of test.css, this is what the contents of that file is (notice no <style> or </style> tags present) : h1 { } color: #CC3300; 2) Login to the CMS and go to your website. Make sure you are at the root or home directory of your website. You can do this by selecting Pages from the top nav link, Content and then by subsequently clicking the house icon that displays over the file and folder listing. 3) Navigate to the folder, _resources, and then to the css folder. If the css folder doesn t exist, a user can create that by clicking on the dropdown arrow on the right side of the +New green button at the top right of the webpage while in the _resources directory,

4 then select Folder, and fill in the form, taking note of what the name of the folder is, which should be for this case, css. 4) Click on the css folder, and then click on the Upload button, which is the icon that looks like a green arrow pointing up, and located right next to the green +New button. Click the gray Add Files button in the modal window and select the CSS file that you created on your desktop, and finally, click the blue Start Upload button in the bottom right corner of the modal window. 5) Check out the newly uploaded CSS file and then publish it to production.

5 6) If the user had to create the css folder, then with a request to publish the css folder to production. Please be sure to give the URL or site name in the request. Now, link to the new CSS file: 1) While in the CMS on your website, click Pages from the top nav link, Content, and then go to the house icon for home or root directory. 2) The user should then see a file called, _site-headcode.inc. Check out this file, and hover over to the right link, Edit, and then click Source,

and add (append) the following line at the end of the file (given that the directory name, location or filepath, and CSS filename are what is indicated below.

6 and add (append) the following line at the end of the file (given that the directory name, location or filepath, and CSS filename are what is indicated below. If not, point to the correct filepath): <link href="_resources/css/test.css" rel="stylesheet" /> 3) Save the file, _site-headcode.inc, and then publish it to production.

7 4) Upon refreshing your web page(s) in your browser, you should see the elements now being affected by the new CSS file. If your new CSS is not displaying, go back and be sure that you have published all the newly files and that the file path of your new CSS file is correct when making that link declaration in the file, _siteheadcode.inc.

How to Manage Left Navigation Menus and Breadcrumbs in OU

How to Manage Left Navigation Menus and Breadcrumbs in OU By Lucero (6/24/14) Files that require publishing in the root directory or any newly created directory): Any newly created directory _nav.inc _props.pcf