Docs

[gignnn]

Hello guys,

Thanks again for all of your help, my website is nearing completion and really starting to look impressive thanks to the aesthetics and flexibility of the X theme!

On my homepage, one of my jumbo call to action buttons has light rather than bold text like the rest of the buttons, and for the life of me I can’t figure out why. The button I am talking about is the “VIEW INVENTORY” button in the listings section of the homepage at http://nnnpropertiesgroup.com.

Could you look into this for me? Thanks a lot!

[Darshana]

Hi there,

Thanks for writing in! Could you please try adding the following CSS rule into your Customizer, Custom > CSS area.

.x-btn-jumbo {
    font-weight: 600;
}

Hope that helps.

[gignnn]

Thank you very much, that worked perfectly! I am running into another issue that involves resizing some images using the X shortcode. I was under the impression that I can resize an image by adding a width=”50%” after the image source within the code, but this doesn’t appear to be working. Could you remind me how to accomplish this? The images can be found within my biography overview on the http://nnnpropertiesgroup.com/about-us/ page. Thank you!

[Rue Nel]

Hello There,

Thanks for the updates! What you have been doing is meant for something else and it may require a special 3rd party plugin. You should place that css code in the inline style width: 50%; instead.

Hope this helps.

[gignnn]

Hello,

Thanks for the reply — do you have any idea which third party plugin could be used for that? It’s not a huge deal, I can always resize the pictures and re-upload them if need be. Thanks!

[Lely]

Hi There,

I found this:https://wordpress.org/plugins/wp-photo-album-plus/
Please just note that we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer. If you can resize and re-upload theme that would be better. Hope this helps.

[gignnn]

Great, thank you! I believe I am close to 99% complete here, but I just noticed that I am having trouble figuring out how to style the buttons on the following page so that they match the rest of my theme:

https://nnnpropertiesgroup.com/client-resources/1031-calculator/

Could you let me know the best way to do this when you have some time? Thanks!

[gignnn]

As a follow up, do you know how I can style all of the inputs so that they have curved corners, and is there a way I can add a blue highlight on the right side of all of the input fields that are required to be filled in by the user?

As you can probably tell, these required fields are the fields that currently have square corners. Finally, is there a way to remove the zeros from all of these required fields?

Thank you!

[Rad]

Hi there,

Please add this code to Admin > Appearance > Customizer > Custom > Javascript.

jQuery('table input[type="button"]').addClass('x-btn x-btn-rounded x-btn-small');

And add this CSS to your Custom CSS too.

input, button, select, textarea {
    display: inline-block;
    height: 2.65em;
    margin-bottom: 9px;
    border: 1px solid #ddd;
    padding: 0 0.65em;
    font-size: 13px;
    line-height: normal;
    color: #555;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}

Now, how do I differentiate which is the required fields?

And to remove those zeros, add this code your customizer’s custom Javascript too.

jQuery('input.form').val('');

Thanks!

[gignnn]

Thank you very much, this worked incredibly!

One last tweak, and I apologize that I couldn’t find this in the forum notes, but how can I style my “register” and “log in” links in my menu bar so that they are styled like a call to action button similar to the buttons in the topbar? I would like to emulate the same hovering CSS rules as well.

Thanks again, this should pretty much be the last tweak and I’m good to go!

[gignnn]

I spoke too soon. I was checking other pages on the website after adding your code, and it appears that the CSS for some checkbox inputs on one of my forms (created through Gravity Forms) appears to be out of wack now. You can see the issue at the following page: http://nnnpropertiesgroup.com/register/. For convenience, I attached a screenshot as well. Thanks!

[Christopher]

Hi there,

Please add following code :

@media (min-width:979px){
a.mylllmenu {
    padding: 11px !important;
    display: inline-block;
    height: 31px !important;
    margin-top: 29px;
}
li#menu-item-18062 a span, .mylllmenu {
    border-color: #0074db;
    background-color: #0099d4;
    margin-bottom: 0.25em;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    box-shadow: 0 0.25em 0 0 #0074db,0 4px 9px rgba(0,0,0,0.75);
    padding: 10px 10px;
}
li#menu-item-18062 a {
    padding-top: 28px;
}
}

Please update this code :

input, button, select, textarea {
    display: inline-block;
    height: 2.65em;
    margin-bottom: 9px;
    border: 1px solid #ddd;
    padding: 0 0.65em;
    font-size: 13px;
    line-height: normal;
    color: #555;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}

To :

.page-id-37 input,.page-id-37  button, .page-id-37 select,.page-id-37  textarea {
    display: inline-block;
    height: 2.65em;
    margin-bottom: 9px;
    border: 1px solid #ddd;
    padding: 0 0.65em;
    font-size: 13px;
    line-height: normal;
    color: #555;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}

Instead of 37, put your page ID.

Hope it helps.

[gignnn]

Hello,

Thanks very much for taking the time to look into this. I am following the adjustments you are trying to make, but I am still running into problems and can’t quite figure out how to further tweak the CSS. I left all of the original adjustments you asked me to make in my CSS Customization section of the dashboard, and was hoping you could help me further look into this. I have included all of the new issues in bullet point format for both the Homepage and Registration page:

Homepage (http://nnnpropertiesgroup.com/)
-Both the “Register” and “Login” buttons are currently light blue with black text, when they should be dark blue with white text in their non-hovering state. When a user hovers over each of these buttons, they should turn light blue.
-When a user hovers over the “Log In” button, the color shifts from light blue to white.
-I think what may be complicating matters is that the “Log In” button is automatically generated by the “Theme My Login” third party plugin. If you can’t address this due to the fact it’s a third party plugin, I completely understand, but I would at least like to isolate the registration button and force it over to the far right of the menu bar if possible.

Registration Page (http://nnnpropertiesgroup.com/registration/)
-Unfortunately, this code didn’t seem to realign the checkboxes with the rest of the text on each line they appear, and now my “register” button at the bottom appears to be out of wack.

Thanks again for your help!

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

body .x-navbar li#menu-item-18062 a > span,
body .x-navbar li a.mylllmenu {  
    color: #fff !important;
    border-color: #0030aa;
    background-color: #0645a0;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    box-shadow: 0 0.25em 0 0 #0030aa,0 4px 9px rgba(0,0,0,0.75);
}
body .x-navbar li#menu-item-18062 a:hover > span,
body .x-navbar  .desktop .x-nav>li a.mylllmenu:hover {  
    color: #fff;
    border-color: #0074db;
    background-color: #0099d4;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    box-shadow: 0 0.25em 0 0 #0074db,0 4px 9px rgba(0,0,0,0.75);
}
body .x-navbar li#menu-item-18062 a:hover {
    box-shadow:none;
}

.page-id-10745 .gform_wrapper.gf_browser_chrome .gfield_checkbox li input[type=checkbox] {
    margin-top: 2px;
    height: 19px;
    box-shadow: none;
}

Hope that helps

[gignnn]

Thank you, the edits for the gravity form worked extremely well, but unfortunately I am still experiencing issues with the buttons. Please see my homepage now when you have time: http://nnnpropertiesgroup.com.

[Author]

Posts