Forums (Obsolete)

Member

esolutions - 5/31/2013 4:29:19 PM

adding text to a content slider

Hi,
Is it possible to have the content slider display text over top of the image?

Right now the content slider is set up to pull from a doc type that allows the user to enter a title, text, URL and upload an image. The transformation is set up as follows:

<img src="<%# ResolveUrl("~/CMSPages/GetFile.aspx?nodeguid=" + Eval("Image").ToString()) %>" width="100%"/> 
          <div class="imgText">
          <a href="">
          <p class="imgTitle"><%# Eval("Title") %></p>
          <p class="imgSubtitle"><span style="font-size:14px;color:white;"><%# Eval("Copy") %></span></p>
          </a></div>

However, when we view the page, the image is smaller and there is no text. I viewed the source and I can see the text in the source. I noticed this happening with the Kentico Corporate site. In the web parts > examples > Listing and Viewers > documents the transformation is set up to use the news summary but the news summary never displays. And again, when I view the source I can see the news summary printed out.


Kentico Support	kentico_janh - 6/1/2013 3:06:05 AM RE:adding text to a content slider Hello, This is all about CSS styles. Please follow the links below describing how to style a text over an image: http://css-tricks.com/text-blocks-over-image/ http://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css Best regards, Jan Hermann

Member

esolutions - 6/1/2013 5:30:16 PM

RE:adding text to a content slider

Sorry...you must have misunderstood me...the designer has provided an html template for us where it clearly shows the text over top of the picture. I've transferred the html from that template into the transformation for the slider. This is the code I've provided in my post.
If you take a look at your the Corporate site that can be installed with Kentico, the slider is working the same way. The news summary is included in the transformation but is not displayed on the slider. If you view the source you can see the text is there but is not printed to the screen.

Kentico Support

kentico_janh - 6/3/2013 1:55:17 AM

RE:adding text to a content slider

Hello,

HTML code in its default form doesn't allow you to place one element over another. So as I said you need to have a stylesheet to do this for you. The person who provided a HTML template for you must give you related CSS stylesheets as well. You can also check our sample Corporate Site stylesheet to see how the text position over an image is achieved.

Best regards,
Jan Hermann

Member

esolutions - 6/3/2013 10:06:59 PM

RE:adding text to a content slider

Hi,

If you look at the following image, this is the html that the designer provided. User image

. Here is the source:

<div id="contentContainer">
                   <div class="imgHome">
          <img src="images/home/mainImg3.jpg" width="100%"/> 
          <div class="imgText">
          <a href="">
          <p class="imgTitle">Our Mission</p>
          <p class="imgSubtitle"><span style="font-size:14px; color:white;">“To be the most successful Sikh Credit Union. To care about our community and contribute to Sikh education, culture and religion. To be an environmentally conscious and committed organization that is responsive to member-owners.”</span></p>
          </a></div>
          </div>

And here's what it looks like with the content slider:
User image

and here is the source:

<div id="contentContainer">

  
    
  
  <div class="Slider"><div class="Content" id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_ContentSlider" style="width: 400px; height: 300px; overflow: hidden; position: relative; left: 0px;">
<div id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_ContentSlider_0_content" class="ContentPage" style="width: 400px; height: 300px; overflow: hidden; position: relative; left: 0px;position:absolute;" >

      <img src="/CMSPages/GetFile.aspx?nodeguid=6e6d9862-e0d1-4f08-aa46-7d971db6ccf4" width="100%"/> 
          <div class="imgText">
          <a href="">
          <p class="imgTitle">Our Mission</p>
          <p class="imgSubtitle"><span style="font-size:14px;color:white;">“To be the most successful Sikh Credit Union. To care about our community and contribute to Sikh education, culture and religion. To be an environmentally conscious and committed organization that is responsive to member-owners.”</span></p>
          </a></div>

</div>
</div><div id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_ContentSlider_pager" class="Pager" style="width:400px;"><div class="PagerPage" style="width:10px;"><a id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_ContentSlider_page_0" href="#" onclick="CurrentPage_p_lt_ctl03_pageplaceholder_p_lt_ctl00_ContentSlider=0;document.getElementById('p_lt_ctl03_pageplaceholder_p_lt_ctl00_ContentSlider_runSlider').style.display='inline';return false;">1</a></div><div style="display:none;" id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_ContentSlider_runSlider" class="Control"><a href="#" onclick="document.getElementById('p_lt_ctl03_pageplaceholder_p_lt_ctl00_ContentSlider_runSlider').style.display='none';autoTurnPage(Slider_p_lt_ctl03_pageplaceholder_p_lt_ctl00_ContentSlider,CurrentPage_p_lt_ctl03_pageplaceholder_p_lt_ctl00_ContentSlider,5000, false); return false;" >Start</a></div><div style="clear:both;height:0;line-height:0;"></div></div></div>

Text is not showing...

Kentico Support

kentico_janh - 6/4/2013 3:11:10 AM

RE:adding text to a content slider

Hello,

That's what I am talking about. The source code contains the text, but the text is probably hidden due to its position. You need to style that text to be on the top of an image. What is rendered when you use the same code outside the Content slider? Could you please place it into the Static text or the Static HTML web part?

Best regards,
Jan Hermann