Adjustments in Forefront

Home Forums Automattic Forefront Adjustments in Forefront

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #164033 Resolve

    veras-coaching

    Hello helpers out there,
    I need help on several topics. I hope it is ok to do this! I have no experience with css.

    – I would like the background color of the footer or widget area to be white (not black) or be able to adjust it to any other color.

    – The font in the footer/widget area should be grey, like the text.

    I have tried to do it myself, but couldn’t figure it out.

    – Also all fonts/texts, including menu and headlines, should be grey or at least not black (I want to get rid of all the black) except the navigation effect in the menu to indicate what site one’s on.

    – The menu in the phone and probably tablet coding is a black drop down menu. I would also like to change the color here as well so it matches the footer area.

    – The color of the “send” button on the contact site is green. I would like to change this into grey.

    And last but not least. I tried to create a english version of the homepage using a category so one can navigate to it through the menu bar. I created a “page/blog” in english and tried making it look the same as the homepage but with english text. Unfortunately the presets of frontpage don’t allow the blog to look the same as the “full with page” attribute for pages… (maybe there is a better solution altogether?)

    – The picture on this site is not the full width,
    – there is a headline “English” that I can’t get rid of and
    – i can’t remove a white bar on top of the picture.

    ANY help with one of the above is much appreciated!!!!

    Thank you very much!!!

    The blog I need help with is veras-coaching.com
    #164034

    Kathryn P.
    Happiness Engineer

    Hi there – I’ll reply to your questions in batches, since there’s a lot here.

    – I would like the background color of the footer or widget area to be white (not black) or be able to adjust it to any other color.

    – The font in the footer/widget area should be grey, like the text.

    Give this a try and adjust the colour codes as you like:

    /* Change background colour of footer widget and footer credit areas */
    .footer-widget-area, .site-footer {
      background-color: #ffffff;
    }
    
    /* Change text and link colour of footer widget and footer credit areas */
    .footer-widget-area .widget, .footer-widget-area .widget-title, .footer-widget-area .widget a, .site-footer a {
      color: #666666;
    }

    I have tried to do it myself, but couldn’t figure it out.

    Here are some useful posts to help you learn more CSS skills so you can customize your site exactly as you like:

    https://dailypost.wordpress.com/2013/07/25/css-selectors/

    http://dailypost.wordpress.com/2013/06/21/css-intro/

    http://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    http://blog.thewcc.com/a-web-inspector-tutorial-for-front-end-developers/

    https://cssworkshop.wordpress.com/

    #164035

    Kathryn P.
    Happiness Engineer

    – The color of the “send” button on the contact site is green. I would like to change this into grey.

    Give this a try, again modifying the colour codes to anything you like. Use any colour picker tool to find the shades you prefer.

    /* Button background colour */
    button, input[type="button"], input[type="reset"], input[type="submit"] {
      background-color: #333333;
    }
    /* Button background colour - focus, hover, active states */
    button:focus, html input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, button:active, html input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active {
      background-color: #666666;
    }
    #164036

    Kathryn P.
    Happiness Engineer

    – Also all fonts/texts, including menu and headlines, should be grey or at least not black (I want to get rid of all the black) except the navigation effect in the menu to indicate what site one’s on.

    This will make all page titles grey:

    
    /* Change colour of page titles */
    .page-title {
      color: #666666;
    }

    As before, adjust the colour code to your preferred shade.

    After adding this CSS, if you still see any black text you’d like to change, please provide a link to the page so I can take a look directly and help with the necessary CSS.

    #164037

    Kathryn P.
    Happiness Engineer

    – The menu in the phone and probably tablet coding is a black drop down menu. I would also like to change the color here as well so it matches the footer area.

    Give this a try to make the mobile menu background white and the text grey:

    .main-small-navigation, .main-small-navigation a, .menu-toggle {
      color: #333333;
    }
    .main-small-navigation div, .menu-toggle {
      background-color: #ffffff;
    }
    

    Modify the colours as you like.

    #164038

    Kathryn P.
    Happiness Engineer

    And last but not least. I tried to create a english version of the homepage using a category so one can navigate to it through the menu bar. I created a “page/blog” in english and tried making it look the same as the homepage but with english text. Unfortunately the presets of frontpage don’t allow the blog to look the same as the “full with page” attribute for pages… (maybe there is a better solution altogether?)

    Is there any reason why you can’t just create an English page instead of a post? That way you could get it looking exactly the same as the homepage, if that’s what you’re after. That would be my first suggestion.

    #164039

    veras-coaching

    Hello Kathryn,
    Wonderful!!! Everything worked!
    The only black text now is the “veras-coaching” on all the pages. If possible, I would like to change that as well.
    As for the english version; you’re right! I will create an english page. I got confused, because initially I wanted everything (all the pages) to be switched into english by pressing one button. But I guess that won’t work. I will go ahead and will do what you recommended and it will be fine.

    Thank you so much!!

    I’m happy now! ;)

    #164040

    Kathryn P.
    Happiness Engineer

    Glad it all worked as you wanted!

    To change the colour of your Site Title at the top left, give this a try:

    .site-title a {
      color: #666666;
    }

    As before, change the grey shade to whatever you prefer.

    #164044

    veras-coaching

    Awesome! Thank you!!!

    #164045

    veras-coaching

    I have a new question. I hope it is ok to post it here.
    On the contact form the text is german and says “abschicken”. Is there a way to change it into “senden/send”?

    Thank you!

    #164047

    Kathryn P.
    Happiness Engineer

    On the contact form the text is german and says “abschicken”. Is there a way to change it into “senden/send”?

    You can change the text on the submit button by adding a new attribute to the first part of the contact-form shortcode.

    Change this:

    [contact-form subject="Coaching"]

    to this:

    [contact-form subject="Coaching" submit_button_text="senden/send"]

    I have a new question. I hope it is ok to post it here.

    For new questions in the future, please start a new thread. I’m going to mark this one as resolved. Thanks!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.