Okay
  Public Ticket #1483985
Changing Background color on homepage and other pages
Closed

Comments

  • etian23 started the conversation

    Hello,

    After changing in Magento backoffice the background color (MGS > Theme Settings > Background Color) to #232323, clearing cache, the homepage still has a white background.

    I would like to have #232323 as background for all the pages in the website, but it does not respond to changes.

    I have even added a custom css with the background-color in body to #232323 and background still appears white.

    Could you let me know what needs to be changed to make it work? Please check, as we need to check different background colors.

    Regards,

    Daniel

  • [deleted] replied

    Hi

    Thanks for your ticket, the background color only work if the boxed layout is chosen, this:


  • etian23 replied

    You mean all the page will be boxed and outside the box, you can change the colour? Inside the box is white?

    I have changed to boxed layout, and outside the margins, I get a light grey, not the #232323 that I have configured in Background > Background Color

  • [deleted] replied

    Hi

    I have fixed for you

  • etian23 replied

    I have found some issues:

    1- I want the social icons on the footer orange, but I need the google/facebook icons on login popup window to be white. I cannot change the .css as they use the same class 'fa'. Could you create different classes so we can have different colours? Or maybe force the white on the buttons in the login popup.

    2- On the homepage, when the window is resized to mobile width, the newsletter form is to small and the button is too big. Where can I change the sizes, as I want to give more space to the text field and less to the button, and also change the text on the button to 'SIGN UP', instead of 'SUBSCRIBE' ?

    3- I would like to change the text on the footer right side, from 'FOLLOW US ON SOCIAL' to 'JOIN US'. Where can I change this?

  • etian23 replied

    About the previous message, a clarification on number 2. I am refering to this newsletter signup form:

    <div class="text-center">
    <h4 class="sleekTitle">SUBSCRIBE TO OUR NEWSLETTER</h4>
    </div>
    <div class="newsletter-home-v3">{{block class="Magento\\Newsletter\\Block\\Subscribe" template="Magento_Newsletter::subscribe.phtml"}}</div>

    I need this form to behave in mobile like the one show here (https://www.revolution.watch/) at the footer of the page

  • etian23 replied

    Could you please tell me how to solve the issues?

  • [deleted] replied

    Hello there

    1) About social icon, I just checked and see that seem you already made, in fact they have a lot of different parent class, if you knowedge about css, you can css them easy

    2) You need to knowedge more about css, you can use css to do it. I can't support this, it is out of my support or you need to pay extra if you want me to do.

    - You can use template path hint feature of magento to know what file need to edit "SUBSCRIBE", please refer this post:

    https://www.mageplaza.com/kb/how-to-enable-template-path-hints-magento-2.html

    3) Please enable the frontend builder then you can edit it on the frontend

  • etian23 replied

    1) solved

    2) Can you solve it without changing anything from Magento internal files? Actually, I found that is a bug, I am just using the included homepage and when the page is resized to fit an iPhone, the form does not display nicely. I think many other people has had the same issue.

    3) The text 'FOLLOW US ON SOCIAL' is hardcoded in the bottom socials block, and cannot be changed with the frontend builder. The social icons can be changed, but not the text. Maybe move that text? Please check.

  • [deleted] replied

    Hi

    Yes I will make for you

  • [deleted] replied

    Hello.

    Sorry for late reply.
    - For the text "FOLLOW US ON SOCIAL MEDIA" you can edit it in the translate inline of magento 2 before.
    Now I have added it to the footer_social_link block (admin -> CONTENT -> Blocks -> footer_social_link) You can go here to edit this text. Please see my attached image.
    - Are these the blocks you mentioned? (1.JPG)
    If so, please follow the instructions below.
     For the newsletter form I added 4 css for 4 types of screen for you.
    Tablet (width: 768px), Mobile L (width: 425px), Mobile M (width: 375px), Mobile S (width: 320px)
    Please see my attached photo.
    I added css to admin -> MGS -> Theme Setting -> Custom Style
        .cms-index-index .promobanner.zoom img {
              height: 500px;
        }
    This is the height of the button
        .metro-banner .promobanner .text h3 {
              font-size: 35px;
        }
    This is the font-size of the top text
        .metro-banner .promobanner .text a {
              font-size: 25px;
        }
    Here is the font-size of the text bottom
    I have edited for you. If you want you can manually edit under the instructions I above on each screen area you want.
    - It seems you want to change the text "SUBSCRIBE TO OUR NEWSLETTER" is not it? I have questions about your question. Please describe it to me.
    Please report back if you have problems.

    Best regards.
    Vinh.

  • etian23 replied

    Hello,

    Please erase these last changes on the CSS, as the images shown on the website look deformed (they should be wider, please check).

    I just want to display properly the newsletter form at the bottom of the homepage, and also I would like to add the newsletter form on the footer, just below the social media icons.

    Right now I am using one Unero homepage page, and at the bottom there is a newsletter sign up form. On desktop that form looks ok, but the problem is on a small device like phone, the form does not read well. I would like to have a wider text box (so the text of 'Enter your email address' can be fully read), and a narrower 'Sign in' button. Attached a photo to illustrate how it looks like.

    As I said, I would like to add the newsletter form also in the footer of the page, I want first to solve the newsletter form at the bottom of the homepage, and then add it to the footer.

    Could you please make it happen? 

    Kind regards,

    Daniel

  • [deleted] replied

    Hello.

    Sorry for the css snippet. I've misunderstood your idea.
    - "add the newsletter form on the footer, just below the social media icons" I added and edited a bit more for you. Please check.
    -  "the newsletter form at the bottom of the homepage"  I have edited the text on your phone screen for 2 lines of text and the 'Sign in' button. Please check.

    Best regards.
    Vinh.

  •   etian23 replied privately
  • [deleted] replied

    Hi,

    Thanks for feedback, i will check and update to you when done

    Best regards!

  • [deleted] replied

    Hi,

    Please provide your FTP and admin account, i will check for you

    Best regards!

  •   etian23 replied privately
  • [deleted] replied

    Hi,

    I have made for you, please check.

  •   etian23 replied privately
  • [deleted] replied

    Hi,

    I undo for you, pleae check

  • etian23 replied

    Hi,

    The fix in the footer works, thank you.

    I have just realized the map in contact page does not appear now, how come?

    Daniel

  • [deleted] replied

    Hi,

    Thanks for feedback, i will check and update to you when done

    Best regards!

  • [deleted] replied

    Hi,

    Please provide admin account, i can't login to your backend page