The problem is on my site:
http://windowsphonedaily.blogspot.com/
I've been wracking my brain trying to figure how to solve this. Basically, I wanted to create a "Featured Posts" slider by using EasySlider 1.7 . The slider is the first thing you see when on the site.
Everything seemed to be going well during the install, but once I finished I realized the nextText and prevText was showing on top of my background images. This seems to be a property that can't be modified with css or html as I think it's embedded in the javascript provided.
I tried the Best Answer found in this question ("CSS text replace with image, need hyperlink") and it worked for the nextBtn but when I tried it for the prevBtn the nextBtn disappeared and was replaced by the default setting. If anyone can explain to me how to properly use this method with both buttons, then that solution would be fine.
But if you can't then please help me come up with any other solution. I'm not very well versed with CSS or HTML, so I'm learning as I go right now. It's probably some dumb mistake I made, but I'd still like to know how to fix it!
Thank you in advance to anyone who responds!!
I tested it with firebug directly on Your page. Try this:
#nextBtn a, #prevBtn a {
display: block !important;
text-indent: -9999px;
}
Important is this !important ;) It makes that this display: block is more important than display: inline which adds Your slider plugin.
Not quite sure what's going on, but if you go to https://sites.google.com/site/shawnhasinger/files/easySlider1.7.js where you have linked it from, you get a log in page, meaning that it doesn't work! This isn't the issue you are facing, probably because you are logged in...
Related
Have found great help with R on SO--now for something completely different.
I am working in WordPress 5.8.3.
I am building a website using the Blank Canvas theme, a child-theme of Seedlet--Not sure whether that is all relevant. I am a novice with WP and all things web development. I have installed the Events Calendar plugin and have it all configured with some test events and dates so no issues there. I am customizing the theme colours using the Additional CSS prompt from the WordPress dashboard interface.
I haven't gotten permission to publish the site, so unfortunately I can't offer a live demo. I will try to be explicit.
I have found helpful resources with instructions on how to use this utility for menus, for general custom CSS, and some useful information for changing properties of footers with CSS. Now I am trying to modify hyperlink colours within the Events calendar widget. I have approached this problem the same way as all the others but this one has stumped me. I elaborate:
From this image, you can see the Events Calendar hyperlink text is yellow. I opened the inspector and determined that this object is called .tribe-events-widget .tribe-events-widget-events-list__view-more-link. I thought the following code should change the colour
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
color:#000;
}
It does not. This code makes no visible change. However, when I also change the background-color like this:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
background-color:black;
color:#000;
}
The result is:
This led me to believe that there is no colour option for this element---HOWEVER, the inspector shows that this element has the 'color' property:
And I'm stumped. I'm not even sure when or how this color-link-accent got defined. This check-mark toggle is not a permanent solution and besides, I would very much like to understand what is going on here.
Any advice would be greatly appreciated.
It's a bit difficult to be certain of the problem as we don't have the context, however I was surprised that you saw just this:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link
and didn't find an anchor (a) element within it.
I would have expected that you'd have to do:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link a {
color:#000;
}
as it is quite likely the anchor element will have its own special styling which will override your setting because of the increase specificity.
If that doesn't work then use your browser dev tools inspect facility to find out more about the context of that a element - you may need to give even more hints to the browser on pinning it down.
Well, this would have helped me, so I will post the solution to my question for posterity. I learned from this question and thread about overriding cascading commands. I still don't understand where the command producing the yellow text in the first place was, but I managed to override it by appending !important in my CSS. The full CSS to turn the text from yellow to black is:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
color:black !important;
}
Reading on, this does not necessarily mean that I was specific enough about the context although I find it hard to tell in this case. This reference has some other useful info as to when it is appropriate to use !important. It seems this is not the optimal solution.
Hope somebody else can benefit from my toiling...
After spending a while creating an online portfolio, then uploading it, I noticed an issue with one of my sections. On the "Advertisement" section, I noticed it was not displaying the information, just the title. So, I kept on re-pushing the stylesheet.css, even editing it, and it would still look the same. The HTML, CSS, and JS is working how I wrote it. But it is just the section that is not showing. After browsing online and on stackoverflow for an answer, I believe it has to do with Firefox. When using Firebug, I noticed the section's background has been removed, causing the entire section to "disappear." It works just fine on Chrome. I'm not worried about IE, I know that browser has some issues in itself. Anyway, would anyone on here have an idea to resolve this issue, if I can? Or even, what could be causing this issue?
Here is my website to see for yourselves. www.voelkerdesigner.com
Cheers!
It is the opposite for me your entire site works in firefox for me but not in chrome, looking through your code, its being caused by your naming conventions. Namely #advertise
I use the adguard extension in chrome and below is the css it plugs into my html pages to hide ads, so im guessing your using an adblocker in firefox
#adsense_top, #adsensewide, #adspace, #adspace_top, #adspot-300x250-pos-1, #adspot-300x250-pos-2, #adswidget1-quick-adsense, #adswidget2-quick-adsense, #adtext, #adtop, #adv-masthead, #adv-top, #advert1, #advert2, #advertbox3, #advertise, #advertisement1, #advertisetop, #advertising-container, #advertising_wrapper {
display: none!important;
}
Might as well post a random answer on this... As i wont visit posted links by new users.. i'm just gonna guess that your background image might not be 100%...
In general i use background-image instead of background.. Short hand can be a little pain and breaks in some browsers if not perfect.
so i would compare against the following example
background-image:url('images/mybg.jpg');
background-image:url('http://somesite.com/images/mybg.jpg');
Basically alot of people do not use the url and just go straight for a file name or dont quote it.. And have seen that be the problem in the past, so do use the url('') method.
Otherwise if it still fails to work and you know the image is absolute, you would then have some other css that is either over riding your elements background or is preventing it from loading.
Another trick is using your console / inspect element to manually inject the background-image and see if that works... So once the page has loaded in chrome, inspect the element as normal.. And double click on your css property listing as you can add your own styles this way and if it fails, then its not the markup but something else.
I am trying to modify one WordPress theme http://demo.wpzoom.com/evertis/ and use it on my own site.
However, something weird occured, the footer area will not display properly with Firefox (while it works fine on IE8):
The original theme works fine on Firefox and IE8.
Whats the possible reason?
More Information: I am using Notepad++ with Encoding "UTF-8 without BOM." Many years ago, I saw a problem similar to this one with IE6, after I change the Encoding to "ANSI", everything is fine. But this time it wont work.
Thanks a lot!
Try overriding the margin-right on the last footer section, something like:
.wpzoom-flickr-photos { margin-right:0; }
I think the problem is with the display: inline-block which is known for having issues. Here is an article where you could find the answer you are looking for:
http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
If you visit this website http://inelmo.com/inelmo and click on one of the comments links under each article it expands a div which contains a facebook comments plugin. I don't know why, but there is a huge space after it, I am pretty confident it has nothing to do with my styling (although I might be wrong).
The markup for that bit looks like this:
<div id="cmbx(id of the article)" class="comentBox" style="display: none; width: 520px;"> // This is the div that hides facebook comments.
<div class="fb-comments" data-href="inelmo.com/story.php?id=(id of the article)" data-num-posts="5" data-width="520"></div>
</div>
I have no idea about what is causing that space under facebook plugin. Can anyone suggest any fixes?
jQuery used for slide:
function toggleSlideBox(x){if($('#'+x).is(":hidden")){$(".comentBox").slideUp(200);$('#'+x).slideDown(200)}else{$('#'+x).slideUp(200)}}
EDIT: I tested it in several browsers, some e.g. Firefox do not have any issues, but google chrome for example has.
I don't think your problem is related to your CSS or the Facebook comment box directly, although it seems to be the comment box that is causing problems to begin with. The actual problem seems to be with the jQuery slide function, which would definitely be hard to debug because the problem at first glance seems to be with the css or fb-comments.
Check out this post, it should be of some help to you. http://goo.gl/ZaduP
The post talks about a very similar issue that seems to be caused by jquery slide not knowing in advance what the height of the div is going to be. HTH
I installed the latest version of Wordpress and added the WP-Syntax plugin (and also the Markdown Extra plugin, but I think it's unrelated to this issue).
It works perfectly with both themes that ship with Wordpress: looking good using WordPress Default 1.6 and looking equally good with the WordPress Classic 1.5 theme.
However it doesn't work with the excellent LightWord theme, which I would like to use. The code box looks strange with the right border at the end of the actual code:
My thoughts:
I have tried investigating this with Firebug without any success. The CSS from the WP-Syntax plugin should be the same in all three theme cases. So the fact that it looks wierd with this theme has to do with some inherited CSS property from the LightWord theme.
This in turn probably means that the WP-Syntax plugin should reset something more for its CSS to work correctly.
Help!
Advanced CSS isn't something I'm good at. But I would very much like to resolve this problem as soon as possible. I'm also curious from a technical view point what could be causing this behavior? I hope someone with good CSS skills will be able to help out!
We (you if you want to, me if you don't feel like it) could then file a bug report in the appropriate place, to get these components working together.
To resolve this I understand you need more than screenshots. I have a link with the problem theme, which could be used to investigate further.
Web site where the problem may be experienced (Taken down as the problem is solved)
Edit: In response to a comment I'm also including a link to the working web site using the classic theme and the same plugin setup: Link to a working theme with these plugins (Taken down as the problem is solved)
Thank you for reading!
Summary of problems I'd like to solve:
What's the best way to get rid of the right and bottom inner border in the code box? I first noticed the right border, but the bottom border is also an eye sore.
The code box right border isn't visible. It's due to .wp_syntax {width:100%;} and if I set it to 99% it's visible again. Do you consider this to be a problem with the theme or the plugin?
Making changes in the theme (style.css) or the plugin (wp-syntax.css) would be preferred if that's possible, so one of them could be standard. But which one? And how?
The problems you are having are due to the stylesheets of WP-Syntax and LightWord interfering with each other. I don't really think that the problems are with the theme or the plugin, they are just down to how the two interact with each other.
To make all of the required changes, ideally you would edit styles in both wp-syntax.css and style.css. You can however cheat a little.
In style.css add the following:
.wp_syntax { width:auto; }
.wp_syntax table { border:0 !important; }
.wp_syntax table td { border:0 !important; }
These changes should solve all of the problems, with the benefit of keeping all of the changes localised to a single file (style.css of the LightWood theme). The other tables in the example should all remain unchanged as well.