Center logo & registration box

Home Forums Sweetdate – WordPress General questions Center logo & registration box

This topic has 27 replies, 2 voices, and was last updated 8 years by Radu.

  • Author
  • December 28, 2015 at 19:02 #95455
     mikest
    Participant

    Hi,

    How can I center the form and the logo and also show correct on mobile.

    Thanks,

     

    December 29, 2015 at 17:49 #95592
     Radu
    Moderator

    Hi,

    Add this css to wp-admin -> theme options -> styling options -> quick css

    COPY CODE
    

@media (max-width:780px) {
#logo a {
    float: left;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
}}

    Cheers

    Radu

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    What support service includes ? What not ?

    December 29, 2015 at 19:49 #95619
     mikest
    Participant

    Doesn’t seem to do anything. Let me rephrase the question:

    How can I center the homepage elements, like form and logo for all devices?

    Regards

    December 30, 2015 at 17:05 #95706
     Radu
    Moderator
    This reply has been set as private.
    January 1, 2016 at 00:00 #95888
     mikest
    Participant

    Hi,

    All devices includes Desktop PC, mobile phone, ipad, android tablet, etc and all others I might not have mentioned.

    Lets start with one device:
    1. How do I center the search form on the homepage to the center?
    2. How do I center the logo on the homepage to the center?
    3. I thought that my site would not be visible to all users, why are you now making the site public? Could you please remove the screenshot?

    Thanks,

    January 1, 2016 at 19:58 #95922
     mikest
    Participant

    I had to put the site to maintenance mode, because now visitors where coming to the site, probably because of the openly posting the URL above. I don’t want anyone to know what theme or versions are used, due to hacking and spamming. Please remove the above screenshot asap. I can send you the login credentials privately so you can see the the site

    Thanks

    January 4, 2016 at 17:58 #96186
     Radu
    Moderator
    This reply has been set as private.
    January 4, 2016 at 19:31 #96221
     mikest
    Participant

    Why is the domainname still in the reponse? The form on the homepage is aligned to the left by default, nothing changed there.

    January 4, 2016 at 19:35 #96222
     mikest
    Participant

    It seems like i am unable to explain to you that I want the default form of the site centered. Not sure how to explain otherwise.

    January 4, 2016 at 19:50 #96226
     Radu
    Moderator

    Hi,

    My replies are private and are seen only by admins and you.

    Add this css to wp-admin -> theme options -> styling options -> quick css

    COPY CODE
    
#header, #header .form-header .lead, #header label { text-align:center !important; }

    Cheers

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    What support service includes ? What not ?

    January 5, 2016 at 20:20 #96448
     mikest
    Participant

    Sorry, I did not know your reply’s where only visible by admins. I added the code, but doesn’t make any change. I opened up teh site, so you can see it.

    Regards

    January 6, 2016 at 17:41 #96670
     Radu
    Moderator

    Hi,

    Add this css to wp-admin -> theme options -> styling options -> quick css

    COPY CODE
    

@media (max-width:768px;) {
body.home .five.columns {
    width: 100%;
    padding: 0 10%;
}

body.home form#register_form_front {
    text-align: center !important;
}

body.home label.right.inline {float: left;font-weight: 800;}

body.home .five.mobile-four.columns {
    display: inherit;
    float: left;
    width: 300px !important;
}

body.home .row .five.mobile-one.columns {
    max-width: 314px;
}
body.home p.reg-form-details { text-align:center; }
body.home h4.white-text {
    text-align: center;
}
}

    Cheers

    Radu

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    What support service includes ? What not ?

    January 6, 2016 at 19:48 #96721
     mikest
    Participant

    I have copied and pasted this into the quick css, but it doesn’t seem to do anything…

    January 7, 2016 at 16:41 #96925
     Radu
    Moderator

    Retry with this

    COPY CODE
    


@media (min-width:768px) {
body.home .five.columns {
    width: 100%;
    padding: 0 10%;
}
 
body.home form#register_form_front {
    text-align: center !important;
}
 
body.home label.right.inline {float: left;font-weight: 800;}
 
body.home .five.mobile-four.columns {
    display: inherit;
    float: left;
    width: 300px !important;
}
 
body.home .row .five.mobile-one.columns {
    max-width: 314px;
}
body.home p.reg-form-details { text-align:center; }
body.home h4.white-text {
    text-align: center;
}}

    Let me know

    Cheers

    RAdu

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    What support service includes ? What not ?

    January 7, 2016 at 20:28 #97096
     mikest
    Participant

    Hi,

    This makes the whole form wider, how can I it be the same size, no other changes to the form, only make in center?

    Regards,

    January 8, 2016 at 15:57 #97248
     Radu
    Moderator

    Hi,

    I cannot understand exactly how do you want to style, can you please provide a screenshot/sketch to can figure out exactly what you need ?

    Cheers

    Radu

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    What support service includes ? What not ?

    January 12, 2016 at 01:18 #97894
     mikest
    Participant

    Please ask someone else to read this, as I think it is not that complicated. Last time:

    Homepage blue form has to be centered. In my case the form is pink. I added you css code, but made the form wider. I just want the form centered. Lets just start with for the Desktop. So when viewing the homepage on a desktop computer the form should be centered with the same width and height!

    If this is still unclear please consult collegue or put me through to someone else.

    January 12, 2016 at 16:54 #98017
     Radu
    Moderator

    Hi,

    Replace the code that i have prodived with this

    COPY CODE
    
body.home form .row .three.mobile-one.columns {
    width: 42%;
}

body.home form .row .five.mobile-one.columns label {
    text-align: center !important;
}

body.home .five.columns {
    margin: 0 auto !important;
    float: none;
    padding: 0 !important;
}

body.home form .five.mobile-four.columns {
    float: left;
}

    Let me know

    Cheers

    Radu

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    What support service includes ? What not ?

    January 13, 2016 at 22:47 #98376
     mikest
    Participant

    Seems like everything is all messed up now :-s

    January 14, 2016 at 16:57 #98540
     Radu
    Moderator

    You should remove all codes that i have provided you in this topic and replace it with this code

    COPY CODE
    

@media (max-width:780px) {
#logo a {
    float: left;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
}}


body.home form .row .three.mobile-one.columns {
    width: 42%;
}
 
body.home form .row .five.mobile-one.columns label {
    text-align: center !important;
}
 
body.home .five.columns {
    margin: 0 auto !important;
    float: none;
    padding: 0 !important;
}
 
body.home form .five.mobile-four.columns {
    float: left;
}

    Let me know

    Cheers

    Radu

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    What support service includes ? What not ?

    January 15, 2016 at 15:24 #98689
     mikest
    Participant

    This works!
    Is it possible to also get the password label to the left and the 2 input fields to the right?

    Thanks!

    January 18, 2016 at 15:34 #99084
     Radu
    Moderator

    Hi,

    Please add this css after the css that i have provided you earlier

    COPY CODE
    
body.home form#register_form_front .five.columns { margin:0px !important;float: left;text-align: right !important;}

form#register_form_front .three.mobile-one.columns {
    width: 58%;
    text-align: right !important;
    float: right;
}

body.home form#register_form_front .mobile-one label {
    text-align: right !important;
}

    Cheers

    Radu

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    What support service includes ? What not ?

    January 18, 2016 at 21:51 #99205
     mikest
    Participant

    Oke, getting close 🙂

    Is there a way to get the password field to the left?

    January 19, 2016 at 14:27 #99282
     Radu
    Moderator

    There are two password fields, which one ?
    Please provide a sketch to understand how do you want to align inputs on form.

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    What support service includes ? What not ?

    January 19, 2016 at 23:17 #99394
     mikest
    Participant

    Sorry, I don’t know how to draw. I will try to explain:

    I would like to have it to look like the two fields above. In detail:
    – The password required field below the email address field
    – The confirm field below the password required field
    both fields aligned on the left side of the username and email fields.
    – The password label below the email address label
    aligned the same as the two labels above, to the right.

    So basicly its just following the same alignments of the two fields above.

    January 20, 2016 at 15:45 #99501
     Radu
    Moderator

    Hi,

    The code that i have provided you earlier to that !

    Add this css next to rest of CSS

    COPY CODE
    
body.home form#register_form_front .five.columns { margin:0px !important;float: left;text-align: right !important;}
 
form#register_form_front .three.mobile-one.columns {
    width: 58%;
    text-align: right !important;
    float: right;
}
 
body.home form#register_form_front .mobile-one label {
    text-align: right !important;
}

    See attachment how it looks.

    Cheers

    Radu

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    What support service includes ? What not ?

    Attachments:
    You must be logged in to view attached files.
    January 20, 2016 at 22:57 #99641
     mikest
    Participant

    Perfect, thanks for your help and patience!

    January 21, 2016 at 13:43 #99735
     Radu
    Moderator

    You’re welcome

    Have a nice week

    Radu

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    What support service includes ? What not ?

  • Author
    Posts
Viewing 28 posts - 1 through 28 (of 28 total)

You must be logged in to reply to this topic.

Support Hours Our support team is available from Monday to Friday during regular office hours ( East European Time ). Please allow up to 48hrs so we can review your request and respond.
License info One theme purchase allows you to use it only on one WordPress install, so each new install requires a new license. We thank and appreciate everyone for their purchase as it allows us to keep supporting and releasing new updates.
wp-theme-installation-service

©2024 SeventhQueen - Powered by KLEO Theme

Terms & conditions | Privacy Policy

Log in with your credentials

Forgot your details?