Difference between revisions of "Template:Macquarie Australia/TestCSS"
(Changed table width) |
(Add new class with center text) |
||
(51 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | [[File:MqAust_Burpey_v46-bubblePetri44_Summary03.png|965px]] | + | [[File:MqAust_Burpey_v46-bubblePetri44_Summary03.png|965px|link=]] |
− | <html> | + | <html lang="en-AU"> |
<style type="text/css"> | <style type="text/css"> | ||
/* HIDE WIKI MARKUP */ | /* HIDE WIKI MARKUP */ | ||
− | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear { | + | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear { /*-- hides default wiki settings --*/ |
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #content { /* Removes the standard wiki black border */ | ||
+ | border:none; | ||
+ | /* padding: 0px 0px 0px 0px; */ | ||
+ | } | ||
/* PAGE LAYOUT */ | /* PAGE LAYOUT */ | ||
body { /* Holds page background formatting */ | body { /* Holds page background formatting */ | ||
+ | background-image: url("https://static.igem.org/mediawiki/2015/6/62/MqAust_ChlamyOneLine.png"); | ||
/* background: linear-gradient(#7ec700, #43733e); */ /* mq harmony light green to dark green commented out */ | /* background: linear-gradient(#7ec700, #43733e); */ /* mq harmony light green to dark green commented out */ | ||
− | background-color: #009933; | + | /* background-color: #009933; middle harmony websafe green plain colour background */ |
+ | background-color: #ccffcc; /* pale websafe green background */ | ||
+ | } | ||
+ | |||
+ | #navigation a { /* top menu style */ | ||
+ | display:block; /* leave this block to keep the nav the same */ | ||
+ | float: left; /* has to be left for nav to work */ | ||
+ | font-size: medium; | ||
+ | padding: 1.56em; | ||
+ | font-family: Verdana, Geneva, sans-serif; | ||
+ | background-color: #66cc66; /* light green */ | ||
+ | color: #000000; /* #000000 is black font */ | ||
} | } | ||
Line 28: | Line 47: | ||
/* height: 35px; Comment: setting this affects the whole page*/ | /* height: 35px; Comment: setting this affects the whole page*/ | ||
/* background-color: #0e232f; */ | /* background-color: #0e232f; */ | ||
− | + | padding: 0px; | |
/* border-top: 6px solid #EE3e53; */ | /* border-top: 6px solid #EE3e53; */ | ||
− | |||
} | } | ||
Line 40: | Line 58: | ||
/* background-color: #f2f2f2; */ | /* background-color: #f2f2f2; */ | ||
/* border-bottom: 1px solid #ccc; */ | /* border-bottom: 1px solid #ccc; */ | ||
+ | border-collapse: collapse; /* Prevents a double line for both th td borders */ | ||
+ | border: 0px; | ||
/* no colours, borders, width, or float here */ | /* no colours, borders, width, or float here */ | ||
} | } | ||
Line 49: | Line 69: | ||
.contentContainer { /* Creates the container for the content - class */ | .contentContainer { /* Creates the container for the content - class */ | ||
/* background-color: #EEEDEA; */ | /* background-color: #EEEDEA; */ | ||
− | width: | + | width: 100%; |
float: left; | float: left; | ||
− | padding: | + | padding: 4px; |
/* border-top: 6px solid #EE3e53; */ | /* border-top: 6px solid #EE3e53; */ | ||
+ | } | ||
+ | |||
+ | .honyWhite { /* Creates unique HONY table class */ | ||
+ | border-collapse: collapse; /* Prevents a double line for both th td borders */ | ||
+ | width: 100%; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | .centreItInline { /* Horizontal positioning */ | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | |||
+ | .centreStuffInline { /* Horizontal positioning */ | ||
+ | text-align: center; | ||
} | } | ||
Line 64: | Line 100: | ||
.regularTable { /* Creates regular table class */ | .regularTable { /* Creates regular table class */ | ||
− | border-collapse: collapse; | + | border-collapse: collapse; /* Prevents a double line for both th td borders */ |
− | width: | + | width: 96%; |
text-align: left; | text-align: left; | ||
} | } | ||
Line 77: | Line 113: | ||
} | } | ||
− | .regularHyperlink { /* | + | .regularHyperlink { /* Creates regular hyperlink class */ |
/* no styling required here so far */ | /* no styling required here so far */ | ||
} | } | ||
Line 83: | Line 119: | ||
/* VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */ | /* VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */ | ||
− | /* Class | + | /* Class MainMenu styling */ |
.mainmenu table { /* Styling of the menu table class */ | .mainmenu table { /* Styling of the menu table class */ | ||
Line 89: | Line 125: | ||
font-size: 16px; | font-size: 16px; | ||
color: #ffffff; | color: #ffffff; | ||
+ | border: 0; | ||
+ | border-spacing: 0; | ||
+ | text-align: center; | ||
+ | padding: 0; | ||
} | } | ||
Line 98: | Line 138: | ||
} | } | ||
− | /* Class | + | #rcornersMain { |
+ | border-radius: 40px 5px; | ||
+ | background: #66cc66; /* #66cc66 light green */ | ||
+ | /* padding: 20px; */ | ||
+ | /* width: 200px; */ | ||
+ | /* height: 150px; */ | ||
+ | } | ||
+ | |||
+ | /* Class MenuHighlight styling */ | ||
.menuHighlight a { /* Styling of the menu table highlighted hyperlinks */ | .menuHighlight a { /* Styling of the menu table highlighted hyperlinks */ | ||
Line 106: | Line 154: | ||
} | } | ||
− | /* Class | + | #rcornersHighlight { |
+ | border-radius: 40px 5px; | ||
+ | background: #009933; /* #009933 dark green */ | ||
+ | /* padding: 20px; */ | ||
+ | /* width: 200px; */ | ||
+ | /* height: 150px; */ | ||
+ | } | ||
+ | |||
+ | /* Class ContentContainer styling */ | ||
.contentContainer h1, h2, h3, h4, h5, h6 { /* Colour and font family */ | .contentContainer h1, h2, h3, h4, h5, h6 { /* Colour and font family */ | ||
Line 129: | Line 185: | ||
} | } | ||
− | /* Class | + | /* Class honyWhite styling */ |
+ | |||
+ | .honyWhite table { /* default table formatting */ | ||
+ | font-family: Verdana, Geneva, sans-serif; | ||
+ | color: #000000; /*black*/ | ||
+ | table-layout: fixed; /* prevents auto-resizing of column widths */ | ||
+ | border-spacing: 10px 10px; | ||
+ | } | ||
+ | |||
+ | .honyWhite th { /* default table header formatting */ | ||
+ | font-family: Verdana, Geneva, sans-serif; | ||
+ | border: 0px solid white; | ||
+ | color: #000000; /*black*/ | ||
+ | font-size: 14px; | ||
+ | padding: 8px; | ||
+ | } | ||
+ | |||
+ | .honyWhite td { /* default table detail formatting */ | ||
+ | font-family: Verdana, Geneva, sans-serif; | ||
+ | border: 0px solid white; | ||
+ | color: #000000; /*black*/ | ||
+ | font-size: 14px; | ||
+ | padding: 8px; | ||
+ | vertical-align: text-top; | ||
+ | } | ||
+ | |||
+ | .honyCol40 { /* For fixed table Column width */ | ||
+ | width: 40%; | ||
+ | } | ||
+ | |||
+ | .honyWhite a { /* default table detail formatting */ | ||
+ | font-family: Verdana, Geneva, sans-serif; | ||
+ | display:inline; /* here to keep hyperlinks inline */ | ||
+ | font-weight: bold; | ||
+ | color: #0645ad; /*hyperlink blue*/ | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | |||
+ | /* Class SpecialInline styling */ | ||
figure.specialInline { /* Styling for figures in specialInline class */ | figure.specialInline { /* Styling for figures in specialInline class */ | ||
Line 140: | Line 234: | ||
figcaption.specialInline { /* Styling for figure captions - class */ | figcaption.specialInline { /* Styling for figure captions - class */ | ||
+ | font-family: Verdana, Geneva, sans-serif; | ||
display: block; /* here to keep the caption underneath the figure */ | display: block; /* here to keep the caption underneath the figure */ | ||
text-align: left; | text-align: left; | ||
} | } | ||
− | /* | + | /* WRAPPED IMAGE Class styling */ |
− | figure. | + | figure.wrappedImage { /* Styling for figures in hony class */ |
font-family: Verdana, Geneva, sans-serif; | font-family: Verdana, Geneva, sans-serif; | ||
+ | font-size: 14px; | ||
+ | display: table; /* Required for text wrapping in caption */ | ||
+ | width: 450px; /* This can be any width, so long as it's narrower than any image */ | ||
margin-top: 1em; | margin-top: 1em; | ||
margin-bottom: 1em; | margin-bottom: 1em; | ||
− | margin-left: 20px; | + | margin-left: 0px; |
− | margin-right: 20px; | + | margin-right: 0px; |
+ | } | ||
+ | |||
+ | figcaption.wrappedImage { /* Styling for figure captions - class */ | ||
+ | font-family: Verdana, Geneva, sans-serif; | ||
+ | font-size: 14px; | ||
+ | /* display: block; here to keep the caption underneath the figure */ | ||
+ | text-align: left; | ||
+ | display: table-row; /* Required for text wrapping in caption */ | ||
+ | } | ||
+ | |||
+ | img.wrappedImage { /* Styling for figure captions - class */ | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | /* TEXT IN COLUMNS Class styling */ | ||
+ | |||
+ | .divideTextTwoColumns { | ||
+ | /* Create multiple columns */ | ||
+ | -webkit-column-count: 2; /* Chrome, Safari, Opera */ | ||
+ | -moz-column-count: 2; /* Firefox */ | ||
+ | column-count: 2; | ||
+ | /* Gap between columns */ | ||
+ | -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ | ||
+ | -moz-column-gap: 40px; /* Firefox */ | ||
+ | column-gap: 40px; | ||
+ | /* Line between columns */ | ||
+ | -webkit-column-rule: 1px dashed #009933; /* Chrome, Safari, Opera */ | ||
+ | -moz-column-rule: 1px dashed #009933; /* Firefox */ | ||
+ | column-rule: 1px dashed #009933; | ||
+ | font-family: Verdana, Geneva, sans-serif; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | |||
+ | /* REGULAR Class styling */ | ||
+ | |||
+ | figure.regularInline { /* Styling for figures in regularInline class */ | ||
+ | font-family: Verdana, Geneva, sans-serif; | ||
+ | /* margin-top: 1em; removing this styling for now */ | ||
+ | /* margin-bottom: 1em; removing this styling for now */ | ||
+ | /* margin-left: 20px; Comment: adds a buffer I think */ | ||
+ | /* margin-right: 20px; Comment: adds a buffer */ | ||
} | } | ||
figcaption.regularInline { /* Styling for figure captions - class */ | figcaption.regularInline { /* Styling for figure captions - class */ | ||
+ | font-family: Verdana, Geneva, sans-serif; | ||
display: block; /* here to keep the caption underneath the figure */ | display: block; /* here to keep the caption underneath the figure */ | ||
text-align: center; | text-align: center; | ||
Line 162: | Line 302: | ||
font-family: Verdana, Geneva, sans-serif; | font-family: Verdana, Geneva, sans-serif; | ||
color: #000000; /*black*/ | color: #000000; /*black*/ | ||
+ | table-layout: fixed; /* prevents auto-resizing of column widths */ | ||
} | } | ||
Line 177: | Line 318: | ||
font-size: 12px; | font-size: 12px; | ||
padding: 4px; | padding: 4px; | ||
+ | } | ||
+ | |||
+ | .regularCol10 { /* For fixed table Column widths */ | ||
+ | width: 10%; | ||
+ | } | ||
+ | .regularCol20 { /* For fixed table Column widths */ | ||
+ | width: 20%; | ||
+ | } | ||
+ | .regularCol30 { /* For fixed table Column widths */ | ||
+ | width: 30%; | ||
+ | } | ||
+ | .regularCol40 { /* For fixed table Column widths */ | ||
+ | width: 40%; | ||
} | } | ||
Line 226: | Line 380: | ||
color: #0645ad; /*hyperlink blue*/ | color: #0645ad; /*hyperlink blue*/ | ||
text-decoration: underline; | text-decoration: underline; | ||
+ | /* display:inline; here to keep hyperlinks inline - N.B. made no difference figure caption */ | ||
} | } | ||
Line 257: | Line 412: | ||
/* color: #000000; black*/ | /* color: #000000; black*/ | ||
/* } */ | /* } */ | ||
+ | |||
+ | caption { /* styling for table captions */ | ||
+ | /* none yet */ | ||
+ | } | ||
+ | |||
+ | figure { /* Styling for figure captions - class */ | ||
+ | font-family: Verdana, Geneva, sans-serif; | ||
+ | background-color: #ffffff; | ||
+ | padding: 5px; | ||
+ | /* display: table; */ | ||
+ | } | ||
+ | |||
+ | figure img { | ||
+ | display: block; | ||
+ | /* width: 100%; */ | ||
+ | } | ||
figcaption { /* Styling for figure captions - class */ | figcaption { /* Styling for figure captions - class */ | ||
font-family: Verdana, Geneva, sans-serif; | font-family: Verdana, Geneva, sans-serif; | ||
− | display: block; | + | /* display: inline-block; here to keep the caption underneath the figure */ |
+ | display: inline; /* trying to remove hyperlink block? */ | ||
+ | color: #000000; /*black*/ | ||
+ | text-align: left; | ||
+ | /* display: table-caption; */ | ||
+ | /* table-layout: auto; */ | ||
+ | caption-side: bottom; | ||
+ | background: #ffffff; | ||
+ | padding: 0 5px 5px; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | ul { | ||
+ | font-family: Verdana, Geneva, sans-serif; | ||
+ | list-style-type: circle; | ||
+ | } | ||
+ | |||
+ | ol { | ||
+ | font-family: Verdana, Geneva, sans-serif; | ||
+ | list-style-type: circle; | ||
} | } | ||
Line 304: | Line 494: | ||
} | } | ||
− | a { | + | a { /* hyperlink formatting */ |
− | font-family: Verdana, Geneva, sans-serif; | + | font-family: Verdana, Geneva, sans-serif; |
display:inline; /* here to keep hyperlinks inline */ | display:inline; /* here to keep hyperlinks inline */ | ||
+ | } | ||
+ | |||
+ | img { /* image formatting */ | ||
+ | max-width:100%; | ||
} | } | ||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 13:14, 7 September 2015