Slider text transparency - Support | Kriesi.at

Viewing 20 posts - 1 through 20 (of 20 total)

Author

Posts
November 12, 2013 at 10:48 pm #187494

nickgibbens01
Participant

Hi there

I am using the excellent Enfold theme on a website I am developing for a friend: http://www.alicemackintosh.com/

I have a couple of questions:

1.) On http://kriesi.at/themes/enfold/homepage/home-v4-small-slider/ you have a grey/black transparent background effect on the slider wording. Can you send me the CSS for this pls? I take I can put it in the Quick CSS box in Enfold Styling.

2.) What is the CSS to change the colours of the footer? Both where the widgets go and the copyright part.

Many thanks
Nick

November 12, 2013 at 10:51 pm #187496
Josue
Inactive Moderator
Hey Nick!

For the captions, add this CSS:
```
.ls-layer span { 
background: rgba(0, 0, 0, 0.5);
padding: 20px !important;
display: block;
}
```
Regarding the footer, by colours you mean the font colours or the background colour?

Cheers,
Josue
November 12, 2013 at 11:26 pm #187523
nickgibbens01
Participant
Hey Josue, thanks for the quick response.

I have added this code and it works well, but how do I get padding on the right hand side, as currently the wording goes right to the edge of the image.

And I mean the actual background colours in the footer, currently grey.

Thanks

Nick
- This reply was modified 11 years ago by nickgibbens01.
November 12, 2013 at 11:46 pm #187540
Josue
Inactive Moderator
Hi Nick!

The right padding is there, you just need to push the span to the left (try using a % value instead of a px one) in LayerSlider.

For the footer, use this:
```
#footer .flex_column{
    background: red !important;
    padding: 0 20px; /* You may want to add some padding too */
}
```
Or if you want to have a different background color for each one:
```
#footer .flex_column:nth-child(1){
    background: green !important;
}
#footer .flex_column:nth-child(2){
    background: yellow !important;
}
#footer .flex_column:nth-child(3){
    background: blue !important;
}
#footer .flex_column:nth-child(4){
    background: peru !important;
}
```
Cheers!
Josue
November 13, 2013 at 10:59 pm #188036

nickgibbens01
Participant

Thanks for this code Josue, I will try it out soon and let you know how I get on.

Another question, how do you get the slider to not show the wording (span) on a mobile (smaller) device? It just looks a tad silly on an iphone for example as the writing is so small. In this instance it would be good to just show the slider image.

Thanks

Nick

November 13, 2013 at 11:09 pm #188040
Josue
Inactive Moderator
Hey Nick!

This code will do it:
```
@media only screen and (max-width: 767px) {
.ls-layer span { 
display: none !important;
}
}
```
Cheers!
Josue
November 14, 2013 at 12:59 am #188113

nickgibbens01
Participant

Thanks again for such a quick response, excellent service I must say. Just added thois code and works a treat. So bascially anything with a browser size that is below 767px will not show the wording on the slider? What is an Ipad or other standard tablet out of interest?

I have one further question, when you play around with the responsiveness of the theme, if you reduce the browser window to a certain size the navigation totally goes: see

Is this just an issue with the a desktop browser so effectively would never be an issue in the real world?

November 14, 2013 at 5:49 am #188219
Ismael
Moderator
Hi!

Please edit js > avia.js, find this code on line 90:
```
switchWidth 	  = 767;

    	if(first_level_items > 7 + header.find('#menu-item-search').length && !bottom_menu)
    	{
    		switchWidth = 989;
    		header.addClass('mobile_menu_tablet');
    	}
```
Replace it with:
```
switchWidth 	  = 1006;

    	if(first_level_items > 7 + header.find('#menu-item-search').length && !bottom_menu)
    	{
    		switchWidth = 1006;
    		header.addClass('mobile_menu_tablet');
    	}
```
Remove browser cache then reload the page a few times.

Regards,
Ismael
November 20, 2013 at 11:06 pm #191169

nickgibbens01
Participant

Hey there, thanks for the response. I have replaced the above with what you suggested, however it has not fixed the problem.

Any other ideas?

Thanks

Nick

November 21, 2013 at 2:07 am #191232

Josue
Inactive Moderator

Hey Nick!

That behavior is unexpected, it doesn’t happen neither in the demo nor in my local installation, try the following:

1. Disable all third-party plugins (some js may be conflicting).
2. Re-install the theme (backup any theme modification you’ve made first).

Best regards,
Josue

November 23, 2013 at 4:38 pm #192280

nickgibbens01
Participant

Hey Josue, I will get back to you on the above soon, but going back to footer colours: the code you have given me changes the actual column colours. I’m looking to achieve this: http://www.alicemackintosh.com/wp-content/uploads/2013/11/alice-footer-colours-new.jpg

Any ideas?

November 24, 2013 at 4:58 am #192405

Josue
Inactive Moderator

Hey!

You can change those colors in Enfold > Styling:

Best regards,
Josue

November 25, 2013 at 12:22 am #192665

nickgibbens01
Participant

Ok that’s great, somehow missed that bit, but its great to have so much control from the backend.

Regarding “when you play around with the responsiveness of the theme, if you reduce the browser window to a certain size the navigation totally goes: see”

When I set Responsive Header Main Menu to “Display as slide out menu” the issue s fixed – see my website now. I.e it always shows the navigation. This is what the Enfold demo uses. But when its selected to “Display as Dropdown menu” it then gets lost at a certain browser size.

Have disabled plugins but this does not fix it.
Thanks
Nick

November 25, 2013 at 2:30 am #192717

Josue
Inactive Moderator

Hi,

Can you create an administrator account and post it here as a private reply?

Regards,
Josue

December 13, 2013 at 9:08 pm #200079

nickgibbens01
Participant

This reply has been marked as private.

December 14, 2013 at 5:16 pm #200245

Yigit
Keymaster

Hi!

Please go to Users > Add New in WordPress dashboard and set the role as administrator and post username and password here privately

Cheers!
Yigit

December 16, 2013 at 9:48 pm #200785

nickgibbens01
Participant

This reply has been marked as private.

December 19, 2013 at 3:45 am #201833
Josue
Inactive Moderator
Hey!

Fixed: http://www.alicemackintosh.com/

I added this code to the Quick CSS:
```
.responsive .mobile_menu_tablet .main_menu {
    display: block !important;
}
```
Cheers!
Josue
December 21, 2013 at 8:46 pm #202916

nickgibbens01
Participant

Thanks for all your help. Hopefully I have also helped you improve the theme as well.

Great support I must say :)

December 22, 2013 at 12:02 am #202940

Josue
Inactive Moderator

You are welcome, glad we could help.

Happy Holidays :)

Regards,
Josue
Author

Posts

Viewing 20 posts - 1 through 20 (of 20 total)

The topic ‘Slider text transparency’ is closed to new replies.