/* File: custom.css Description: Custom styles for Thesis BASIC USAGE: If you have enabled the custom stylesheet in the Thesis options panel, the tag will be appended with the "custom" class, like so: . You can use the "custom" class to override *any* CSS declarations contained in the style.css file. For example, if you wish to change the default link color to green, you would add the following declarations to this file: .custom a, .custom a:visited { color: #090; } <--- This makes links green .custom a:hover { color: #00f; } <--- This makes links blue when you mouse over them WHY THIS WORKS: By using the "custom" class, you are creating more specific CSS declarations for HTML elements. CSS styling is applied through rules of specificity, and because declarations prepended with .custom are more specific, they get applied when the page is rendered! More information about styling your Thesis installation using this file can be found in the User's Guide: http://diythemes.com/thesis/rtfm/customizing-thesis-with-customcss/ */ /* For my own reference for writing code later, go to this site for syntax http://www.w3schools.com/, this site gives the syntax and I can get a general sense of the proper way to write this code. I used the example above of changing the link color to change the link color of the tabbed widget below. I saw the general structure and then I applied the same syntax structure to change it. I can do the same for everything else. Just remember these notes for future changes. */ /* starting here is all the personal code that I have added. */ /* code for items in my header */ .custom #banner_logo {position:absolute;float:left;} .custom #googletranslate {margin-left:85em;margin-top:14em;margin-bottom:0em;} /* change padding-bottom back to 5px when I add the feedcount back */ .custom #headersubscribebox { border:1px solid #000000; padding-left:10px; padding-bottom:25px; padding-top:10px; margin-left:2em; margin-right:2em; margin-top:2em; margin-bottom:0em; font-size:14px; background:#ffffff;} /* I added the following code, Set 1, from custom_backgrounds.css which was a download for backgrounds from the thesis website at http://diythemes.com/thesis/rtfm/custom-backgrounds/ I can refer to this site for changing backgrounds if I want later. */ /*---:[ Set 1: solid background with slick borders around your "page" area]:---*/ body.custom { background: #003366; } .custom #container { margin-top: 2em; margin-bottom: 2em; padding: 0em; background: #003366; border: 0.4em solid #ffffff; } .custom #page { background: #fff; } /*---:[ end Set 1 ]:---*/ /* This code is to style the tabbed widget, found at this site http://mattflies.com/tech/another-tabbed-widget-for-thesis-tutorial-better/ 0.667 */ /*Tabbed Widget Version 2.0*/ /* code that changes the outside box of the widget and its placement, I am eliminating (commenting out) the white box around the widget because it is in the sidebar and I want the background, I can put it back if i'd like. Since I removed the outer box, I have to individually modify .tabnav and .taddiv below, which is ok because I want to make it look good. */ /* .tabbedwidget { margin-top: 1em; margin-right: 2em; margin-left:2em; margin-bottom:1em; background: #ffffff; padding-right: 0em; padding-top: 0.3em; border: 0px solid #ffffff; } */ /* code that changes how much space exists between navigation tabs and their associated content beneath them */ .custom .tabnav { margin-bottom: 0.2em; margin-top: 2em; margin-left:2em; } /* code that changes how much space exists between each navigation tab */ .custom .tabnav li { display: inline; list-style: none; padding-right: 0px; } /* code that changes the background, border, and text colors of inactive navigation tabs */ .custom .tabnav li a { background: #eeeeee; border-top: 1px solid #aaaaaa; border-right: 1px solid #aaaaaa; border-left: 1px solid #aaaaaa; padding: 2px 4px 2px 4px; color: #000000; font-size: 125% ; } /* code that changes the background color of active navigation tabs */ .custom .tabnav li a:active, .custom .tabnav li.ui-tabs-selected a { background: #ff9933; border: 1px solid #ff9933; color: #ffffff; } .custom .tabnav li a:hover{ background: #003366; border: 1px solid #003366; color: #ffffff; } /* code that changes the background color of content area of associated tabs */ .custom .tabdiv { margin-top: 0em; margin-right:2em; margin-left:2em; margin-bottom:2em; background: #ffffff; border: 2px solid #ff9933; padding: 10px; } /* code that changes the color of the link in the tabbed widget to black */ .custom .tabdiv a, .custom .tabdiv a:visited { font-size: 14px; text-decoration: underline;} /* code that changes space between links in the tabbed widget */ .custom .tabdiv li { list-style: none; margin-bottom: 1em; } /* code for the java script written into header script to hide the tabs and add dynamic nature of widget */ .custom .ui-tabs-hide { display: none; } /* This ends tabbed widget css coding */ /* this code changes my sidebar color. The smaller the number the larger the color expands to the left. Keep in mind for adjusting. I must also remainder to make adjustments to this if I change my site layout. I looked at code using firefox firebug */ .custom #content_box {background:transparent url(images/bg-content-box.gif) repeat-y scroll 61.25em 0;margin-top:3.5em;} /* google b4 content adsense unit */ #googleb4content { float:left; position:relative; margin-top:1em; } /* the following 2 lines of code changes the searchbox and input of google search */ .custom #cse-search-box { padding:0.25em 0.25em 0em 0em;margin-top: 0px;margin-bottom:0em;margin-left:0em;float:right;} .custom #cse-search-box input {margin:0px; padding: 4px 8px 4px 8px; font-size:14px; color:#000000; background:#eeeeee;} /*code that changes the customized footer I added to be a column rather than rows */ .custom #footer div.col { float:left; margin:5px 3px 0px 0px; padding-left:10px; text-align:left; width:24em; } .custom #footer {background:#eeeeee;color:#000000;border-top: 1px solid #aaaaaa;border-left: 1px solid #aaaaaa;border-right: 1px solid #aaaaaa;margin-bottom:0em;} #footer a, #footer a:visited { color:#000000;} /*code the modifies after_footer items */ .custom #after_footer_row1 {border-left: 1px solid #aaaaaa;border-right: 1px solid #aaaaaa;border-bottom: 1px solid #aaaaaa;background: #eeeeee;position:relative;} /*code to modify box and position of subscribe box, changing padding-bottom back to 0em when I add feedcount back */ .custom #subscribe_box { margin-top: 0em; margin-right: 0em; margin-left:0.5em; margin-bottom:0em; background: #eeeeee; padding: 1em 1em 3em 1em; border: 1px solid #000000; text-align:left; position:absolute; } /*styling of the individual interior items of the entire subscribe box */ .custom #subscribe_box_title {font-size:14px;} .custom #benefitslink {font-size:14px;} .custom #RSS_image {position: absolute;margin: 0.5em 0em 0.5em 0em;} .custom #feedburner_rss_link {padding-top:0em;margin: .9em 0em 1em 2.5em;font-size:14px;} /*styling of the interior items of just the email subscribe area */ .custom #email_form {font-size:14px;padding-top:0.5em;} .custom #email_form_title {margin-bottom:0em;} .custom #feedburner_submitbutton {position: absolute;padding: 1px 1px 1px 1px;} .custom #feedcount {float:right;margin-right:0em} .custom #thesisfooterad {margin-left:44em;} .custom #footer_logo {margin-left:10em;} /*end row 1 of after_footer styling */ /* google adsense after postbox ad unit styling */ .custom #after_post_adunit {text-align:center;margin-top:1em;} /* this code is for styling my flickrrss plugin currently on sidebar */ .custom #flickr-sidebar img {border: 4px solid #ccc; margin: 3px;} .custom #flickr-sidebar img:hover {border: 4px solid #003366;} .custom #flickr-sidebar { margin-top: 0em; margin-right: 0em; margin-left:0em; margin-bottom:1em; background: #eeeeee; padding: 0.25em; text-align:center; border: 1px solid #aaaaaa; }