Docs

[UCSAMatt]

Hello,

First off thank you so much for providing top notch support for your products. Seriously, the best I have ever seen.

Secondly, I have an issue where I’m trying to move a logo over to the right while keeping the buttons that I have on the same level, where they are. Every time I mess with padding or margins, it ends up pushing the other elements over. I’m referring to this development website: http://dev.ucsaintl.com/FFPC

I would like the logo centered on the page, but the Subscribe To Newsletter and the Donation button to remain in place where they are. Can you point me in the right direction with CSS to accomplish this? Maybe I need to change the page to a full-width page to make room, but I’m still struggling with the CSS changes to make the logo centered and not push the other buttons to the right.

I also need to push the Social Media buttons to the same line as the Logo and the other buttons, but on the left of the logo where they are, but pushed down to line with the bottom of the logo.

One last thing…the Subcribe and Donate buttons are also defaulting to the 3d buttons and I was wondering how to set them to rounded flat buttons? The current CSS I have is:

/* Header buttons */
.newsletter-btn {
margin-right: 20px;
color: #000000;
background-color: #97d045;
border-color: #97d045;
box-shadow: 0 0.25em 0 0 #7AB523,0 4px 9px rgba(0,0,0,0.75);
}

.newsletter-btn:hover {
margin-right: 20px;
color: #FFFFFF;
background-color: #97d045;
border-color: #97d045;
box-shadow: 0 0.25em 0 0 #7AB523,0 4px 9px rgba(0,0,0,0.75);
}

.donate-btn {
margin-right: 20px;
color: #000000;
background-color: #EAB03D;
border-color: #EAB03D;
box-shadow: 0 0.25em 0 0 #c69535,0 4px 9px rgba(0,0,0,0.75);
}

.donate-btn:hover {
margin-right: 20px;
color: #FFFFFF;
background-color: #EAB03D;
border-color: #EAB03D;
box-shadow: 0 0.25em 0 0 #c69535,0 4px 9px rgba(0,0,0,0.75);
}

Thank you very much for your assistance!

Matthew Purdom

[Nico]

Hi There,

Thanks for writing in.

Would you mind sharing us the details we need below so we could easily achieve the customization you need and to prevent longer thread.

– WP admin credentials
– Screenshot with description of the customization you want to achieve.

Don’t forget to set it as private reply.

Thanks.

[UCSAMatt]

This reply has been marked as private.

[Jade]

Hi Matthew,

I have tried to navigate to /wp-admin and /wp-login.php page of your site but both redirects to a 404 page.

Would you mind providing the correct login link to your site? Thank you.

[UCSAMatt]

This reply has been marked as private.

[Thai]

Hi There,

Please uptdate your custom CSS a bit:

/* Header buttons */
.newsletter-btn {
margin-right: 20px;
color: #000000;
background-color: #97d045;
border-color: #97d045;
box-shadow: 0 0.25em 0 0 #7AB523,0 4px 9px rgba(0,0,0,0.75);
position: absolute;
top: 60px;
right: 0;
}

.newsletter-btn:hover {
margin-right: 20px;
color: #FFFFFF;
background-color: #97d045;
border-color: #97d045;
box-shadow: 0 0.25em 0 0 #7AB523,0 4px 9px rgba(0,0,0,0.75);
}

.donate-btn {
margin-right: 20px;
color: #000000;
background-color: #EAB03D;
border-color: #EAB03D;
box-shadow: 0 0.25em 0 0 #c69535,0 4px 9px rgba(0,0,0,0.75);
position: absolute;
top: 60px;
right: 250px;
}

.donate-btn:hover {
margin-right: 20px;
color: #FFFFFF;
background-color: #EAB03D;
border-color: #EAB03D;
box-shadow: 0 0.25em 0 0 #c69535,0 4px 9px rgba(0,0,0,0.75);
}

Hope it helps 🙂

[UCSAMatt]

Great! That did put the buttons on the right in line with the logo and centered it.

How about moving the social buttons in line with the logo and also the two buttons to be flat buttons instead of 3D buttons? Like in the attached screenshot in the thread.

Really appreciate the assistance!

[Christian]

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[UCSAMatt]

Perfectly understandable. Thank you for the support thus far.

[Rue Nel]

You’re welcome!
We’re glad we were able to help you out.

[UCSAMatt]

Sorry to open this dialog back up, but the convertplug modal that was attached to the newsletter button is no longer working. I’m looking to have my newsletter signup modal popup with shortcode [cp_modal id=”cp_id_11a37″][/cp_modal] or css class nl-modal-trigger, when a user clicks on the Subscribe to Newsletter button. It was working when the button was in the topbar, but since moving it around for some reason is no longer working. Looking at the above CSS that Thai gave me, it positioned the buttons where I needed them (thank you!), but the javascript pasted below is what is used for the buttons and I’ve read that there is no easy way to add a shortcode to jquery, so I’m wondering how I can launch this modal now…

Javascript:

jQuery( ‘SUBSCRIBE TO NEWSLETTER‘ ).insertAfter( “.x-brand.img” );

[Rad]

Hi there,

Have you changed the URL, I’m not able to get into the login page. It says 404.

For the meantime, please change this code

      jQuery('.x-colophon-content').insertAfter('#menu-footer-menu');

jQuery( document ).ready(function() {
  jQuery( '<a title="" href="#" class="x-btn right donate-btn">DONATE</a>' ).insertAfter( ".x-brand.img" );
  jQuery( '<a title="" href="#" class="x-btn right newsletter-btn">SUBSCRIBE TO<br> NEWSLETTER</a>' ).insertAfter( ".x-brand.img" );
});

$(document).ready(function() {
  $("a.x-face-button']").attr('target','_blank');
});    

to this,

      jQuery('.x-colophon-content').insertAfter('#menu-footer-menu');

jQuery( document ).ready(function() {
  jQuery( '<a title="" href="#" class="x-btn right donate-btn">DONATE</a>' ).insertAfter( ".x-brand.img" );
  jQuery( '<a title="" href="#" class="x-btn right newsletter-btn">SUBSCRIBE TO<br> NEWSLETTER</a>' ).insertAfter( ".x-brand.img" );
});

jQuery(document).ready(function( $ ) {
  $("a.x-face-button").attr('target','_blank');
});    

Hope this helps.

[UCSAMatt]

Oh thank you! Sorry the url is: http://dev.ucsaintl.com/FFPC/wp-login.php

Thank you!

[Rad]

Hi there,

The newsletter button uses the class newsletter-btn and not nl-modal-trigger.
I went ahead and changed your modal settings. But, it still not working, the click event isn’t bind either.

I did change some settings with no luck.

Would you mind re-installing your ConvertPlug plugin? Then please provide your admin login credentials in private reply too.

Thanks!

[UCSAMatt]

This reply has been marked as private.

[Author]

Posts