when I use a blog layout, when I hover over any content, I see a backgound with code #EEE
when I change to single article layout, hovering over the article does not show the background
I am trying to figure out what is causing the issue with hover on the blog layout. I do not want a hover.
I checked the template css, and could not find any code that sets a backround-image or background- color on hover that has the color of #EEE
Any help is appreciated
Check the <head> tag for CSS files other than template.css - most Joomla! templates use multiple CSS files. If you have multiple CSS files you could just search each one for a hover tag.
If that fails, right click the content in the blog layout using a modern browser and select the "Inspect Element" menu item that will launch a document inspector, allowing you to trace back all of the CSS etc that is affecting that element. (You will need either Firefox+Firebug, Safari or Google Chrome, or if you must IE8+).
On the right hand side of the document inspector you will see all the matched CSS with reference to which CSS file it is in, from there you should be able to track it down.
Related
I have a weird problem with CKEditor. When I click on the styles menu, the dropdown appears, but it's not added to the editor's element, but just on the body of the document.
Thus, when I scroll the page, the dropdown stays where it's at an the editor scrolls.
Kinda hard to explain, I hope the attached screenshot helps to understand.
Anybody having an idea what could cause this?
P.S. - it's the CKEditor that comes with Typo3 and I have multiple instances of ckeditor on my page.
I have added a pinterest button to my site so that if any image is hovered, the pinterest button will show up and you will be able to pin the image to your board:
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js" data-pin-hover="true" data-pin-do="buttonBookmark" data-pin-color="white"></script>
However, on a couple of images, the button sits on top of the site header (which is fixed position to the top of the page) and disappear once the cursor enters the header. I have been searching but could not find any way to overwrite the inline styles that are applied to the button for specific images.
Any solution I have found is for the older version of the pinterest button where you can easily override the styles in your css file.
Does anyone know how to do this for the new button?
Here is a fiddle demonstrating my problem - you cannot click the button for the top two images
In the end I made my own plugin to loop through all images on the page and create a link which I then had complete control over.
As long as the link href was formatted in the following way, it seemed to work:
https://www.pinterest.com/pin/create/button/?url=[full url of web page]&media=[full url of image]&description=[image title]
I'm trying to put together a page at http://www.sketch360.com/store/home/ which should show featured products and thumbnails for those products. For some reason the images aren't showing on page load, even though they immediately appear when you either right-click on the image, click on a next/previous arrow, or open 'developer tools' in chrome.
The status of the image styling in css I've noticed, changes from display:none to display:inline-block when you perform any of the above actions to get the images to show.
I've been through the timthumb troubleshooting steps at http://www.binarymoon.co.uk/2010/11/timthumb-hints-tips/ and have changed permissions on all directories according to these instructions. Any help would be much appreciated in getting these images to show up on page load.
The images show up (also using the timthumb method, I believe) on this alternative page: http://www.sketch360.com/store/shop/ but not on the first page (that is going to form the home page for the site: http://www.sketch360.com/store/home/ ).
Any suggestions would be gratefully received.
It isn't a timthumb or wordpress issue. It looks like it is a stylesheet / jQuery issue - where the div that covers the image (used for the highlight on hover) is opaque and covering the images. The funny thing is that when I "Inspect Element", the images all appear.
Double-check your starting styles for class "overdefult" - make sure it has the right opacity or set the background color to transparent. (You could also try removing it temporarily to prove that this div is indeed your issue.)
After many hours banging my head against a brick wall, I have discovered an updated script available that controls the bxSlider used to display these images in li's - and having upgraded the minified script, the problem seems to have resolved itself - just in case there are others needing help on this too.
I'd like to have my firefox extension display a block of html that overlaps the users browser window. I can currently do this by having some JS that inserts html into the DOM of the page, but I'd like the html to be displayed at a higher level within the browser so that the block remains if the user browses to a new page or switches tabs. Is this possible?
You should take a look at the XUL PopupGuide. Popups can be used for elements floating above the user-interface.
I think Panels, a special type of XUL popup, are what you are looking for. The panel itself is XUL and not HTML, but inside the panel you can safely mix both or just use HTML if you want to.
Cheers.
I am porting an existing site to Joomla 1.5. The menus on the existing site use rollover images and inline Javascript. How can I make the menus look the same in Joomla and use the Joomla menus, without rewriting the menu code?
It ended up being rather simple, actually. Joomla renders menus as <UL><LI><A> tags. All I had to do was extract the background from one of the menu images (both in selected and unselected state), set a images as the background in each of the styles in the Joomla CSS, and voila, it almost looks exactly like the old site (minus a slightly different font, since the text is no longer part of the image).
To show a menu item as an image, edit your menu item and select an image under the Parameters (System) heading (This list automatically populates with the images in the images/stories folder).
You will also need to set the module for the menu to display the images you set. Go to Extensions > Modules, then select the module for your menu (for instance, Main Menu). From there, select Other Parameters and then set Show Menu Images and Menu Image Link to Yes.
The rollovers will be a bit trickier. You won't be able to add inline JavaScript, but you might be able to use JavaScript to find your menu and assign rollovers to each item. Joomla ships with MooTools, or you can use jQuery if you're more comfortable wit hit. Use the Menu Tag ID field under Advanced Parameters to give your menu ul element an HTML id.