From ace6e45d35d5309ce82f7ab0790ba2d069a10b30 Mon Sep 17 00:00:00 2001
From: Seth Meranda <smeranda2@unl.edu>
Date: Thu, 22 Sep 2011 20:50:19 +0000
Subject: [PATCH] Move the Twitter and Facebook "tabs" up so they don't take an
entire line. Add a glow around the selected tab.
---
css/gobigred.css | 25 +++++++++++++++++++++----
index.php | 2 +-
2 files changed, 22 insertions(+), 5 deletions(-)
diff --git a/css/gobigred.css b/css/gobigred.css
index f92c456..b4382a5 100644
--- a/css/gobigred.css
+++ b/css/gobigred.css
@@ -204,22 +204,39 @@ Big Ten Video Slide
margin-bottom:24px;
}
+#maincontent #socialFeeds {
+ position:relative;
+}
/* Tab Overrides - turn these into buttons*/
#maincontent #socialFeeds ul.wdn_tabs {
border-bottom:none;
margin:10px 0;
+ display:inline-block;
+ position:absolute;
+ right:0;
+ top:0;
}
#maincontent .wdn_tabs #tabFacebook, #maincontent .wdn_tabs #tabTwitter {
padding:0;
margin:0;
height:auto;
border-radius:1em;
- margin-right:14px;
+ margin-right:7px;
+}
+#maincontent .wdn_tabs #tabFacebook.selected, #maincontent .wdn_tabs #tabTwitter.selected {
+ -webkit-box-shadow: 0px 0px 10px 0px #5aabc6;
+ -moz-box-shadow: 0px 0px 10px 0px #5aabc6;
+ box-shadow: 0px 0px 10px 0px #5aabc6;
}
#maincontent .wdn_tabs #tabFacebook:hover, #maincontent .wdn_tabs #tabTwitter:hover {
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
--moz-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
+ -moz-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
+ box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
+}
+#maincontent .wdn_tabs #tabFacebook.selected:hover, #maincontent .wdn_tabs #tabTwitter.selected:hover {
+ -webkit-box-shadow: 0px 0px 10px 0px #5aabc6, inset 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
+ -moz-box-shadow: 0px 0px 10px 0px #5aabc6, inset 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
+ box-shadow: 0px 0px 10px 0px #5aabc6, inset 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
}
#maincontent .wdn_tabs #tabFacebook {
background: #3b5998; /* Old browsers */
@@ -259,7 +276,7 @@ background: linear-gradient(top, #4099ff 0%,#3479c9 100%); /* W3C */
font-weight:bold;
font-size:0.8em;
margin:0;
- padding:3px 8px;
+ padding:1px 8px;
}
#twitterFeed ul {
padding:0;
diff --git a/index.php b/index.php
index 2e4e150..3b0fa61 100644
--- a/index.php
+++ b/index.php
@@ -164,7 +164,7 @@
</div>
<div class="grid5" id="socialFeeds">
- <h3>Conversations with UNL</h3>
+ <h3>Conversations</h3>
<ul class="wdn_tabs">
<li id="tabTwitter"><a href="#twitter">Twitter</a></li>
<li id="tabFacebook"><a href="#facebook">Facebook</a></li>
--
GitLab