Docs

[wedtke]

Hey there,

first of all, nice work people, this is my 6th X/CS website in a row. Really satisfied.

right now i am working on http://www.lukasdroese.de

I want the Slider PREV/NEXT Buttons to look in the image attached. (Color, Position, Size)
Could you provide the custom CSS Code? That would be fantastic.

Thanks and cheers,
Nils

[wedtke]

This reply has been marked as private.

[wedtke]

Second Question (almost forgot):

The client wants his social icons vertically aligned fixed at the right top corner, like in the image attached.
Could you also provide the custom css code for that?

Thanks and best regards
Nils

[Rue Nel]

Hello There,

Thanks for writing in and the very detailed information.

1] To change the arrows in your sliders, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .x-flexslider .x-slides img {
    margin-bottom: 0;
}

.site .flex-direction-nav a {
    border-radius: 0;
    opacity: 1;
    background-color: #fff;
    color: #000;
    top: 50%;

    transition: all 0.35s linear;
}

.site .flex-direction-nav a:hover {
    color: #ccc;
}

.site .flex-direction-nav a.flex-prev {
    left: 0;
}

.site .flex-direction-nav a.flex-next {
    left: auto;
    right: 0;
}

You should have something like this:
http://prntscr.com/coeg0t
http://prntscr.com/coeg37

2] For easier management and with no coding needed, you can install a 3rd party plugin for your social icons. Please try any of this social icon plugins: https://wordpress.org/plugins/search.php?q=social+icons

Hope this helps.

[wedtke]

Hey, thanks for the quick response to my first question, it works perfect.

2) Sorry to say, but I bought X – one of the most expensive themes on the market. One of the reasons i chose X is your support and the promise that is has just everything onboard.

Almost every third party plugin is either limited “go pro -buy here” or doesnt provide the exact feature I am searching for.
I am not able to write the code myself, so would you please SUPPORT – or is this “too big” to ask?

The icon files needed are already uploaded.
Cheers Nils

[Rue Nel]

Hello Again,

By default, the social icons can be added in your topbar or at the footer. You can even have them to appear to both the header and footer at once. At the moment this is no option that it can be added just the way you like. Here what I could suggest, please enable the social icons first. Please go to your customizer, Appearance > Customize > Social and insert the link of your social profile that applies. After that, please go to the Appearance > Customize > Footer and enable the footer social. And lastly, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .x-colophon.bottom .x-social-global {
    position: fixed;
    top: 120px;
    right: 0;
    z-index: 20000;
    padding: 10px;
}

.site .x-colophon.bottom .x-social-global a{
    display: block;
    margin: 5px;
    padding: 5px;
    background-color: #000;
}

Hope this helps.

[wedtke]

Hi there, big thanks, works nice.

I added some custom icons via CSS and javascript with the help of another post.
2 of 4 icons are working – can you tell me why the ITUNES and the MAIL icons are not displaying?

For the itunes icon i used the same technique as for the spotify and amazon icon.
For the Mail icon i used the x-icon-envelope.

thanks!

[Christopher]

Hi there,

Please update itunes code to :

(function($){ 
	$('.x-social-global').append('<a href="https://itunes.apple.com/de/artist/lukas-droese/id329533125" class="itunes" title="iTunes" target="_blank"><i class="x-icon-itunes"></i></a>');
})(jQuery);

Hope it helps.

[wedtke]

Thx, worked – what about the envelope?

[Christopher]

Hi there,

Please find this code :

.site .x-colophon.bottom .x-social-global {
    position: fixed;
    top: 120px;
    right: 0;
    z-index: 20000;
    padding: 10px;
}

And update it to :

.site .x-colophon.bottom .x-social-global {
    position: fixed;
    top: 57px;
    right: 0;
    z-index: 20000;
    padding: 10px;
}

Update email js code to following :

(function($){ 
	$('.x-social-global').append('<a href="mailto:[email protected]" class="mail" title="Mail" target="_blank"><i class="x-icon-home" data-x-icon=""></i></a>');
})(jQuery);

Hope it helps.

[wedtke]

Thanks, worked fine. Have a nice day.

[Thai]

Glad it worked 🙂

If you need anything else please let us know.

[wedtke]

Hey guys,

you did an amazing job, my client is super happy.

Now, the social buttons – is it possible to make them look good on mobile devices?
My first idea was to just shrink them in mobile view if possible – if not: Maybe make them disappear in mobile and let the social top bar appear instead?

Thanks in advance, Nils, Hamburg Germany.

[wedtke]

Screenshot

[Joao]

Hi There,

Please add the following code and adjust according to your wishes, the height, width, font-size and line-height:

@media(max-width: 480px) {
.x-colophon.bottom .x-social-global a {
     width: 35px;
    height: 35px;
    font-size: 12px;
    font-size: 20px;
    line-height: 35px;
}
}

Hope that helps

Joao

[Author]

Posts