Solved

Can't find source CSS for a style

Posted on 2013-06-27
10
441 Views
Last Modified: 2013-07-04
Hi,

At this URL I have a Joomla website using a Rockettheme template:

http://www.coloradoweb3.com

On the home page, my slideshow has a sliver too much vertical space. In firebug, I identified this line:

<div id="slideshow-spacer" style="height: 430px;"></div>

Within firebug if I change this value to 424px, my problem is solved, but I can't find the file to change. Most of the other styles are connected to style sheet files, but this div doesn't show anything. So I started looking for index.php files, javascript files, etc and I cannot identify where the heck this style is being defined. I found the index page with the slideshow-spacer div, but it doesn't include the height: 430px (!).

Does anyone know how to decrypt Firebug results better than I to identify precisely where this style rule is coming from?

Thank you

Bill
0
Comment
Question by:billium99
  • 5
  • 4
10 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39283463
That's because it is setup in javascript starting on line 95 of the "View Source".  You might be able to adjust the '120' value on line 116 to get what you want.
0
 
LVL 23

Expert Comment

by:tailoreddigital
ID: 39283467
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39283547
But all that is there is:

#slideshow-spacer{display:none !important;}

That just turns off the display of the div.
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 1

Author Comment

by:billium99
ID: 39284326
Hi Dave - line 116 of what file?

Thanks

Bill
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39284864
The main page file.  It's part of the javascript.
0
 
LVL 1

Author Comment

by:billium99
ID: 39284951
Actually that's not working for all the browser sizes. It works at full-screen and one move down, but Tablet view shows an even bigger gap when i adjust the 120.

The 430px is where the value change needs to occur. Still hunting...
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 39285031
I don't believe you're going to find it.  You must have a bigger screen than I do.  If you adjust your screen size, you will see that 'height' change because of the 'responsive design' module that adjusts the size of images to adapt to the screen size.
0
 
LVL 1

Author Comment

by:billium99
ID: 39285034
yes - but they are fixed values coming from somewhere. At full screen the value is always 430. I agree I may need to change 5 or 6 values, but I'm still in the dark as to where they might be.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39285060
You're not going to find them.  Since it is supposed to be a 'responsive design' that automatically adjusts the images, the image sizes are read by the javascript and scaled by some factor that I don't understand.  You will have to find out where the calculations are don and adjust that.
0
 
LVL 1

Author Closing Comment

by:billium99
ID: 39300478
Lame...
0

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question