Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1332530

    nillamary
    Participant

    Hi,

    I’d like to change my Email form as currently it displays above my footer and as a separate form.

    Before entering data:
    1. The form to be only 3 fields (First name, email address, and Connect button) in my footer; centred inline with my Copyright info and social icons.
    2. The Name and Email labels displayed in the actual fields and in my off-white colour.
    3. The Name and Email fields’ background display in my dark grey colour.
    4. Remove the horizontal borders above and below the form (fields).
    After entering data:
    5. Fields’ background and font colour to be the same as before entering data.
    6. Confirmation message to display same background and font colours as previous to entering data.

    Many thanks!

    #1332592

    nillamary
    Participant

    1. I’ve added the fields in the Footer without a widget, but cannot remove the Email grey container above the footer. Still need to change colours, etc.

    #1332635

    nillamary
    Participant

    1. Still styling the fields in the footer. This code isn’t working:
    .x-subscribe-form-first-name {
    text-align: center;
    color: #CCC;
    background-color: #141414;
    }

    #1332871

    Darshana
    Moderator

    Hi there,

    Thanks for writing in! To assist you with this request, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

    #1333873

    nillamary
    Participant
    This reply has been marked as private.
    #1334044

    Joao
    Moderator

    Hey there,

    Thanks for writing in!

    Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer .

    You may wish to consult a developer to assist you since your website requires custom development in detail in many parts, we are happy to assist you with issues or helping providing solutions, but when it comes to a big amount of requests of custom changes that X do not offer out of the box we would recommend you hiring a developer.

    Thanks for understanding,

    Joao

    #1335061

    nillamary
    Participant

    Hi Joao,
    Which feature are you advising that requires custom development? I’ve asked 6 questions above.
    I don’t believe this requires custom development but what it does require is the correct CSS, which I haven’t got quite right.
    I’ve been able to place the fields in the Footer and centred.
    Can you provide the correct CSS and respond to my other questions?

    Many thanks.

    #1335074

    nillamary
    Participant
    This reply has been marked as private.
    #1335200

    Joao
    Moderator

    Hi There,

    1. The form to be only 3 fields (First name, email address, and Connect button) in my footer; centred inline with my Copyright info and social icons.

    Please add the following code to Appereance > Customizer > Custom > CSS

    @media (min-width: 979px) {
    .x-colophon.bottom .x-social-global {
        margin-top: 70px;
    } }

    2. The Name and Email labels displayed in the actual fields and in my off-white colour.

    It does look like this, please clarify.

    3. The Name and Email fields’ background display in my dark grey colour.

    Please add the following code to Appereance > Customizer > Custom > CSS and adjust the color

    .x-subscribe-form input[type="text"], .x-subscribe-form input[type="email"] {
        background: grey;
        color: white;
    }

    4. Remove the horizontal borders above and below the form (fields).

    Seems like you achieved that already, if not, please provide a screenshot

    5. Fields’ background and font colour to be the same as before entering data.

    Please add the following code to Appereance > Customizer > Custom > CSS

    
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: white;
    }
    ::-moz-placeholder { /* Firefox 19+ */
      color: white;
    }
    :-ms-input-placeholder { /* IE 10+ */
      color: white;
    }
    :-moz-placeholder { /* Firefox 18- */
      color: white;
    }

    6. Confirmation message to display same background and font colours as previous to entering data.

    Please add the following code to Appereance > Customizer > Custom > CSS

    .x-alert-success, .wpcf7-mail-sent-ok, .buddypress #message.updated, .bbp-template-notice.updated {
        color: white;
    }
    
    .x-alert-success .close, .wpcf7-mail-sent-ok .close, .buddypress #message.updated .close, .bbp-template-notice.updated .close {
        color: white;
    }

    Hope that helps,

    I believe it is quite unfair that you say you expect a better support from us, we have been helping in many topics with customization which are not related to theme problems or anything like that, As I said before we are happy to assist you, just please have in mind there is a difference between support and customization every item in which I believe the correct approach would be to search for help from a developer, 150 US$ is quite expensive I believe you could find help for much less. Anyway, feel free to ask us questions, hope you understand the point with no hard feelings.

    Best regards,

    Joao

    #1335724

    nillamary
    Participant

    Thank you for helping. (I did mark my comment private for your viewing only.) The developer cost is what I got from your link.
    No hard feelings.

    1. Sorry, this code didn’t work, it pushed my social icons further down also. I’d like the 3 fields (smaller) and displaying side-by side inline with my copyright and social icons, if I can. I have similar code, which is probably affecting your suggestion:
    @media (min-width: 979px) {
    .x-colophon.bottom .x-social-global {
    position: absolute;
    top: 30px;
    left: 75%;
    width: 300px;
    }
    }

    2. Since my support request, I removed the labels and placed the same text in actually fields, so no issue here, thanks.
    3. Great, that worked, thanks
    4. Yes, fixed this before your response
    5. This code didn’t work. Didn’t require this code as I added to your code in #3 and also placed a border around fields, thanks anyway
    6. Not sure what’s happening with this code as it changes the entered field to yellow background and black font (tried to change this to blue background as a test). Also, the confirmation box displays as white with an orange border (screenshot attached). Also, mucked up my displaying of menu options. I’ve removed this and my menu options return and display OK:

    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #b0c4de;
    }
    ::-moz-placeholder { /* Firefox 19+ */
    color: #b0c4de;
    }
    :-ms-input-placeholder { /* IE 10+ */
    color: #b0c4de;
    }
    :-moz-placeholder { /* Firefox 18- */
    color: #b0c4de;
    }
    .x-alert-success, .wpcf7-mail-sent-ok, .buddypress #message.updated, .bbp-template-notice.updated {
    color: #b0c4de;
    }
    .x-alert-success, .close, .wpcf7-mail-sent-ok .close, .buddypress #message.updated .close, .bbp-template-notice.updated .close {
    background: #b0c4de;
    border-color: white;
    text-transform: capitalize;
    color: #000000;
    }

    Many thanks again for your help!

    #1336206

    Rad
    Moderator

    Hi there,

    Custom development is not covered by the theme license. We could provide some recommendation if it’s easy, but we’re more likely going to cover X theme features and bugs only. Other than outside the existing features and bugs are considered custom development.

    And developer pricing is something we don’t have control as they are not part of theme.co.

    1. Hmm, the main problem is copyright and social icons are on different structure, and the form is added after them. Inline alignment will only work if the target elements are siblings or relative elements.

    I went ahead and changed your footer content to this,

    [cs_section parallax="false" style="margin: 0px;padding: 0px;"][cs_row inner_container="false" marginless_columns="false" style="margin: 0px auto;padding: 0px;"][cs_column fade="false" fade_animation="in" fade_animation_offset="45px" fade_duration="750" type="1/3" style="padding: 0px;"][cs_text]©2011-2017 Nilla's Photography | All rights reserved | Site built by Nilla Palmer[/cs_text][/cs_column][cs_column fade="false" fade_animation="in" fade_animation_offset="45px" fade_duration="750" type="1/3" style="padding: 0px;"][cs_text][x_subscribe form="156"][/cs_text][/cs_column][cs_column fade="false" fade_animation="in" fade_animation_offset="45px" fade_duration="750" type="1/3" style="padding: 0px;"] [/cs_column][/cs_row][/cs_section]

    I created this in cornerstone builder, in a dummy page. Then switch back to text editor (Wordrpress editor) and copied the generated code. With this, the structure is correctly achieved.

    5. Please try this,

    
    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px white inset;
    }

    Change the white to your preferred color.

    6. Your CSS works, but I don’t see it applied or added. Perhaps it’s your cache?

    Thanks!

    #1337153

    nillamary
    Participant

    Hi Rad,

    I did mark my original comment as private customer feedback to Joao and Themeco.

    I would hope that Themeco supports bug fixes under normal circumstances and not under extra paid support. Please advise exactly what “X Theme Features” support is? Is there a link so I can read up on your support? Perhaps this should clearly be detailed when a customer buys your 12-month support and also the fact that this support means that the customer is re-directed to a Forum/Knowledge Base.

    Unfortunately, this is my misunderstanding as I purchased the extra 12-month support thinking that I would get the same support I receive with my current WordPress blog site. This support does include customisation, a live chat, Knowledge Base, and a Forum. (I have Joao’s link of suggested Developer’s thanks.)

    1. Thanks for explaining this. I can’t see any difference and fields still display centred and beneath each other, where I left them.
    5. Thanks, that worked except confirmation message doesn’t change colour.
    6. Thanks, I had removed that CSS as it mucked up my Menu options, so did not add it again.

    As a suggestion and as Themeco advertises that X is ‘highly customisable’, a list of all CSS Property codes specific to the X theme and all Stacks would be great. (If there isn’t one already?). This would save you guys but also your customers a lot of time back and forth; not to mention time zone differences.

    Thanks again for your help, which I do appreciate 🙂

    #1337641

    Rad
    Moderator

    Hi there,

    Yes, we provide support for bug fixes. But these aren’t bugs, and we still provide some recommendation and alternatives when it comes to small tweaks. As I’m saying, customizing the theme beyond its current features is custom development and not bug fixes.

    1. In that case, please provide a mockup design. What I understand is to display copyright, form ( as whole, not by field), and social icons all in one line. That code only solves the column structure to make the positioning easier just in case you decide to change it.

    centred inline with my Copyright info and social icons.

    In my understanding, it’s vertical alignment (form fields), and horizontal alignment (copyright and social icon). But since I’m wrong about it, then I now understand what you’re trying to achieve, still, mockup design would be great as a finalized requirement.

    5. What confirmation message? Is that related to 6#, or is it the #6? It’s due to browser Autocomplete feature and it’s the browser that adds color on the fields that you already filled up before, regardless of site or theme. I’m not sure what confirmation has the issue.

    6. You just need to add this,

    .x-alert-success, .wpcf7-mail-sent-ok, .buddypress #message.updated, .bbp-template-notice.updated {
    color: #b0c4de;
    }
    .x-alert-success, .close, .wpcf7-mail-sent-ok .close, .buddypress #message.updated .close, .bbp-template-notice.updated .close {
    background: #b0c4de;
    border-color: white;
    text-transform: capitalize;
    color: #000000;
    }

    It doesn’t have any existing CSS that could affect menus. Maybe it’s best if I can directly see it too, maybe I could provide more alternatives for the menu.

    And thanks for the suggestion, I’ll forward it.

    For now, you may use Browser developer tools and inspect your site. Then you’ll able to see all the CSS properties and selectors used on your site each time you select an element. It’s what I’ve been using, and I personally don’t know all CSS properties and selectors as there are so many 🙂

    Thanks!

    #1345261

    nillamary
    Participant
    This reply has been marked as private.
    #1345707

    Rad
    Moderator

    Hi there,

    I understand, and I’m just clarifying the scope of what we are capable as support 🙂

    1. Please add this CSS as well,

    .x-subscribe-form {
        max-width: 100% !important;
    }
    .x-subscribe-form fieldset {
        display: inline-block;
        width: 32%;
    }
    .x-subscribe-form input[type="text"], .x-subscribe-form input[type="email"] {
        margin-bottom: 0px;
    }
    .x-subscribe-form input[type="submit"] {
        display: inline-block;
        position: relative;
        top: -1px;
        padding: 13px 0px;
    }
    .x-colophon-content > .x-section > .x-container > .x-column:nth-child(2) {
        width: calc(37.6% + 4%);
        margin-right: 0;
    }

    5. You mean the styling should be the same as the success message? You can change this selector .x-alert-success to just this .x-alert. Styling will be applied regardless of message type.

    Other selectors are .x-alert-info, .x-alert-muted, .x-alert-danger, .x-alert-block. Example,

    .x-alert-danger,  .x-alert-block {
    background: #b0c4de;
    border-color: white;
    text-transform: capitalize;
    color: #000000;
    }

    Hope these helps 🙂