Home>Support>Change navigation arrows to prev/next

Change navigation arrows to prev/next

Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hello SiteOrigin,

First of all, thank you very much for your way of building WordPress! :-)

Second, how can I change the content of the arrows into prev & next?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 4 months ago Alex S
    Hi, I Work Here

    Hi Mathciet,

    Thank you for those very kind words! :)

    Just to confirm, you’re asking about changing the sliders next / previous links? If you are, here’s how.

    Firstly, make sure your navigation style is set to thin for the slider. Then, Navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

    .sow-slide-nav em {
        color: #fff;
        visibility: hidden;
    }
    
    .sow-sld-icon-thin-left:after {
        content: 'prev'; 
        visibility: visible;
    }
    
    .sow-sld-icon-thin-right:after {
        content: 'next';
        visibility: visible;
    }
    

    You might also need to install the SiteOrigin CSS Editor.

  2. 9 years, 4 months ago mathciet

    Thank you very much for that!
    I was thinking in changing it in js…

    Can I also ask how to get the navigation out of the slider?

  3. 9 years, 4 months ago Alex S
    Hi, I Work Here

    Hi Mathciet,

    Please replace the above CSS with the following CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

    .sow-slide-nav em {
    	visibility: hidden;
    }
    
    .sow-sld-icon-thin-left:after {
    	content: 'prev'; 
    	visibility: visible;
    	position: relative;
    	right: 100px;
    	color: #000;
    }
    
    .sow-sld-icon-thin-right:after {
    	content: 'next';
    	visibility: visible;
    	position: relative;
    	left: 100px;
    	color: #000;
    }
    
    .sow-slider-base {
    	overflow: visible !important;
    }
    

    You might also need to install the SiteOrigin CSS Editor.

  4. 9 years, 4 months ago mathciet

    Thank you very much! Exactly what I needed!

  5. 9 years, 4 months ago Alex S
    Hi, I Work Here

    Hi Mathciet,

    It’s been an absolute pleasure. :) Is there anything else I can help you with today?

  6. 9 years, 4 months ago mathciet

    Not today, maybe later! :-)

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More