Jump to content

Archived

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

andylemay

Rev slider custom CSS not overiding slider defaults

Recommended Posts

andylemay

Hi

 

I have an issue with the custom CSS on Rev Slider not overiding the defaults.

 

e.g. either 

 

//Revoslide CSS mod

.test .slider-text {
  color: #0f0;
}
 
or
 
//Revoslide CSS mod
.slider-text {
  color: #0f0;
}

 

Returns the following in Chrome inspector

 

element.style {
}
 
media="all"
 
.revslider-container .slider-content h2 .slider-text {
  1. padding4px 0px;
  2. backgroundrgba(0,0,0,0.5);
  3. box-shadow10px 0 0 rgba(0,0,0,0.5),-10px 0 0 rgba(0,0,0,0.5);
  4. color#fff;
  5. margin-bottom1px;
  6. background-positionright -53px;
  7. -webkit-transitionall 0.3s linear;
  8.  
    -moz-transitionall 0.3s linear;
  9.  
    -ms-transitionall 0.3s linear;
  10. transitionall 0.3s linear;
  11. margin-bottom15px;
}
 
 
.test .slider-text {
  1. color#0f0;
}

 

The custom CSS colour attribute is being overridden by the defaults.

 

testing at www.eshot.co.za

 

Have removed all CSS and tested.  Same postional result.  Last versions of DMS and WP.

 

Any idea?

 

Thank you 

 

Andy

Share this post


Link to post
Share on other sites
andylemay
Ok my bad!
 
//Revoslide CSS mod
.test .revslider-container .slider-content h2 .slider-text {
  color: #0f0;
}
 
Hadn't defines the CSS properly.  this fixes it!  Getting there with CSS :-)
 
element.style {
}
 
 
.test .revslider-container .slider-content h2 .slider-text {
  1. color#0f0;
}
 
media="all"
 
.revslider-container .slider-content h2 .slider-text {
  1. padding4px 0px;
  2. backgroundrgba(0,0,0,0.5);
  3. box-shadow10px 0 0 rgba(0,0,0,0.5),-10px 0 0 rgba(0,0,0,0.5);
  4. color#fff;
  5. margin-bottom1px;
  6. background-positionright -53px;
  7. -webkit-transitionall 0.3s linear;
  8.  
    -moz-transitionall 0.3s linear;
  9.  
    -ms-transitionall 0.3s linear;
  10. transitionall 0.3s linear;
  11. margin-bottom15px;
}
 
 

Share this post


Link to post
Share on other sites
andylemay

However,

All this is because I actually just want to right align text in the text box.

 

If I put this as custom CSS for the slider it achieves this but the placement of the text is too far left and covering my slide too much.

 

//Revoslide CSS mod
.e-rev-align-text-right .revslider-container .slider-content.right-side {
  text-align: right;
}

 

So then I tried adding this to the "slide extra elements" for the particular slide I wanted the text on the right for.

 

<div class="caption slider-content right-side sfr stl tp-caption start" data-x="700" data-y="200"><h2><span class="slide-text">
Smooth freeway<br>cruising </span> </h2>
</div>
 
Which works but now looses the default text formatting.
 
Any ideas?

Share this post


Link to post
Share on other sites
andylemay

So managed to fix it by copying the HTML out of the the inspector and tweaking the position element.

 

<div class="caption slider-content right-side sfr str tp-caption start" data-x="700" data-y="130" data-speed="300" data-start="700" data-easing="easeOutExpo" style="font-size: 34px; padding: 0px; margin: 0px; border: 0px; line-height: 57px; white-space: nowrap; opacity: 0; left: 900px; top: 130px; -webkit-transform: rotate(0deg); visibility: hidden;"><h2><span class="slider-text">Smooth freeway<br>cruising</span></h2> </div>

 

Having to resort to this kind of modification makes it much harder to use DMS.   Please can I suggest that we get more options built into the standard dialogue for the Rev Slider to speed up development.

Share this post


Link to post
Share on other sites
Danny

Hi,

There is already an option to position your text left, center or right. However, if you want to customize the position of text, then the best solution is to use the method you have, as this allows you to position your text, add custom classes, custom text or media etc.. and style it however you like.

Thats the whole purpose of the Slide Extra Elements option area, this makes the RevSlider an incredibly powerful section. There is some learning curve, but once you get the gist of it, its rather quite simple.

If you do not like this approach, then I would recommend either using the RevSlider plugin for Wordpress or find an alternative slider such as QuickSlider, or one from the Pagelines store or Wordpress repo.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
andylemay

Hi Danny,

 

Thanks for the feedback.  If I but the Wordpress Revslider plugin can use it as a section in DMS.

 

The problem I had was that when you did a "right hand" text position it aligned the text on the left.  So just to change this I had to get into the complexity of the plugin's options.  The documentation link to the supplier is not very helpful and not complete either.

 

I'll check out the one on the pagelines store.

 

DMS is an excellent product, keep up the good work.

 

Andy

Share this post


Link to post
Share on other sites

×