Need help? Check out our Support site, then


Twenty Seventeen website title, sub-title, menu colour customisation

  1. journeyingthroughthebible
    Member

    Hi I've just gone to the TwentySeventeen theme, and it looks great for my website so far. I'd like to customise a few things, as follows:
    1 Add line break in wesbite title (so it always splits at a desired point)
    2 Change the font and colour of the sub-title (I've already done this with the main title using CSS, for example:
    .site-title, .site-title a {
    color: #333B97 !important;
    font-family: myriad pro, !important;
    font-size: 34px !important;
    3 Change the colour of the menu items from white to a colour (e.g. burgundy) (have been given CSS to do this on TwentySixteen, but doesn't seem to work on TwentySeventeen)
    4 Change the colour of the menu items with mouse-over - i.e. so they show up a different colour on mouse-over (again, have been given CSS to do this on TwentySixteen, but doesn't seem to work on TwentySeventeen)
    If anyone has any CSS code that would do these things, I would be really grateful. Many thanks, Rob

    The blog I need help with is creationtonewcreation.com.

  2. journeyingthroughthebible
    Member

    Hi I have now learned some CSS for TwentySeventeen theme to deal with some of these issues, and here is some CSS coding to show what I've done. This may not be the most elegant way of doing it - but it seems to work.
    A line break cannot be added in the website title, so I have set the length so it breaks at the desired point, at least on a computer screen, as follows:
    /*site title length to enable line break*/
    .wf-active .site-title {
    max-width: 600px;
    width: 100%;
    }.
    I have found how to change the colour of the site title, as follows:
    /*site title colour*/
    .site-title, .site-title a {
    color: #002b80 !important;
    }
    I have also found how to change the colour of menu items as follows:
    /*main menu item colour*/
    .navigation-top ul {
    background-color: #fff;
    }
    /*main menu and submenu text colour on mouseover*/
    .navigation-top li a:hover {
    color: #fff;
    }
    /*main menu and submenu background colour on mouse-over*/
    .navigation-top li a:hover {
    background-color: maroon;
    }
    I have also found out how to eliminate the thin grey border round submenu items, as follows:
    /* submenu item border elimination*/
    .navigation-top ul {
    border: 0px !important;
    }
    So the items that I'd still like to know the CSS code for are the following:
    1 Changing the colour and font of the site tagline
    2 Changing the colour of the submenu items before mouseover
    3 Changing the colour of text of the menu and submenu
    4 Reducing the size of the header image (same width, but not so high).
    If anyone is able to help with the CSS code for these items, I would be really grateful.
    In addition, is there a manual of the CSS codes for different items on specifically the TwentySeventeen theme? - different themes have, I understand, differences in their CSS codes. Many thanks Rob

  3. journeyingthroughthebible
    Member

    Update: I have played around with the CSS a bit, and found answers to items 2 (changing text of submenu items before mouseover) and 3 (changing colour of text of menu and submenu), as follows
    /*menu main colour*/
    .navigation-top ul {
    background-color: navy;
    }
    /*submenu main colour*/
    .navigation-top li {
    background-color: navy;
    }
    /*main menu and submenu text colour*/
    .navigation-top a {
    color: white !important;
    }

  4. journeyingthroughthebible
    Member

    Update: I have played around with the CSS a bit, and found answers to items 1 (changing font of tagline); 2 (changing text of submenu items before mouseover) and 3 (changing colour of text of menu and submenu), as follows - these are examples only:
    /*site tagline colour and font*/
    .site-description, .site-description a {
    font-family: "Open Sans" !Important;
    color: maroon !Important;
    font-weight: 500 !Important;
    font-size: 24px;
    }
    /*menu main colour*/
    .navigation-top ul {
    background-color: navy;
    }
    /*submenu main colour*/
    .navigation-top li {
    background-color: navy;
    }
    /*main menu and submenu text colour*/
    .navigation-top a {
    color: white !important;
    }
    The only issue outstanding is this - can I reduce the height of the main image on the home page?
    Many thanks, Rob

  5. journeyingthroughthebible
    Member

    On the final point, how to reduce the height of the main image on the home page, there's an article entitled "How To Reduce The Header Height Size Of The Twenty Seventeen Theme Front Page" by Bharat Karavadra, which offers a solution. This may need to be checked out, as it's possible it's for the WordPress.org site, where the rendering of the CSS may perhaps be different? If anyone has any advice on this, that would be helpful.

  6. @journeyingthroughthebible I recommend trying the CSS -- it should be very similar if not exactly the same. If it does not work, let us know and we'll dig into this with you.

    You might also search our forums to see if others have already worked through this.

  7. journeyingthroughthebible
    Member

    Hi Thanks for your reply
    I have thought through this issue of the front page header - what I would like is this: to make the header on the home/front page the same size as the smaller header on the others pages. This is especially useful on my mobile version. Currently the header on the home/front page fills most of the screen, whereas the header on the other pages is quite a bit smaller, and looks much better. So is it possible to make the header on the home page like the header on the other pages? I did come across some CSS on the WordPress.org site that attempted to just this:
    /* make header on home page same size as headers on other pages */
    @media screen and (min-width: 48em) {
    .twentyseventeen-front-page.has-header-image .custom-header-media,
    .home.blog.has-header-image .custom-header-media {
    min-height: 237px;
    height: auto;
    }
    .twentyseventeen-front-page.has-header-video .custom-header-media {
    height: 100vh;
    }
    }
    Unfortunatley, it did not work. Do you have a solution for this?
    Many thanks, Rob

  8. Hmm, I've fiddled with the code a bit and can't seem to sort this just yet. That height appears to be hard-coded, because the whole point of Twenty Seventeen is to be able to display this big front page image (or video) followed by a sectioned front page.

    But it looks like you don't intend to those features at all -- correct? Is there something else you really like about that theme, or might it make more sense to try something else?

    Personally if I were designing your site, because the menu is quite complex and the page content is quite long, I would probably choose a theme with a consistent header size, and use a sidebar to hold most of the menu structure: something like Plane, perhaps, with a "navigation menu" widget in the sidebar.

  9. journeyingthroughthebible
    Member

    Hi supernovia
    Many thanks for your reply and advice. For the moment, I would probably stay with the TwentySeventeen theme, because in other ways, this theme works for me. Also, I am keen to use a default theme, as so many others are using it and I guess the amount of advice and support is likely proportionately higher over the long term. Nonetheless, I will look at the Plane theme, and try it out (I know to save any CSS on the TwentySeventeen theme if I activate Plane, in case I need to come pack to TwentySeventeen).
    I am happy to live with the existing large header on the Twentyseventeen theme in the end, although if it were possible to shrink it, that would be a real bonus (and I have a feeling this is something that other users might like to have).
    Also, a few minutes ago, another staff member (thesacredpath) replied to a previous thread of mine (not about this header), and I wonder if I should ask if he thinks TwentySeventeen can be tweaked to display a smaller image on the home page? If you don't mind, I will ask him. Once again, many thanks for your help in this. Rob

  10. I guess the amount of advice and support is likely proportionately higher over the long term

    Possibly, though we support all of the themes we offer in our showcase.

    I'd see what @thesacredpath can come up with too. I couldn't get mine to override the inline styles.

  11. @journeyingthroughthebible, see if the following will work for you. There are two CSS rules, one for when someone is logged in and the admin bar is present at the top, and one for those not logged into WordPress.com.

    .site-title,.site-title a{font-family:"Open Sans";color:#001c50 !important;font-weight:900 !important;font-size:17px}@media screen and (min-width: 48em){.site-title,.site-title a{font-family:"Open Sans";color:#001c50 !important;font-weight:900 !important;font-size:34px}}.site-description,.site-description a{font-family:"Open Sans" !important;color:maroon !important;font-weight:500 !important;font-size:18px}.wf-active .site-title{max-width:330px;width:100%}@media screen and (min-width: 48em){.wf-active .site-title{max-width:600px;width:100%}}.navigation-top a{font-size:105% !important;font-weight:400}.navigation-top .wrap{padding-top:0;padding-bottom:0}.navigation-top ul{background-color:#001c50}.navigation-top li{background-color:#001c50}.navigation-top a{color:#fff !important}.navigation-top li a:hover{background-color:maroon}.navigation-top ul{border:0 !important}.icon{display:inline-block;fill:#fff;height:1em;position:relative;top:-.0625em;vertical-align:middle;width:1em}.main-navigation{clear:both;display:block;background-color:#001c50}.menu-toggle{color:#fff}.navigation-top .wrap{padding-right:0;padding-left:0;max-width:100%}
    .twentyseventeen-front-page.has-header-image .custom-header-media, .twentyseventeen-front-page.has-header-video .custom-header-media, .home.blog.has-header-image .custom-header-media, .home.blog.has-header-video .custom-header-media {
        height: 34vh;
    }
    .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media, .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media, .admin-bar.home.blog.has-header-image .custom-header-media, .admin-bar.home.blog.has-header-video .custom-header-media {
      height: calc(45vh - 32px);
    }

    You can adjust the 34vh and 45vh numbers as desired.

  12. journeyingthroughthebible
    Member

    Hi @thesacredpath

    Thank you for the above code, I appreciate this.

    Also, my apologies for posting in several threads - I will use one thread for a single question in future.

    This code works really well when viewed in a computer screen, and on a tablet. I also like the fact that this view chooses the upper part of the image rather than the lower part to display as the header - for the kind of landscapes that I would tend to use, this is the better option. It looks great.

    However, on my mobile the header on the home page has not shrunk, it still takes up the whole of the screen, apart from the Menu bar at the bottom. In addition, the area of the image under the title is in a brighter colour; then, just above the title, the image suddenly goes duller and slightly darker. It's as if there's a kind of slightly opaque veil over the top three-quarters of the image. The division between the 'veiled' part and the lowest brighter part is very sharp, rather than gradual. Is there a way of getting the mobile view to be like the computer screen view?

    With many thanks again, Rob

  13. Hi there, you have 75vh in the following CSS rule in your custom CSS, and I had 45vh in the above code (last CSS rule above). With 45vh, the image/header area is shortened considerably.

  14. journeyingthroughthebible
    Member

    Hi I've changed the code back to 45vh. The header looks great on the computer screen, but I am still having the problem with the header on the mobile 'phone. The header still fills the mobile screen, apart from the menu bar at the bottom. But now the boundary between the upper 'veiled' area, which is duller and slightly darker, and the lighter brighter lower part has moved up and is now around halfway up the header. Is there a way of removing this boundary and reducing the header size on the mobile? With many thanks, Rob

  15. journeyingthroughthebible
    Member

    Hi I've changed the code back to 45vh. The header looks great on the computer screen, but I am still having the problem with the header on the mobile 'phone. The header still fills the mobile screen, apart from the menu bar at the bottom. But now the boundary between the upper 'veiled' area, which is duller and slightly darker, and the lighter brighter lower part has moved up and is now around halfway up the header. Is there a way of removing this boundary and reducing the header size on the mobile? With many thanks, Rob

  16. journeyingthroughthebible
    Member

    My apologies, I have somehow doubled up on the previous reply. My error.

  17. Hmmm, Twenty Seventeen can be a bit of a challenge. Let's take a different direction. Replace the one I had given with these two and see what you think. Test on tablet and phone as well, but in my testing it seems to work.

    .twentyseventeen-front-page.has-header-image .custom-header-media,.twentyseventeen-front-page.has-header-video .custom-header-media,.home.blog.has-header-image .custom-header-media,.home.blog.has-header-video .custom-header-media {
     max-height: 400px;
      height: 100%;
    }
    @media screen and (max-width: 767px) {
      .has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header {
        max-height: 150px;
      }
    }
  18. journeyingthroughthebible
    Member

    Hi This now looks great on my 'phone (a Samsung Note 3) and on my computer screen (when viewed no logged in). This is the effect I really wanted to get, thank you. Together with the CSS for the menu that's been set up, I think the whole home page looks excellent.

    However, with this new CSS code, unfortunately the menu and header have disappeared on the computer screen when logged in (i.e. as administrator) and on the tablet (an iPad using iOS 11 - we do not have an Android tablet). So what we see is the home page, but without any menu or header above. The header does appear briefly, when scrolling down, but then disappears again. (For other pages, the view is fine. It's only the home page that's like this.)

    Would there be any CSS coding specifically for a tablet view or administrator view, I wonder? The previous CSS code you sent was perfect for both tablet and administrator view. Is it possible specify the code for the tablet and administrator view separately - i.e. use the CSS code you sent today for mobile and computer, but the CSS you sent yesterday for tablet view and administrator view? If this could be done, it would be the solution.

    Thank you for all your work on this.
    Rob

  19. journeyingthroughthebible
    Member

    PS In paragraph 2 above, I should have said that header appears briefly when scrolling down on tablet, but then disappears again.
    Thanks
    Rob

  20. Hmmm, I'm not sure what is going on. There is a height: auto in the original CSS that is not getting overridden by the code we are using. I'm going to have to chase this and possibly get a developer involved. I'm missing something, but not sure what it is.

    Hopefully I can get this fixed for you on Friday.

  21. journeyingthroughthebible
    Member

    Hi - thanks again.

  22. journeyingthroughthebible
    Member

    Hi
    Following up the issue of the home page header, this idea occurred to me: is it possible, in fact, not to have a unique home page? Then the first page viewed (i.e. the static page always viewed first) would look like an ordinary page with standard small header? If this were possible, this would be a good solution. I suspect this isn't possible, but thought I'd ask, just in case.
    Also, just to say that I have recently made a few relatively minor changes in the CSS (these are commented to explain what's being done). Many thanks, Rob

  23. Hi there - I'm in for Richard today and catching up on this thread.

    Following up the issue of the home page header, this idea occurred to me: is it possible, in fact, not to have a unique home page? Then the first page viewed (i.e. the static page always viewed first) would look like an ordinary page with standard small header?

    It looks like perhaps you've already made this change, could you confirm? Are you set for now?

  24. journeyingthroughthebible
    Member

    Hi kathrynwp
    Thanks for your reply.
    No, I haven't managed to get the first page viewed to have the same header size and configuration as the other pages yet. I wonder if this is even possible?
    But just to recap what's been achieved so far:
    The CSS that @thesacredpath (is this Richard?) has supplied (as in the thread above) has given me an excellent small image for mobile 'phone use and on my computer screen. It works brilliantly. But it does not work on tablet (iPad) or on the admin screen. In both these cases, there is no header.
    However, in the last hour, I have come across some CSS on a WordPress.org forum that fixes the admin screen, so you can see a narrower header there:

    @media screen and (min-width: 48em) {
    	.twentyseventeen-front-page.has-header-image .custom-header-media,
    	.twentyseventeen-front-page.has-header-video .custom-header-media,
    	.home.blog.has-header-image .custom-header-media,
    	.home.blog.has-header-video .custom-header-media
    	.twentyseventeen-front-page.has-header-image .custom-header-media,
    	.twentyseventeen-front-page.has-header-video .custom-header-media,
    	.home.blog.has-header-image .custom-header-media,
    	.home.blog.has-header-video .custom-header-media {
    		height: 66vh;
    	}
    }

    I haven't tested the tablet screen yet, but will do so within the next hour and let you know.
    Once again, many thanks, Rob

  25. journeyingthroughthebible
    Member

    Hi kathrynwp
    Yes, it has worked on the tablet! The only thing I noticed was that the image on the home page didn't seem to be randomised (I have several images that I have randomised). I'll do some more testing and let you know.
    If there are no further tweaks required, then this set of CSS is a great way to reduce the size of the Twenty Seventeen home page header, and create a colourful menu that stretches right across the screen on all devices.
    I suspect a lot of people might want this CSS code. Is there a public place that I can post this CSS so that everyone using this theme on WordPress.com can be alerted to it and download it for their use?
    Many thanks, Rob

  26. Hi Rob - glad you found a way to get the effect you want on the header.

    The only thing I noticed was that the image on the home page didn't seem to be randomised (I have several images that I have randomised).

    The homepage header appears randomized for me - every time I reload the page, a different one is appearing.

    I suspect a lot of people might want this CSS code. Is there a public place that I can post this CSS so that everyone using this theme on WordPress.com can be alerted to it and download it for their use?

    These forums are public, so this is a good spot! I'll just put your CSS in code tags so it's easier to read.

  27. journeyingthroughthebible
    Member

    Hi kathrynwp
    Yes, having tested it, in fact the randomisation does work on the tablet view. This is a great solution to what I was looking for.
    It's rather late now here in the UK, so I'll copy the whole set of CSS over tomorrow (i.e. relating to the header image, the site title and tagline and the menu), each with the appropriate commenting. I hope some or all of this CSS will be of help to folk for customising Twenty Seventeen.
    Once again, many thanks, Rob

  28. Sure - sounds good!

You must log in to post.

About this Topic