Twenty Seventeen website title, sub-title, menu colour customisation
-
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, RobThe blog I need help with is: (visible only to logged in users)
-
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 -
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;
} -
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 -
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.
-
@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.
-
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 -
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.
-
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 -
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.
-
@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.
-
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
-
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.
-
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
-
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
-
-
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; } } -
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 -
PS In paragraph 2 above, I should have said that header appears briefly when scrolling down on tablet, but then disappears again.
Thanks
Rob -
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.
- The topic ‘Twenty Seventeen website title, sub-title, menu colour customisation’ is closed to new replies.
WordPress.com Forums 