ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   meaghen
   Member

   Hello -
   The blog I'm working on is http://www.hamptonscreative.com/interact/

   1. I'd like the "Share This buttons" to remain on one line. They currently wrap so that StumbleUpon ends up on a second line. I can't find anything in the CSS that would allow me to adjust the width of the ul container or any other adjustment that would affect these buttons. If I extend #container a white area on the right blocks the buttons as though they are underneath.

   2. I can't get the navigation to have transparent background on hover.

   Thank you for any help - I'm new to this!

   Here is my custom CSS:

   body {
   background-image:url('http://www.hamptonscreative.com/images/water-background.jpg');
   background-repeat:repeat-x;
   background-position:left top;
   margin-top:0;
   margin-left:0;
   padding-top:0;
   background-color:#1B79C9;
   font-family:Georgia, Times, serif;
   }
   
   #wrapper {
   width:960px;
   margin-right:auto;
   margin-left:auto;
   margin-top:-20px;
   padding-top:0;
   position:relative;
   height:auto;
   z-index:10;
   }
   
   #header {
   height:292px;
   width:960px;
   margin-right:auto;
   margin-left:auto;
   position:relative;
   background-image:url('http://www.hamptonscreative.com/images/word-of-mouth_02.png');
   background-repeat:no-repeat;
   background-position:center top;
   z-index:40;
   }
   
   #main {
   width:918px;
   background-color:#FFF;
   margin-top:-2px;
   padding:0;
   }
   
   #container {
   margin-right:auto;
   margin-left:auto;
   }
   
   #content {
   height:auto;
   position:relative;
   z-index:18;
   top:-1px;
   padding-top:30px;
   padding-left:0;
   margin:0 auto;
   }
   
   .entry-content {
   padding:0;
   }
   
   .aside {
   color:#000000;
   }
   
   .main-aside {
   right:40px;
   width:200px;
   }
   
   #primary {
   border:none;
   }
   
   th,td {
   border:none;
   padding:0;
   }
   
   tr {
   border-bottom:none;
   }
   
   table {
   border:none;
   font-size:100%;
   }
   
   .entry-title {
   font-family:Georgia, Times, serif;
   color:#cc9900;
   font-size:24px;
   }
   
   .entry-title a:link,.entry-title a:visited {
   color:#cc9900;
   }
   
   .entry-title a:hover {
   color:#000000;
   }
   
   .entry-meta {
   margin-bottom:20px;
   }
   
   #access {
   border-bottom:none;
   height:40px;
   text-align:center;
   overflow:visible;
   z-index:100;
   width:950px;
   position:relative;
   top:9px;
   left:10px;
   }
   
   .sf-menu {
   border-right:none;
   float:left;
   color:#ffffff;
   }
   
   .sf-menu a,.sf-menu a:visited {
   display:block;
   text-decoration:none;
   border-top:none;
   border-left:none;
   border-bottom:none;
   border-right:none;
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:16px;
   font-weight:bold;
   text-align:center;
   color:#fff;
   padding:13px 10px;
   }
   
   .sf-menu li a {
   color:#ffffff;
   background-color:transparent;
   border-color:none;
   }
   
   .sf-menu li {
   background-color:transparent;
   }
   
   .sf-menu li ul li {
   background-color:transparent;
   border:none;
   }
   
   .sf-menu li.sfHover a {
   color:#ffffff;
   background-color:rgba(0,184,241,.9);
   }
   
   .sf-menu li a:hover {
   color:#ffffff;
   background-color:rgba(0,184,241,.9);
   }
   
   .sf-menu .current_page_item a,.sf-menu .current_page_ancestor a,.sf-menu .current_page_parent a {
   border-bottom-color:none;
   background-color:rgba(0,184,241,.9);
   }
   
   .sf-menu li .sf-sub-indicator {
   display:none;
   }
   
   .sf-menu li:hover ul,.sf-menu li.sfHover ul {
   top:42px;
   }
   
   .sf-menu ul ul {
   margin-top:0;
   }
   
   .sf-menu li li a,.sf-menu li.sfHover li a {
   color:#ffffff;
   background-color:rgba(0,184,241,.9);
   border-bottom:none;
   border-color:none;
   }
   
   .sf-menu li li.sfHover a {
   color:#ffffff;
   text-decoration:underline;
   }
   
   .sf-menu li li a:hover,.sf-menu li.sfHover li a:hover {
   color:#ffffff;
   text-decoration:underline;
   }
   
   .sf-menu li li.current_page_item a,.sf-menu li li.current_page_ancestor a,.sf-menu li li.current_page_parent a {
   text-decoration:underline;
   }
   
   .sf-menu li li .sf-sub-indicator {
   display:none;
   }
   
   .sf-menu li li li a,.sf-menu li.sfHover li li a {
   color:#ffffff;
   background-color:rgba(0,184,241,.9);
   border:none;
   }
   
   .sf-menu li li li a:hover,.sf-menu li.sfHover li li a:hover {
   color:#ffffff;
   background-color:rgba(0,184,241,.9);
   }
   
   .sf-menu li li li.current_page_item a,.sf-menu li li li.current_page_ancestor a,.sf-menu li li li.current_page_parent a {
   text-decoration:underline;
   }

   Posted 11 years ago #
2. 

   proto
   Member

   Hello there,

   1: I think I can help with your navigation or at least point you in the right direction:

   For you menu transparency upon hovering try adding the following to your existing css styling:

   .sf-menu li a:hover, .sf-menu li.sfHover a  {opacity: 0.0;
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
   	filter: alpha(opacity=00);}

   The first one 'opacity: 0.0' is for non IE browsers. The second one an MS filter and third ones for IE.

   You would want to add this to all hovering parents and children in your menu. Let me know if this doesn't make sense.

   As for getting your share buttons to appear on the same line from looking at the CSS the containing element needs restyling, try adding this to your stylesheet:

   .snap_nopreview sharing robots-nocontent {width: 540px;}

   Are you using a plugin for your share buttons, if yes is there any documentation that tells you how to target the CSS?

   Posted 11 years ago #
3. 

   meaghen
   Member

   Thanks so much for your suggestion! I will try and report back. I don't think the share this is a plug-in, but I'll investigate that. I'm restyling from a wordpress.com site and different theme. Thanks again!

   Posted 11 years ago #
4. 

   proto
   Member

   There are many capable people on here, I'm not just being modest, but many more capable than me, but the above is my suggestion, someone else here may have a better idea, but I thought I would offer my 2 pence worth!

   Posted 11 years ago #
5. 

   meaghen
   Member

   Hi Proto - thanks for your suggestion to check plug-ins. I discovered that the Share This buttons were JetPack and resolved the problem by just removing the "Share This" text from that line. Seems to work. The CSS for .snap_nopreview did not seem to affect this container. Ah, well. Not perfect, but it is okay as it is.

   The transparency css caused a white background to appear on hover. This is what happens whenever I try to change .sf-menu li.sfHover a or.sf-menu li a:hover to background-color:transparent. Reverts to white background and there is a gray border on the drop-down menu. I will look at the original css source to see if I've missed something, but I tried to copy all navigation related css from default.css.

   If you have any other thoughts, I will listen gladly! Thanks again.

   Posted 11 years ago #
6. 

   meaghen
   Member

   Border on drop down menu solved by adding .sf-menu ul {border-right:none;border-bottom:none;}

   Posted 11 years ago #
7. 

   meaghen
   Member

   Transparency issue resolved by adding: .sf-menu li:hover,.sf-menu li.sfHover,.sf-menu a:focus,.sf-menu a:hover,.sf-menu a:active {background:transparent;}. I needed to check the original default.css file to make sure I had all of the styles related to the navigation in my css. Hope this helps someone else!

   Posted 11 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.