How do I lower the transparent border on the slideshow? « Support Forum | Kriesi.at

Support Forum » Newscast

How do I lower the transparent border on the slideshow?

6 posts from 2 voices

Started 2 years ago by JohannaW
Latest reply from Dude
This topic is resolved

Tags:

JohannaW
Member

I am using the Newscast Accordion slider which I have resized so that it is smaller than usual. However, the white/transparent border (that the topics for the latest posts show up on) is too high. I understand that this could be a hard coded thing that would be difficult for me to change myself. But still, is there anyway for me to lower the border in the usual code?

http://www.barnsrattigheter.com

Posted 2 years ago #
Dude
Dude
Just change #top .feature_excerpt height in style.css like:
```
#top .feature_excerpt{
height:100px;
}
```
to
```
#top .feature_excerpt{
height:60px;
}
```
Posted 2 years ago #
JohannaW
Member

Thank you so much!
That part of the style.ccs-code looked like this for me (no "height"-row):

#top .feature_excerpt{
width:660px;
position: absolute;
display: block;
bottom: 0;
left:0;
z-index: 3;
padding:10px 20px;
font-size: 11.5px;
line-height:1.5em;
cursor: pointer;
}

I tried adding

height:60px;
}

directly below #top .feature_excerpt{, but that only made the white border disappear completely. Then I removed the } -sign and it worked!

However, when I hoover witht the pointer over a particular post in the slide, the text that appears from the beginning of the post shows higher up than the border. Can this be fixed somehow?

Posted 2 years ago #
Dude
Dude
As far as I know the high of this field is generated dynamically by the javascript as soon as you hover over it - the field high depends on the text (more text needs more space). So you can try several things:

1) Reduce the excerpt content.

2) You can change the font size of the header and/or the excerpt text size. You can also change the line high.

The font size/line high can be changed in style.css:
```
#top .feature_excerpt{
width:660px;
position: absolute;
display: block;
bottom: 0;
left:0;
z-index: 3;
padding:10px 20px;
font-size: 11.5px;
line-height:1.5em;
cursor: pointer;
}
```
the slider heading size can be changed in style.css too,
```
#top .sliderheading{
display:block;
font-size: 26px;
}
```
Maybe it's possible to hack the javascript process but obviously that's more difficult.
Posted 2 years ago #
JohannaW
Member

Great, I was able to solve it! Thank you.

Posted 2 years ago #
Dude
Dude

Glad that I could help you.

Posted 2 years ago #