I am trying to add custom images for social follow link buttons to my website sidebar menu. Right now I am stuck on the Facebook one as my first test, but ideally want to add others later. (which I am realizing might not be easy with the method I have chosen)
I tried using various methods, the most success I have gotten so far is the method at DIY Themes (this article) and on my site style.css the code I added is below:
#menu-item-127 a {
display:block;
height:83px; width:75px;
padding:0px;
margin-left:6px;
outline:none;
/*text-indent:-9999px;*/
background-image:url('/wp-content/uploads/2012/09/Grunge-Facebook-Stamp-small-sprite.png');
background-position:0 -82px;
}
#menu-item-127 a:hover { background-position:0 0px; }
The problem is that when you hover over the link the background image disappears, it does not transition to the "active" version of the sprite as it should.
Secondly the text does not indent off the screen, but stays on top of the image (I know that part is commented out in the code above, because I turned it on and off to test what was going on, doesn't make a difference)
Third problem is that the hover activation area is to large, it stretches the entire width of the menu bar instead of just right on top of the image. So if you are to the right of the image it is still considered "hovering", even though you cannot click on the FB link.
It seems to be related to some other part of my style.css because even if I remove the a:hover part of the above code it still makes the background image disappear. I have adjusted every variable and inspected every element that I know how, I am stumped on this.
My website is americagonepostal.com. The base theme is Hum.
BTW, I have never really done CSS before. I am doing this site as a favor for my cousin who is totally tech retarded, but is an artist so has very specific aesthetic expectations. I have just been hacking away without any idea what I am doing so if there is a better way to put images with links in that side-menu area, I am all ears. It does not necessarily have to "highlight" when you hover, but that would be a nice touch.
Ideally I'd like to add Facebook, Twitter and RSS buttons in the same grungy stamp style, but horizontally. Is that possible to fit all 3 buttons on one horizontal using custom menus as I have done?
Thanks.
Try this:
#menu-item-127 a:hover {
background: url("/wp-content/uploads/2012/09/Grunge-Facebook-Stamp-small-sprite.png") !important;
The !important will override any inherited styles
Text Indenting : Change text-align property in the branding section:
#branding { border: 0 none;
bottom: 0;
padding-top: 5em;
text-align: none;
top: 0; }
Then override the same way:
#menu-item-131 a:hover { background-position: 0 0 !important;
text-indent: -999px !important;}
This is only for a:hover if you need the normal state to be affected as well you have to use in-line styling ( not the best practice but in this case will solve the problem) :
<li id="menu-item-131" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-131" style="text-indent:-999px"> fb </li>
Third problem of hover activation area being too large:
#menu-item-131 a{ background-position: 0 0 !important;
text-indent: -999px !important;
width:75px !important; }
Related
I am working on creating a plugin that requires Bootstrap. I have enqueued the correct Bootstrap and jQuery libraries. Everything is working fine on the page, but when I put a blockquote in the page, it adds a gray bar to the left. I tried using the following to get rid of it, but it didn't work.
blockquote {
border-left: 0px;
}
This is what is happening:
Any help or advice is appreciated.
EDIT
When I inspect element, it points to the blockquote tags. I also put in a blockquote by itself in the page content, which is how I got the above.
I tried the following to see if that would do anything, but it didn't help:
blockquote::before {
border: 0px;
}
blockquote::after {
border: 0px;
}
Well - if changing border to 0 px does not change the blockquote's grey bar it means that this element is probably no the one responsible for this bar. To state the obvious. Use browser's Inspector to find which element has this bar - it may be ::before or ::after pseudoelement attached blockquote, or maybe blockquote is wrapped in some div or span? What theme are you using?
I figured out what was happening. bootstrap.min.css had the following:
blockquote{padding:10px 20px;margin:0 0 20px;font-size:17.5px;border-left:5px solid #eee}
I simply overwrote it in my local css file with:
blockquote {border-left: 0px;}
Thanks for those who looked.
Currently working on http://getfitquick.co.uk/ but have come into an issue, when the menu is viewed on Tablets/Mobile the menu is currently active with the toggle constantly on, would really like to remove this so that the user is able to click menu and allow the menu to appear as opposed to it always being active.
Would also like to mention for reference that on http://getfitquick.co.uk/shop/ the menu is actually appearing how I want it to, however I am a bit unsure how I did this,
Is there anything anyone could suggest? Maybe something I may have done wrong within the process?
Thanks for reading,
On the homepage there's a css code that runs display: inline-block !important; for .menu .nav
#media (max-width: 768px) (index):251
.menu .nav {
position: relative;
background-color: #000000;
left: 0px;
border-color: #e51d25;
display: inline-block !important;
}
that code will override the default behavior of the mobile nav
at the top of that code, there's a comment that says
/*
The following CSS generated by Yellow Pencil Plugin.
http://waspthemes.com/yellow-pencil
*/
So I'm not quit sure if that CSS is directly generated from that plugin option on the homepage or if its from a custom CSS code assign to that homepage,
the best way to fix that is to look for that code, its should be somewhere in the Yellow Pencil Plugin
The second option though is really a bad idea is to modify and override it
CSS Override
header .menu .nav {
display: none !important;
}
header .menu.active .nav {
display: block !important;
}
then add active when the button is click and remove it when click again,
jQuery
(function( $) {
$('header').on('click', '.menu .toggleMenu', function() {
$(this).parent().toggleClass('active');
});
})(jQuery);
I really like how the FAQ page/questions look on the site I'm building using Squarespace. The only issue is that because of this structure, it also leads to a cumbersome drop down menu when you hover over the FAQ tab on the main navigation.
Here's a link: http://www.officialjerky.com/faq-1/
While it's certainly possible to set up anchored links in another FAQ page, I'm also sure there's a solution that will allow me to keep the structure of the page(s) and get rid of the drop down. Perhaps a bit of custom CSS that could make the drop down invisible?
There was a similar help thread that asked how to change the spacing between the items in the drop down, and the custom CSS input solution was: .primary-nav .folder-links-wrapper li { line-height: 0em; }.
Any guidance or input is really helpful. Thanks.
It's controlled by JS, so you may need a mini sledgehammer to override it. Try this in your CSS:
.subnav {display: none !important;}
Ideally, remove the script that is causing the behavior.
Regarding the + on small screens, on line 9865 of the stylesheet there is this:
#sidecarNav .folder label:before {
content: '+';
padding-right: .25em;
width: .75em;
display: inline-block;
}
You could either remove that code, or just add this to the stylesheet:
#sidecarNav .folder label:before {
display:none !important;
}
when I hover the mouse over it, the cursor doesn't change into hand until you actually over over the text. (For example, if you pay attention to SO navigation, your cursor changes into hand as soon as you touch the gray area. I am talking about Questions, Tags, Users, Badges, Unanswered navigation)
when I click on it, it borders the link-text.. like it's dotted border or something by default. How do I get rid of that?
There are two ways of getting the hand cursor on the entire area; either you make the link take up the entire area (perhaps by being the entire area), or you add the style cursor:pointer; to the area. (Making the link cover the whole area is usually the better option, as that also make the entire area clickable.)
To get rid of the dotted border on links when they‘re clicked:
a:active {
outline: none;
}
For SO navigation, it is done in following way:
<li class="nav">
Questions
</li>
.nav a {
padding: 6px 12px;
}
The gray area you see is actually the link itself (achieve by setting the padding). To get rid of the border, you should specify by a:link:
.nav a:active { outline: none; }
For (1), use the <a> around your whole <div>, not just the text, and that will make the cursor change to the hand cursor when entering the div. Another way is to change the <a> to have a style similar to
a { display: block; width: 300px; height: 100px; background: orange }
the background is just for trying it here. It can be removed.
For (2), use
a { outline: none }
Try using the following in your CSS.
a:focus {outline: none;}
However, I believe older versions of IE will not honor this code.
I have a CSS rule like this:
a:hover { background-color: #fff; }
But this results in a bad-looking gap at the bottom on image links, and what's even worse, if I have transparent images, the link's background color can be seen through the image.
I have stumbled upon this problem many times before, but I always solved it using the quick-and-dirty approach of assigning a class to image links:
a.imagelink:hover { background-color: transparent; }
Today I was looking for a more elegant solution to this problem when I stumbled upon this.
Basically what it suggests is using display: block, and this really solves the problem for non-transparent images. However, it results in another problem: now the link is as wide as the paragraph, although the image is not.
Is there a nice way to solve this problem, or do I have to use the dirty approach again?
Thanks,
I tried to find some selector that would get only <a> elements that don't have <img> descendants, but couldn't find any...
About images with that bottom gap, you could do the following:
a img{vertical-align:text-bottom;}
This should get rid of the background showing up behind the image, but may throw off the layout (by not much, though), so be careful.
For the transparent images, you should use a class.
I really hope that's solved in CSS3, by implementing a parent selector.
I'm confused at what you are terming "image links"... is that an 'img' tag inside of an anchor? Or are you setting the image in CSS?
If you're setting the image in CSS, then there is no problem here (since you're already able to target it)... so I must assume you mean:
<a ...><img src="..." /></a>
To which, I would suggest that you specify a background color on the image... So, assuming the container it's in should be white...
a:hover { background: SomeColor }
a:hover img { background-color: #fff; }
I usually do something like this to remove the gap under images:
img {
display: block;
float: left;
}
Of course this is not always the ideal solution but it's fine in most situations.
This way works way better.
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
text-decoration: none;
border: 0 none;
background-color: transparent;
}
No cumbersome classes that have to be applied to each image. Detailed description here:
http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/
Untested idea:
a:hover {background-color: #fff;}
img:hover { background-color: transparent;}
The following should work (untested):
First you
a:hover { background-color: #fff; }
Then you
a:imagelink:hover { background-color: inherit; }
The second rule will override the first for <a class="imagelink" etc.> and preserve the background color of the parent.
I tried to do this without the class="", but I can't find a CSS selector that is the opposite of foo > bar, which styles a bar when it is the child of a foo. You would want to style the foo when it has a child of class bar. You can do that and even fancier things with jQuery, but that may not be desirable as a general technique.
you could use display: inline-block but that's not completely crossbrowser. IE6 and lower will have a problem with it.
I assume you have whitespaces between <a> and <img>? try removing that like this:
<a><img /></a>
I had this problem today, and used another solution than display: block thanks to the link by asker. This means I am able to retain the link ONLY on the image and not expand it to its container.
Images are inline, so they have space below them for lower part of letters like "y, j, g". This positions the images at baseline, but you can alter it if you have no <a>TEXT HERE</a> like with a logo. However you still need to mask the text line space and its easy if you use a plain color as background (eg in body or div#wrapper).
body {
background-color: #112233;
}
a:hover {
background-color: red;
}
a img {
border-style: none; /* not need for this solution, but removes borders around images which have a link */
vertical-align: bottom; /* here */
}
a:hover img {
background-color: #112233; /* MUST match the container background, or you arent masking the hover effect */
}
I had the same problem. In my case I am using the image as background. I did the following and it resolved my problem:
background-image: url(file:"use the same background image or color");