Jump to content
Sign in to follow this  
Guest debbiejosendaleyahoocom

Change height of White House Pro Feature Box

Recommended Posts

Guest debbiejosendaleyahoocom

Hi, I want to reduce the height of the white house pro feature box. Can you please tell me the best way to do this? Thanks, debbie

Share this post


Link to post
Share on other sites
kastelic

CSS Learn about CSS: http://www.w3schools.com/css/ Get Firebug for Firefox to inspect page elements. Post your custom code into Platform Pro Settings -> Custom Code -> Custom CSS Example:

#featurearea{height:340px;}

Share this post


Link to post
Share on other sites
Guest debbiejosendaleyahoocom

Hi Jimmy, Thanks much for the references and guidance. I am not using platform pro, just the regular WhiteHouse Pro version 3.1.3. I did try to put the code you mentioned into the custom css section under Theme options, but it had no effect. And I do not have a strong technical background, so it is difficult for me to learn all about CSS to figure this one issue out. I wonder if you could offer any other specific guidance that would help me to get this issue sorted out. Thanks much, Debbie

Share this post


Link to post
Share on other sites
Kate

Hey Debbie, The same approach should work for your theme. I can't remember off the top of my head what the feature div ID is for WHP (... it may be "Feature"). But, just use that instead with what Jimmy suggested, replacing "featurearea".

Share this post


Link to post
Share on other sites
Guest debbiejosendaleyahoocom
Wf5zQ.jpgHi Kate Thanks much! That solved part of the problem, but now there is a white space from between the original size of the feature and the new feature. I have uploaded an image to show you what I am talking about. Also the word is "feature"! Thanks so much! Debbie

Share this post


Link to post
Share on other sites
Guest Guest

Debbie, There are some other elements within the feature box that will need to be changed as well. What you changed was just the height of the div that contains all the areas that make up the feature slider. As Jimmy suggested, use either Firebug with Firefox or the built in Inspect Element with Chrome or Safari, and check out the areas of the site you're wanting to alter to give you the proper CSS IDs and classes. Here are a couple links that explain how to use Firebug and Inspect Element. http://www.ehow.com/how_4579105_use-firebug.html

Share this post


Link to post
Share on other sites
Guest debbiejosendaleyahoocom

THank-you Tyler for your suggestion. I do not aspire to be a programmer or able to fully understand CSS. However, I did install firebug on firefox, I did review the You Tube video and I did find these additional referecnes to feature and height: #featurearea {height:280px; overflow:hidden;} #feature{height:280px;} #feature .fmedia { float:left; height:280px; margin:20px 20px 0 0; overflow:hidden; width:610px;} I changed all of the height parameters from the 360 to the 280 that I want and still have the white space. So is it possible that someone could offer some guidance on what that is called or exactly what I am looking for in the CSS code? Thanks much, Debbie

Share this post


Link to post
Share on other sites
cmunns

Sure are you able to give us a live link to the site?

Share this post


Link to post
Share on other sites
Guest debbiejosendaleyahoocom

Yes the link to the site is: www.3cmarketinggroup.com Thank you for your help!

Share this post


Link to post
Share on other sites
cmunns

where were you adding all the suggested code? I don't see any sort of reference to it on the site?

Share this post


Link to post
Share on other sites
Guest debbiejosendaleyahoocom

Hi, I took it out because it looked so bad and I was concerned about how long it might take to get this figured out. I have put it all back in so hopefully that will help. Thansk again, Debbie

Share this post


Link to post
Share on other sites
Guest debbiejosendaleyahoocom

Hi Tyler, Thanks for the suggestion, but I already have placed what you suggested in my custom CSS code, and it still does not fix the problem. It does change the size of the "red" area of the feature, but there is still a white section that is underneath the red section that shows up and has not changed the size. I would greatly appreciate if someone could tell me either how to fix that part or what word I should be looking for in the CSS code to fix that. Thanks, Debbie

Share this post


Link to post
Share on other sites
Guest Guest

You may want to try adding body in front of the #feature id, because as you can see from this screenshot, changing the value like I suggested produces the desired result. http://i.imgur.com/77Edt.png

Share this post


Link to post
Share on other sites
Guest debbiejosendaleyahoocom

Hi, Thanks to everyone for your help on this. This problem was finally solved by making a change in the pro.css file. Debbie

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×