New to the community? Start here

Hustle make CSS changes

Would like to apply CSS to the existing Email opt-in, so that the input boxes are stacked one after another.

That's Full Name and Email should be horizontally and the box size should be reduced.

Support access enabled.

Site: websiteURL/smartminds

Sohag Ronjon Dey
- Staff: Earn your WPMU DEV membership
- 152 pts: Hero points 531 pts: Rep. points LEVEL 6
Hi Mark,

Hope you are having a beautiful day! :slight_smile:

It seems the access token is expired. Can you please revoke access and then regrant support access again.

Please let us know when you do so.

Cheers,
Sohag
Mark
- Recruit: Earn your WPMU DEV membership
- 186 pts: Hero points 46 pts: Rep. points LEVEL 2
I just did that, login and please provide a solutions asap.

Sohag Ronjon Dey

Staff: Earn your WPMU DEV membership

152 pts: Hero points 531 pts: Rep. points LEVEL 6

Hi Mark,

Hope you are having a beautiful day! :slight_smile:

Thanks for regranting the support access. Please add the following code in the "Custom CSS" for the optin to make the fullname and email fields to be one below another.

.wpoi-hustle .wpoi-optin form.wpoi-container{
    width: 90%;
}
.wpoi-hustle .wpoi-fields-joined.wpoi-col>.wpoi-element {
    margin-right: 0;
    margin-bottom: 1px;
    display: block;
    height: auto;
}
.wpoi-element.wpoi-grouped-element .wpoi-container {
    width: 100%;
    float: left;
    display: block;
}
.wpoi-element.wpoi-grouped-element .wpoi-container .wpoi-element.wpoi-grouped-element {
    width: 100% !important;
    border: 1px solid #2d2d2d;
    border-left: none;
    border-right: none;
    float: left;
    display: block;
    clear: right;
    overflow: hidden;
}

I have already added this. Please check if if works.

Please let us know if you need any further help.

Cheers,
Sohag

Mark
- Recruit: Earn your WPMU DEV membership
- 186 pts: Hero points 46 pts: Rep. points LEVEL 2
Sohag,
I switched to First structure and I cannot see the changed you made, can you please have a look again into this? I want this to be happen when in first structure and also the box width should be reduced.
Sohag Ronjon Dey
- Staff: Earn your WPMU DEV membership
- 152 pts: Hero points 531 pts: Rep. points LEVEL 6
Hi Mark,

Thanks for your quick reply.

I want this to be happen when in first structure and also the box width should be reduced.

I assume by box you mean the total optin box. Please correct me if I am wrong. I have added the following code for the first design in the "custom css".
```
a.inc-opt-close-btn {
    width: 50%;
}
.wpoi-hustle {
    width: 50%;
    margin: auto;
}
form.wpoi-container,
form.wpoi-container.wpoi-fields-joined.wpoi-no_icon {
    width: 100%;
    display: block;
}
form.wpoi-container .wpoi-element {
    border: 1px solid #2d2d2d;
    border-left: none;
    border-right: none;
    width: 100%;
    display: block;
    float: left;
}
```
Please make sure the cache is cleared and check if it works.

Please let us know if you need any further help.

Cheers,
Sohag
Mark
- Recruit: Earn your WPMU DEV membership
- 186 pts: Hero points 46 pts: Rep. points LEVEL 2
Sohag,

I also want the width of the box to be reduced , no need to have that much wider box I need half of the size reduced and also aligned in center.
Sohag Ronjon Dey
- Staff: Earn your WPMU DEV membership
- 152 pts: Hero points 531 pts: Rep. points LEVEL 6
Hi Mark,

Thanks for your quick reply.

For some reason the whole code was not saved earlier. I have created the code to make the optin box smaller. However I have added it again and it became smaller. Please check if this works.

Please let us know if you need any further help.

Thanks,
Sohag