Format Unit Navigation buttons/Links

Hi Gurus,

How do you format the following:
A) The "Next" button at the bottom of Unit Pages? I'd like the button to be much wider and be aligned to the center of the Page.
B) Format the "Save progress and Exit" link to look like a button with the same styles as the "Next" button.
C) Format the pagination menu at the bottom. background colors, border colors, font family, color.
D) I would like all three navigation items to be centered. Not left and right aligned as it is.
Thank kindly.

    Adam Czajczyk

    Hello emilio_gagliardi,

    I hope you're well today and thank you for your question!

    I'll be happy to help you with this but I'd need to check your site as CSS changes are usually related to the theme that's active on the site (and may also be affected e.g. by other plugins). I took a look at the site but unfortunately I cannot see any free course there for which I could signup so I wasn't able to check it.

    The simplest way to let me check it then would be to grant me a support access. To do this, please follow this guide here:

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    I'll then examine site and suggest some CSS rules for you

    Best regards,
    Adam

    Adam Czajczyk

    Hello emilio_gagliardi!

    I checked your site and came up with some CSS code. These rules should do the job:

    A) The "Next" button at the bottom of Unit Pages? I'd like the button to be much wider and be aligned to the center of the Page

    /* "Next" button */
    .submit-elements-data-button {
    	display:block;
    	float:none!important;
    	margin:0 auto!important;
    	padding: 5px 20px; /* first value is top and bottom, second is left and right */
    	border:1px solid #1A8954; /* first value is border width, last is its color */
    	color:#1A8954; /* font color */
    	font-size:20px;
    	background: #F0F0F0; /* color of the button (background of button text*/
    }
    
    /* "Next" button on mouseover */
    .submit-elements-data-button:hover {
    	color:#FFFFFF;
    	background:#1A8954;
    }

    B) Format the "Save progress and Exit" link to look like a button with the same styles as the "Next" button.

    /* "Save progress and exit" link */
    #save_student_progress {
    	text-align:center;
    	display:block;
    	max-width:250px;
    	float:none!important;
    	margin:0 auto!important;
    	padding: 5px 20px; /* first value is top and bottom, second is left and right */
    	border:1px solid #1A8954; /* first value is border width, last is its color */
    	color:#1A8954; /* font color */
    	font-size:20px;
    	background: #F0F0F0; /* color of the button (background of button text*/
    }
    
    /* "Save progress and exit" link */
    #save_student_progress:hover {
    	color:#FFFFFF;
    	background:#1A8954;
    }

    C) Format the pagination menu at the bottom. background colors, border colors, font family, color.

    /* Center pagination links */
    #navigation-pagination.navigation {
    	width:100%;
    }
    #navigation-pagination.navigation ul {
    	text-align:center;
    	padding:10px 10px;
    	margin:10px 20px;
    }
    
    /* Default pagination look */
    #navigation-pagination.navigation li a {
    	border:1px solid #1A8954!important; /* first value is border width, last is its color */
    	color:#1A8954!important;
    	background:#FAFAFA!important;
    
    }
    
    /* Active pagination element */
    #navigation-pagination.navigation li.active a {
    	border:2px solid #1A8954; /* first value is border width, last is its color */
    	color:#FFFFFF!important;
    	background:#1A8954!important;
    }
    
    /* Pagination element on "mouseover" */
    #navigation-pagination.navigation li a:hover {
    	border:2px solid #1A8954; /* first value is border width, last is its color */
    	color:#FFFFFF!important;
    	background:#1A8954!important;
    }

    I suppose you will want to adjust some values that I used here like colors, margins, padding or border widths but all the code above should give you a solid foundation to further style that part's of the site.

    In order to apply it to your site you can either add these rules to the "style.css" file of your child-theme or you can put it into the "Custom CSS" fields in theme settings.

    I hope that helps!

    Best regards,
    Adam