[Resolved] Simple CSS: New GP Premium version 1.9.1

[WAYNE]

Hi,

After I updated to the New GP premium version 1.9.1. My current simple CSS is not working.

1. How can I make my applaud button on the same line with the social sharing button in mobile and desktop versions again?

2. On the article page, for example, “not everyone appreciates honest feedback”, I should have 3 navigation buttons: next, previous, and random button. It went to the original setting for this theme.

Can you check out my Simple CSS again?

@media (max-width: 768px) {
    /* CSS in here for mobile only */
    
    .main-navigation a {
        font-size: 18px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .menu-toggle {
        font-size: 25px;
    }

	.slideout-navigation h2.widget-title {
    	font-size: 18px;
	}
      
}

/*
 * social media icon menu hover color to be: #0054c9ht
 */

#menu-social-sider a:hover {
    color: #0054c9;
}

/*
 * Headline of the post should be aligned with the logo with the same height
 */

.separate-containers article:first-of-type .inside-article {
    padding-top: 11px;
}

/*
 * Hide recaptcha
*/

.grecaptcha-badge {
visibility: hidden;
}

/*
 * no black line on subscribe button in iOS
 */

.mc4wp-form-fields input[type="submit"] {
    border: 0;
}

/*
 * More margin on the right on the desktop version. Similar to Seth Godin. 
 */

.no-sidebar.separate-containers .site-main {
    max-width: 650px;
}

/*
 * Remove Footer Description
 */

.site-info .copyright-bar {
    display: none;
}

/*
 * Put all icons on the same line for desktop and mobile
 */

.main-nav .menu-item-type-custom {
    display: inline-block;
}

/*
 * Sider Menu 1 (social media buttons) to have lesser spacing)
 */
.main-navigation .main-nav ul li a {
    padding-left: 10px;
    padding-right: 10px;
 }

/*
 * Insert line on Blog Index and Post only
 */

.entry-content {
	border-bottom: 1px solid #000;
    padding-bottom: 1.5em;
    margin-bottom: 15px;
}

/*
 * Social icons to the right
 */

.addtoany_list {
    float: right;
    padding-top: 4px;
}

/*
 * YouTube video are out of alignment (desktop / mobile)
 */

iframe[src*="youtube"] {
    max-height: 300px;
}

.nav-previous, .nav-random, .nav-next {
    display: inline-block;
    width: 30%;
    margin: 0 1%;
}

/*
 * mobile version to shorten whitespace for contact me and social icons (desktop / mobile)
 */

.slideout-navigation .inside-navigation .slideout-widget.widget_nav_menu {
    margin-bottom: 5px;
}

.entry-meta .nav-previous a, .entry-meta .nav-random a, .entry-meta .nav-next a {
	background-color: #1da1f2;
	cursor: pointer;
	font-family: "Graphik";
	font-weight: 500;
    text-transform: uppercase;
    font-size: 13px;
    display: block;
    padding: 10px 15px;
	color: #fff;
    text-align: center;
    letter-spacing: 0.05em;
}

.nav-previous span.prev:before, .nav-next span.next:before {
    content: none;
}

.nav-previous a:hover, .nav-next a:hover, .nav-random a:hover {
    color: #fff;
    background-color: #0054c9;
}

/*
 * Social sharing icons hover
 */

.addtoany_list a:hover svg {
    background-color: #0054c9;
}

/*
 * Vertical align applaud count
 */

.wp-applaud, .wp-applaud:hover, .wp-applaud.active {
    height: 32px;
}

.wp-applaud-count {
    color: #000;
    line-height: 10px;
}

.wp-applaud:hover .wp-applaud-count {
    color: #0054c9;
}

/*
 * Divider between columns
 */

#masthead {
    border-right: 1.5px solid #000;
}

/*
 * Menu border colours
 */

#masthead .inside-header {
   	border-top: 8px solid #1DA1F2;
}

#mobile-header {
    border-bottom: 7px solid #1da1f2;
}

#mobile-header .inside-navigation {
    border-bottom: #000 1px solid;
}

/*
 * Graphik
 */

@font-face {
    font-family: 'Graphik';
    font-weight: 400;
    font-style: normal;
    src: url('http://waynetay.com/wp-content/themes/generatepress/fonts/Graphik-400-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Graphik';
    font-weight: 400;
    font-style: italic;
    src: url('http://waynetay.com/wp-content/themes/generatepress/fonts/Graphik-400-RegularItalic.otf') format('opentype');
}

@font-face {
    font-family: 'Graphik';
    font-weight: 900;
    font-style: normal;
    src: url('http://waynetay.com/wp-content/themes/generatepress/fonts/Graphik-900-Super.otf') format('opentype');
}

@font-face {
    font-family: 'Graphik';
    font-weight: 900;
    font-style: italic;
    src: url('http://waynetay.com/wp-content/themes/generatepress/fonts/Graphik-900-Super-Italic.otf') format('opentype');
}

[Tom]

Hi there,

1. It looks like Add to any changes their container class name.

You have:

.addtoany_list {
    float: right;
    padding-top: 4px;
}

It should be:

.addtoany_share_save_container {
    float: right;
    padding-top: 4px;
}

2. How did you add the random button in the first place? A custom function? If so, where did you add it?

[WAYNE]

Hi Tom,

How are you? Thanks for replying to my questions.

1. It is slightly better now. When I do an “inspect element” using Chrome on my Applause button. It has a margin of 20. How can I remove that? I think once I remove that, it will aligned with my social sharing buttons.

2. Honestly, I can’t remember it. However, I would like to make a guess. I think this was a plugin that I installed previously: https://wordpress.org/plugins/wp-random-button/#description

The outcome should be something like this blog post.

https://seths.blog/2020/01/this-will-change-your-mind/

Some of my Simple CSS codes is not working anymore for navigation buttons. Can you help me to check whether the naming convention is it something wrong.

[Tom]

1. Use this as your CSS:

.addtoany_share_save_container {
    float: right;
    margin-top: 0;
}

2. Is that plugin still installed? I don’t think updating GP Premium would prevent a plugin from doing its job.

What about your CSS isn’t working right now?

[WAYNE]

Hi Tom,

Thanks for being so helpful. I resolved question 1.

As for question 2, let me solve it one by one: here it goes.

For this single article page: http://waynetay.com/uncategorized/when-is-good-enough-good-enough/

There are two navigation buttons that point to the next or previous article with the title of articles. How can change the name of the buttons to “Next” and “Back”?

Below there’s a simple CSS that I did – (i forget what the codes mean already) not sure whether it is applicable for us.

Thanks for helping once again…

.entry-meta .nav-previous a, .entry-meta .nav-random a, .entry-meta .nav-next a {
	background-color: #1da1f2;
	cursor: pointer;
	font-family: "Graphik";
	font-weight: 500;
    text-transform: uppercase;
    font-size: 13px;
    display: block;
    padding: 10px 15px;
	color: #fff;
    text-align: center;
    letter-spacing: 0.05em;
}

.nav-previous span.prev:before, .nav-next span.next:before {
    content: none;
}

.nav-previous a:hover, .nav-next a:hover, .nav-random a:hover {
    color: #fff;
    background-color: #0054c9;
}

[Tom]

Hi there,

Try this:

add_filter( 'generate_post_navigation_args', function( $args ) {
    $args['previous_format'] = '<div class="nav-previous">' . generate_get_svg_icon( 'arrow' ) . '<span class="prev" title="%link">Previous</span></div>';

    $args['next_format'] = '<div class="nav-next">' . generate_get_svg_icon( 'arrow' ) . '<span class="next" title="%link">Next</span></div>';

    return $args;
} );

Let me know 🙂

[WAYNE]

Hi Tom,

By the way, that’s a nice display picture with your lovely child. 😉

I tried your code, it is not working. Below are my existing codes for the navigation button.

So how can I can make navigation buttons in my article to stop showing the title of the other articles? I just want it to reflect “previous” and “next”.

Please visit: http://waynetay.com/uncategorized/when-is-good-enough-good-enough/ – you are able to see the two articles as part of the navigation buttons.

/*
*navigation buttons
*/

.nav-previous, .nav-random, .nav-next {
display: inline-block;
width: 30%;
margin: 0 1%;
}

.nav-previous span.prev:before, .nav-next span.next:before {
content: none;
}

.nav-previous a:hover, .nav-next a:hover, .nav-random a:hover {
color: #fff;
background-color: #0054c9;
}

.entry-meta .nav-previous a, .entry-meta .nav-random a, .entry-meta .nav-next a {
background-color: #1da1f2;
cursor: pointer;
font-family: “Graphik”;
font-weight: 500;
text-transform: uppercase;
font-size: 13px;
display: block;
padding: 10px 15px;
color: #fff;
text-align: center;
letter-spacing: 0.05em;
}

[Tom]

Hi there,

How did you add my code? Is it still active on your site?

What version of GP are you using?

Let me know 🙂

[WAYNE]

I managed to roll back my updates for PHP… 😉

[Author]

Posts