Is there a way to overlay text on top of slider images?

edited November 2014 in HealthCentre
Is there a way to overlay text on top of slider images similar to the way it appear on these websites?

http://www.enhancedbusinesscoaching.com
http://detailusa.net

Both of these websites use this theme http://www.elegantthemes.com/gallery/theprofessional/

Thanks,

Comments

  • edited November 2014
    hi 

    your issue its parts of Customization but you are better use of Health-center Theme

    Please Follow this step to solve  overlay text on top of slider images >>

    First is Create a child theme follow this LINK then 

    Step 1 -   Copy the code from post-meta.txt (which is given  below in the attachment ) and past it into the file post-meta.php file of your child theme (which is located at Theme Folder << functions folder >>meta-box folder >> post-meta.php  file ).

    Step 2  Replace the code of index-slider.php code with the code of index-slider.txt file (which is given below in the attachment ).

    Step 3  Paste flexslider.css code with the code of flexslider.css (which is given below in the attachment ).

    Then GO TO WP Admin Dashboard << Featured Slider << click on add new slide << then you will find a Slider overlay Link field  , enter your text into this field .
    Thanks
    post-meta.txt
    19K
    index-slider.txt
    4K
    flexslider.txt
    2K
  • Imran I guess you misunderstood me. I already worked with Akhilesh to make the sliders clickable and have a link associated with them. What I am looking now is the ability to overlay text in a transparency layer on top of the sliders as in the example attached.

    The way Elegant Themes implement this is the text is either placed in the excerpt of the page or in separate posts while the images are taken from the Feature Image field.

    Can you guys do this with the Health Centre theme?

    Thanks,
    Capture4.JPG
    1204 x 1287 - 223K
  • edited November 2014
    hi

    This Support are also different 

    This Support are also provide solution to work Overlay text on top of slider image

    please See attachment file...

    Thanks.
    1.png
    1595 x 661 - 1M
  • edited November 2014
    Imran, here are the problems with your solution:
    1. The Slider text is not overlaid on top of the slide image
    2. The slider text field does not allow for HTML formatting (text size, bold, italic, color, etc.)
    3. The slider text is not associated with the link
    4. There is no room to put enough text there, that's is why the text need to be overlaid on top of the image to allow big and bold test using H2 or H3 formatted text.

    See http://elite-healthcare.net/

    Can you fix any of these?

    Thanks,
  • Hi 
    Its required much code customization ,  Normally We doesn't provide such type of code customization but it only for you.

    First Ignore all the  above changes you have made through this ticket .

    And follow  the given below steps  .

    1 Replace the code of index-slider.php file of your child theme  with the code of index-slider.txt (Which is given below in the attachment ).

    Then Find the below file in your parent theme directory and make changes into it .

    2 Repalce the dode of post-meta.php file  (located at Theme Package << functions << post-type <<custom-post-type.php file)  with the code of post-meta.txt file .

    3 Replace the code of custom-post-type.php file (located at Theme Package << functions << post-type <<custom-post-type.php file) with the code of custom-post-type.txt file .

    4 Replace the code of flexslider.css file  (located at Theme Package << css folder << flexslider folder <<flexslider.css file ) with the code of flexslider.txt file  .

    Thanks 

    Akhilesh
    index-slider.txt
    3K
    post-meta.txt
    17K
    custom-post-type.txt
    6K
    flexslider.txt
    8K
  • Akhilesh, your solution did not result in any change. The results are the same as Imran solution and all my comments to Imran still apply. Take a look at http://elite-healthcare.net sliders. I do not see the overlay effect as it show in the image that Imran attached to his message. Please correct.

    Thanks,
  • edited November 2014
    Hi

    Follow the my previous post instruction.

     And Kindly find the attached image and  save it into your  Theme package << images folder  without changing the name of the image.

    And  copy past the below css code into the custom css fields .

    .banner_con {

        background: url(../../images/description-bg.png) no-repeat;
        top: 0%;
        left:0%;
    }


    You can change values of css property to move the overlay text.

    Thanks 

    Akhilesh

    description-bg.png
    512 x 232 - 998B
  • Akhilesh,
    I followed your direction and there is no change.
    Should the image go in the child theme images folder?

    thanks,
  • Hi 

    It is into the patent theme  images folder .

    Thanks 
  • Akhilesh, should 2,3, & 4 in your instructions be done in the child theme or the parent theme?
  • edited November 2014
    Hi 

    I clearly mention the 2 3 and 4 should be done in the parent Theme .


    Thanks 
  • edited November 2014
    Akhilesh, I put 2,3, & 4 in parent theme and now I see the Excerpt field but it looks like the text is not pulled from the Excerpt. See Service 3 slide in http://elite-healthcare.net the Excerpt for that slide has text that doesn't show up. Also for Slide 1 & 2 I changed the text in the Excerpt but it looks that it pulls the old text instead of refreshing with the new text. And I do not see the overlay anywhere.

    please fix.

    Thanks,
  • Hi 

    At our end it display overlay text . 

    Whats wrong with you , Kindly share me your admin detail at  my email address.


    so that I can assist you better.

    Thanks 
  • Nothing is wrong with me. What is wrong with you?
    I sent you the login information to your Gmail.
  • Akhilesh, what is the progress in resolving this problem?
  • Hi 

    You don't replace the file flexslider.css file with the code of flexslider.txt  File .

    4 Replace the code of flexslider.css file  (located at Theme Package << css folder << flexslider folder <<flexslider.css file ) with the code of flexslider.txt file  .

    So kindly replace the file which is again given below in the attachment .

    Thanks 


    flexslider.txt
    8K
  • Ok thanks. It looks good. However the text in the green tabs under the slider remain from before and I cannot change it. In Imran solution there was a field to enter that text. Where can I edit that text now as that text will be different than the text in the overlays?

    Take a look http://elite-healthcare.net

    Thanks,
  • Akihilesh, also the text in the overlay need to be clickable with the same link as the slider image. so the visitor can click either on the image or the overlay to go to a specific url.

    Thanks,
  • edited November 2014
    Hi 

    For this  replace the code of index-slider.php file of your child theme with the code of  index-slider.txt (Which is given below in the attachment ).



    Thanks 
    Akhilesh
    index-slider.txt
    3K
  • Akhilesh, this solved the linking of the overlay but where can I edit the text in the green tabs? (see attached image). the text in the green tabs need to be different than the text in the overlays that comes from the excerpts. Previously Imran solution had a field for entering that text that was separate from the excerpt. That field disappeared. Can you bring it back?

    Thanks,
  • Akhilesh, this solved the linking of the overlay but where can I edit the text in the green tabs? (see attached image). the text in the green tabs need to be different than the text in the overlays that comes from the excerpts. Previously Imran solution had a field for entering that text that was separate from the excerpt. That field disappeared. Can you bring it back?

    Thanks,
    Capture5.JPG
    1410 x 1340 - 189K
  • edited November 2014
     Hi
    Okay
    I have provided the code , I understood  that you want same text content  for both overlay and green tab .
    But now its clear you want different content .

    For this

    1 Repalce the dode of post-meta.php file  (located at Theme Package << functions << meta-box <<post-meta.php file)  with the code of post-meta.txt file .

    2  Find and open  the index-slider.php file in your child theme directory  then find the below line of code on line no 69
      
    <p><?php  echo the_excerpt();//echo get_post_meta( get_the_ID(),'slider_text', true ) ; ?></p>

    And replace  it with

    <p><?php  echo get_post_meta( get_the_ID(),'slider_text', true ) ; ?></p>

    Thanks

    Akhilesh




    post-meta.txt
    17K
  • Akhilesh, this is confusing.
    Your line:
    1 Repalce the code of post-meta.php file (located at Theme Package << functions << post-type <<custom-post-type.php file) with the code of post-meta.txt file .

    Do you mean:
    1 Repalce the code of post-meta.php file (located at Theme Package << functions << meta-box <<post-meta.php file) with the code of post-meta.txt file .

    Thanks,

  • Akhilesh, I did the change as my previous comment in functions/meta-box. It works but there is still a slightly small problem. When I enter text in "Enter green tab text" the text is accepted after an Update but than if I want to edit/change it that field say "Enter slide text" instead of showing me the text that I already entered.

    You can login and see that when you try to edit that field.

    Thanks,
  • Hi

    Ohh !!  Yes .  For this 

    Open and edit  your post-meta.php file and find the below line of code on line no 53

    /*     $slider_text=sanitize_text_field( get_post_meta( get_the_ID(), 'slider_text', true )); */


    And remove its comment like this (replace with below line of code ).

    $slider_text=sanitize_text_field( get_post_meta( get_the_ID(), 'slider_text', true ));

    Thanks

    Akhilesh


  • edited November 2014
    Great thank you, is there a way to allow HTML formatting in that field?
    Example: text or text
  • Great thank you, is there a way to allow HTML formatting in that field?
  • edited November 2014
    hi
    Kindly create separate ticket for separate issues .
    Can I close this ticket ?

    Thanks
This discussion has been closed.