Jump to content

Archived

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

Radha

Revslider Text

Recommended Posts

Radha

I am using revslider on the home page (http://www.aasara-india.org/wp/).

 

I would like to change the text size, color, placement on the revslider. 

 

I have tried to understand how this works. Tried using the firebug, chrome tools etc. But just not getting a hang of what I need to change to be able to do this. The Revslider itself doesn't seem to have options where one can directly change stuff.

 

Could anyone help?

 

Radha

Share this post


Link to post
Share on other sites
Danny

Hi Radha,

 

The RevSlider section is extremely powerful. However, it does require some knowledge of HTML and CSS. If you read my guide here for adding a video to RevSlider it should assist you. By following that guide, you can instead of adding a video, use it as a base to add your own text, position and even add your own custom classes to style the output.

 

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Radha

Thanks Danny... but i get this error when I click on your link - 

"Sorry, you don't have permission for that!"

 

I am actually a paid subscriber... bought two copies of DMS... yet I don't get access to post on the main forum either.

 

But could you please give me a link I can access?

 

Thanks a ton,

 

Radha

Share this post


Link to post
Share on other sites
Danny

If you're a paid subscriber, you will need to sync your accounts, to do this follow the instructions below.

 

1. Logout of the forums

2. Clear your browsers cache, history, cookies etc...

3. Now login to your PageLines account

This should now sync your PageLines account with your forum account. Now try logging into the support forums again and see if you can access the premium support forums.

 

If this isn't the case and you're still unable to access the forums, you're most likely using two different email addresses for the two accounts which is causing the sync to fail. If this is the case, you will need to contact our helpdesk who can resolve the issue.

 

hello at pagelines dot com


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Radha

Thanks Danny. My all accounts are in sync.

 

I will take a look at your link and work on this. Will get back to you if I have questions..? Could you please keep this qs open until then?

Share this post


Link to post
Share on other sites
Radha

Hi,

 

Read Danny's explanation. Yes, I am beginning to sort of get it :)  And yes, I managed to place the text where I need it! Now for the rest... :)

 

Thanks Danny. You rock.

Share this post


Link to post
Share on other sites
Radha

Ok. I am back on the revslider question...

 

I have used the example with the inbuilt classes on the revslider documentation site and put this in the Slide Extra Elements:

 

<div class="caption sft big_white"  data-x="400" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">Line1</div>
<div class="caption sfb big_orange"  data-x="400" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">LINE2</div>
<div class="caption lfr medium_grey"  data-x="510" data-y="210" data-speed="300" data-start="2000">LINE3</div>

 

and this is what I get - http://www.aasara-india.org/wp/482-2/#.

 

The text appears where it is supposed to, but none of the classes are applied - colour, font-size etc.

I also tried applying my own class. Even that didn't work.

 

What am i doing wrong?

Share this post


Link to post
Share on other sites
Danny

I can't see any of your custom CSS associated to the classes you added, thats why there not working, as they aren't there. You will need to check your custom CSS and make sure you have added them correctly.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Radha

Ok. Sorted it out like this...

 

Put the following in the Slide Extra elements (goes with slide-specific text on each slide):

 

 <div  class="caption sft" data-x="5" data-y="400" data-speed="700" data-start="1700" data-easing="easeOutBack">

         <h2 <span style="color: #ff9933;">The Timbaktu Collective</span></h2>
         <h3><span style="color: #ffffff;"><em>in celebration of the Collective</em></span></h3>
         <h4><span style="color: #ffffff;">reaching 25,000 people in 150 villages</span></h4>
</div>
 
the output comes like this - http://www.aasara-india.org/wp/
 
Still couldn't do it through referencing a class. Wish knew how to do that... if you could give me pointers will be extremely grateful...
but for now this will do, I guess!
 
Thanks a lot for all your support. It helps us during sleepless nights :)
 
Radha

Share this post


Link to post
Share on other sites
Danny

Firstly your code isn't correct, you're missing a > on the beginning <h2> tag.

 

<div  class="caption sft" data-x="5" data-y="400" data-speed="700" data-start="1700" data-easing="easeOutBack">
         <h2><span style="color: #ff9933;">The Timbaktu Collective</span></h2>
         <h3><span style="color: #ffffff;"><em>in celebration of the Collective</em></span></h3>
         <h4><span style="color: #ffffff;">reaching 25,000 people in 150 villages</span></h4>
</div>

 

All you need to do is add your class name to your elements like so:

 

<div  class="caption sft my-class my-class-two" data-x="5" data-y="400" data-speed="700" data-start="1700" data-easing="easeOutBack">
         <h2 class="text-white">The Timbaktu Collective</span></h2>
         <h3 class="text-white"><em>in celebration of the Collective</em></span></h3>
         <h4 class="text-white">reaching 25,000 people in 150 villages</span></h4>
</div>
 
In the above code, the class names I've added are in red. Now you need to make sure that these class names have some styling and are present in your custom CSS. For example:
 
.text-white { color: white; }
.my-class { background-color: green; }
.my-class-two { padding: 40px 0; }
 
So what I have done is, adding some custom CSS and then referenced their class names in my elements above.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Radha

Yep. Sorted out. Works perfectly.

 

Thanks for being so patient.

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
quinntinm

Hi Danny, i have tried what you have suggested above, but cannot get the slider text to be a specific width - i am not sure if i am targeting it correctly or not.

even wen i select the area (#site .revslider-container small) using chromes inspector, i cannot make the text a specific width, it just runs all the way off the screen on the right.

 

Any ideas or documentation i can look at for this?

 

Thank you.

Share this post


Link to post
Share on other sites

  • Similar Content

    • stijnxo
      By stijnxo+
      The Filtering of categories in the Masonic Gallery refreshes back to ALL categories when the DMS Revslider loads a new image?
      Anybody any idea? See Artists Category refreshes back to ALL when the DMS Revslider with images on the top loads a news image on http://www.18hrsfestival.nl/
    • carl
      By carl+
      Trying to convert a site over to PL5 from DMS2. Can we use revslider? Can any portion of DMS2 be editable or imported through PL5?
      I'm trying to wrap my head around the new PL5 os, but things have changed so much it like learning a new software. I DO like the new UI! Great job.
    • jennajonesdesign
      By jennajonesdesign+
      Hi Guys, 
      I just went live with this site. http://bikenet.org/
      I can see the video background in Firefox, Chrome and IE on my computer as well as my husband's computer and my phone. So I am not able to see any problem. 
      But, my client says she cannot see the video background in Chrome?? Any ideas? 
      Let me know. Thanks!
       
      Jenna
    • Bleuy
      By Bleuy+
      Problem: Full Screen Revslider content runs off the screen on mobile devices (particularly calls to action buttons).  I've used the <br> to break up the text, however the call to action buttons run off the screen.  Therefore without making the fix too technical (and I can see some VERY technical resolutions on here) my client just wants to simple centre justify the text when being viewed on a mobile device.  
      Any ideas on how best to achieve this in a simple, non too technical way?
      Thanks very much in advance
       
    • AliceNicholls
      By AliceNicholls+
      Hi there,
      I'm trying to place the menu bar on top of a Revslider image using negative top margins and z-scores to place the Revslider under the menu as per this forum post: https://forum.pagelines.com/topic/37996-menu-inside-full-width-slider/
      It looks great in Chrome and Safari but in Firefox the slider doesn't spread out across the page. Instead it stops when it collides with the items in the menu (i.e. logo and menu items). Any advice on what I'm doing wrong?
      The full site is here: http://seemly-hobby.flywheelsites.com/
      Thanks a lot!
      Al

×