Jump to content
Sign in to follow this  
craighal

Modify position of text and height of the overlay background for Feature block

Recommended Posts

craighal

I combed through the CSS to see where I might change this, but have been unable to find it. Where exactly is the right CSS? Or is there an easier way to do it? Thanks.

Share this post


Link to post
Share on other sites
timlinson

When you say modify position of text, do you mean you want to move the text to the left/bottom/right? If so, edit the feature and scroll down to the dropdown menu at Feature Setup Options > Feature Text Position. I'm not sure I understand what you mean by "height of the overlay background." Can you post a screenshot describing what you mean?

Share this post


Link to post
Share on other sites
craighal

I want to move the text further down, and have it vertically centered within the transparent background. I also want to make the whole transparent shorter (not as tall). Here is an image that should help describe the situtation... Feature_layout_bug.png Thanks

Share this post


Link to post
Share on other sites
cmunns

Here is the selector and rules controlling it: ` #feature_slider .fcontainer.text-bottom .fcontent { float: none; position: absolute; bottom: 0px; left: 0px; z-index: 200; width: 100%; height: 80px; font-size: 1em; } `

Share this post


Link to post
Share on other sites
craighal

Thanks cmunns! I played with this a bit and it does seem to largely have the effect I'm looking for. One thing I still can't figure out though... How do I control the vertical alignment of the two blocks of text (the Title and Description)? Right now they are neither base aligned or vertically centered, one of which would look better than the somewhat random looking alignment they have now.

Share this post


Link to post
Share on other sites
cmunns

I would play with the padding of `#feature_slider .text-bottom .fcontent .fheading` and `#feature_slider .text-bottom .fcontent .ftext`

Share this post


Link to post
Share on other sites
craighal

Thanks cmunns. Where do I place it? Is there a particular place in the CSS, or should I put it in as a custom code override?

Share this post


Link to post
Share on other sites
timlinson

Either in `PlatformPro Settings > Custom Code > Custom CSS` or inside the platformbase/base.css file.

Share this post


Link to post
Share on other sites
craighal

So I've had trouble doing both of these things... 1) For the height of the transparent background, it seems to only snap between the default size and something considerably smaller, despite enterying varying pixel specifications. 2) For the Title text, playing with the padding CSS as suggested doesn't work. I tried a number of different values but none seem to have any effect. I would greatly appreciate more guidance. Thanks!

Share this post


Link to post
Share on other sites
kastelic

Try :

#feature_slider .fcontainer.text-bottom .fcontent{
	height:60px;
	}
	
	#feature_slider .text-bottom .fcontent .dcol-pad{
	padding-top:15px;
	}
I haven't checked the exact numbers so play with those until you get the right effect. By the way the best way to do this is use Firebug. Once you have found the rules above in the inspector, click on the number you want to change (for example, the "80px" after "height" that is targeting
.fcontent

). Once you have clicked the number, you can use the up and down arrow keys to decrease/increase the number and see exactly what you need to set it to.

Share this post


Link to post
Share on other sites
craighal

Jimmy, thank you so much! That was the information I was missing. I played around and tweaked these things and finally got things lined up the way I wanted. Thank you!

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  

×