Jump to content

Archived

This topic is now archived and is closed to further replies.

sethoof

Rev Slider Title Text Position

Recommended Posts

sethoof

Sorry in advance if this question is answered somewhere.  I have spent ages looking through previous forum posts and even the documentaion here, but I cant seem to figure out how to move the rev slider title around. I tried to put the x and y pos code (<div class="slider-text" data-x="0" data-y="0"></div>) into the slide extra elements, but it doesnt work. 

 

Can someone please let me know how to move the slide title?

 

Thanks,

seth

Share this post


Link to post
Share on other sites
Danny

Hi Seth,

If you want your title to be a custom location, you can do this by following the instructions here.

 

http://forum.pagelines.com/topic/28168-revslider-how-to-add-video-and-have-it-resize-properly/page-2

 

Although the topic is related to a video, you can use this as a base to add your own, you will need to review the documentation on the http://www.orbis-ingenieria.com/code/documentation/documentation.html#!/markup site to get the correct markup, but the process is the same.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
sethoof

Thanks, Danny.  I have looked in detail at both of the links.  I used it to put in a video. I think the thing that I am not clear about is where do I adjust the parameters of the text position for the slider text. 

 

I think the data-x and data-y fields are what I want to change for the slider-text class, but should I change that in the <div class> bit (see below) or put something in where you have the three dots?

 

<div class="caption lfb boxshadow" data-x="70" data-y="120" data-speed="900" data-start="500" data-easing="easeOutBack">
...
</div>
 
Sorry, I am still learning all this styling stuff...

Share this post


Link to post
Share on other sites
Danny
data-x The horizontal position in the standard (via startwidth option defined) screen size (other screen sizes will be calculated)
data-y vertical position in the standard (via startheight option defined) screen size (other screen sizes will be calculated)
 
Also no need to apologise dude, thats what we're here for.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
sethoof

Thanks, Danny.  Using Firebug, I tried to find the class that held the slider text.  I then pasted the following into the Slide Extra Elements box:

 

<div class="caption slider-content left-side sfl stl tp-caption start" data-x="200" data-y="0"></div>

 

But all that happend is that the Slider title text disappeared.  I am not sure what I am doing wrong.  Should I be adjusting the variables in a different way?

Share this post


Link to post
Share on other sites
Danny

Ah sorry my bad here I should have explained in greater detail.

If you want your text in a different position i.e. custom then what you will need to do is this, use that <div> you have then add your text between it for example.

<div class="caption slider-content left-side sfl stl tp-caption start" data-x="200" data-y="0"><h2><span class="slider-text">
Welcome to DMS.<br>
A Drag <span class="spamp">&amp;</span> Drop Platform <br> for Amazing Websites.
</span></h2></div>

So add your image using the image uploader, then leave all other options empty, then add the above code to the Slide Extra Elements thats how you customize the slider, adding your own content.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
sethoof

Thanks, Danny!!  That worked perfectly!  Appreciate your help!

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
andylemay

Hi Danny,

 

I trying to remove the default box-shadow with CSS but it is ignored unless I turn it off in inspector on .slider-text.

 

Here the the Custom CSS I added and I added the class e-slide-modes to the revoslider.

 

//Revoslide right text align
.e-slide-mods.revslider-container .slider-content h2 .slider-text{
  box-shadow: none;
  text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4);
  colour #000;
  box-shadow: none;
  background: none;
  text-background: none;
}
 
Where am I going wrong !
 
 
Thanks Andy

Share this post


Link to post
Share on other sites
Danny

Just use this:

 

#site .slider-text {
background: rgba(0, 0, 0, 0);
box-shadow: none;
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

Hi Danny, thanks for explaining the above. I've succeeded in moving the text to the right location with this workaround. But my button doesn't show up. I presume I need to add some more code in the Slide Extra Elements box but have no idea what. can you help out?

It is for www.clubup.info and then the orange slider image (not my most aesthetic best website but okay ;-) )

Share this post


Link to post
Share on other sites
James B

Hi Jan

 

Do you mean the read more button? If you're adding that via the slider elements you can put it in with the html,

 

<a class="slider-btn" href="http://www.clubup.info/12-april-clubup-classic/">Lees Meer</a>


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
janpeeters

Yeah that's the one I guess. I'll try that out later. Thanks for your help!

Share this post


Link to post
Share on other sites
James B

You're welcome, let us know how you get on.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
janpeeters

Hey James, it worked nicely. Thanks again! Jan

Share this post


Link to post
Share on other sites
James B

Excellent, glad it worked. Thanks for updating the thread and letting us know Jan


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

×