Solved

Can't find source CSS for a style

Posted on 2013-06-27
10
438 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
 
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

895 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now