Nikau take 2
-
hi there
I am really hoping someone can help me with this theme this is the third time I have installed it but it does not look like it should on the demo so here goes;
1. I would like to activate the full page width, whilst this shows up on the demo there is no option to do so when setting this up. Is this merely for demo purpose? I would like someone to please show me how to get this exactly as it shows up on the demo. I have reached out to the theme creator and have not gotten a clear answer.
2. I would like to create an instagram footer, where only the instagram feed shows up across the blog on the footer please
3. I would like to get rid of the social media buttons at the top.
I installed this theme back in December and had to change it after waiting for so long for solutions that I did not receive so any help would be greatly appreciated
The blog I need help with is: (visible only to logged in users)
-
Hi there,
As Nikau is a premium theme, you should probably post these questions in the support forum for that theme at:
-
@themadameditor, there is full setup information for this theme here, which I hope will help you in getting things set up like the demo site.
If you add an Instagram widget to your footer widget area, I will work out the code to make it full width.
On the social menu at the top, there are two instances. First when you are fully at the top of the page, and the second when you scroll down a bit and the header becomes fixed. If you want to only get rid of the one when you are fully at the top, use this custom CSS.
.jetpack-social-navigation #menu-social-menu { display: none; }If you wish to get rid of that and the one that appears after you scroll down a bit, then use this instead.
.jetpack-social-navigation #menu-social-menu, .jetpack-social-navigation #menu-social-menu-1 { display: none; } -
-
hi @sacredpath many thanks for coming back to me with the relevant tips. I have included the instagram in the footer widget for the code when you can please.
I have followed the theme detail to the letter as much as possible but I still have no joy with the full width post theme as shown in this link here;
I have tried going deleting all the side widgets but nothing works. If there is something I am doing wrong please let me know. I truly appreciate the helpful comments.
Annalisa
-
apologies the link did not copy properly but that is the link for the full width page in the demo
-
Hi, for the Instagram widget, use the following code, and you will probably want to go to Customize > Widgets and edit the Instagram Widget and change the number of columns, and possibly the number of images as they are really huge with only two columns.
#footer-widgetarea-one { width: 100%; }The full width template only applies to static pages. It does not a apply to the blog, archive, category, tag or single post pages. The main page, when set to a static page that has the Front Page Template applied, will be full width as that is the way that page is designed. And, full width can be a bit confusing since there is typically a maximum width set for pages that normally have text based content, such as your About Page (if it was set to full width template). If text based content gets too wide, it becomes less readable and the eye will have a harder time moving from the end of one line to the beginning of the next, and with longer lines, reader fatigue also becomes an issue for pages or posts with a lot of content.
To make everything nearly full width except for some left and right margin, add the following to your custom CSS.
.no-sidebar #primary { width: 100%; max-width: 100%; } .single-post.no-sidebar .entry-content, .single-post.no-sidebar .entry-footer, .single-post.no-sidebar #comments, .single-post.no-sidebar .post-navigation { width: 100%; max-width: 90%; box-sizing: border-box; } .single-post.no-sidebar .entry-thumbnail img { width: 100%; } @media screen and (min-width: 85em) { .single-post.no-sidebar .entry-content .wide-content { margin-right: 0; margin-left: 40px } } -
hi @sacredpath I realised that after I’d sent it that it refers to the page not the post, none the less your css really helped me get where I need to be aesthetic wise. so thank you so much
a little further help please:
– lines: is there a code for me to change the line colours? between posts and sections
– centre heading: I would like to make the heading of the post central aligned if its possible please
– related section in the posts; I would like to make the heading RELATED also central aligned and also to change the text to something of my choosing.
– Menu; is it at all possible to change the colour of each mene at the top navigation; HOME, STYLE, TRAVEL etc i would like them to be a different colour if possible
– Instagram; could I possibly change the size of the instagram images? they are a little big and I have tried to tweak them to size but been unsuccessful.
Colours; the background colour of the post section three and the instagram footer I would like to change as well
once again, thank you so so much for your help I am truly appreciative.
-
– lines: is there a code for me to change the line colours? between posts and sections
I think this covers about all the lines, including the one below the footer widgets. I’ve used different named colors in my example code so that you can more easily identify which rule controls which lines. You can replace with hex color codes.
.front-section-title { border-color: red; } .front-section .type-post { border-color: goldenrod; } .blog-wrap h3.blog-title, .archive-header h1.archive-title { border-color: blue; } #primary .hentry { border-color: cyan; } #masthead { border-color: orange; } .footer-widgetarea-wrap { border-color: yellow; } .recommended-posts-wrap #jp-relatedposts h3.jp-relatedposts-headline { border-color: aquamarine; } .recommended-posts-wrap #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post { border-color: lime; } .single-post .entry-content blockquote { border-color: cadetblue; }– centre heading: I would like to make the heading of the post central aligned if its possible please
I’m assuming you mean on the single post pages, such as this one. This would be the code to do that.
.single .entry-title { text-align: center; }– related section in the posts; I would like to make the heading RELATED also central aligned and also to change the text to something of my choosing.
Add this and edit the New title text in the content declaration.
div#jp-relatedposts h3.jp-relatedposts-headline em { visibility: hidden; font-size: 0; position: absolute; } div#jp-relatedposts h3.jp-relatedposts-headline:before { content: "New title"; font-style: normal; text-align: center; display: block; }– Menu; is it at all possible to change the colour of each mene at the top navigation; HOME, STYLE, TRAVEL etc i would like them to be a different colour if possible
Each menu item has a unique CSS id associated with it, so we can use those to specifically target each menu item for a different color like this. This list is in order of your menu from left to right.
#menu-item-464 a { color: red; } #menu-item-13668 a { color: green; } #menu-item-12866 a { color: orange; } #menu-item-15561 a { color: blue; } #menu-item-13666 a { color: purple; } #menu-item-13135 a { color: lime; } #menu-item-9567 a { color: violet; } #menu-item-5721 a { color: goldenrod; }– Instagram; could I possibly change the size of the instagram images? they are a little big and I have tried to tweak them to size but been unsuccessful.
Ok, my first suggestion would be to perhaps put 12 images in that and then set things to 4 columns, and that would make the images smaller but still make things full width. If you are not wanting to do that, replace the code I gave you earlier for that resize with the following. You can adjust the 60% width value as desire.
#footer-widgetarea-one { width:60%; margin-left: auto; margin-right: auto; float: none; } .wpcom-instagram-images { margin-left: auto; margin-right: auto; float: left; }Colours; the background colour of the post section three and the instagram footer I would like to change as well
Here you go.
#front-section-three { background-color: yellow; } #colophon { background-color: goldenrod; } -
thanks so much for these codes @sacredpath I truly appreciate it, I will get working on them and come back to you if I have any questions. thank you so much
-
-
hi @sacredpath, I have spent most of the day entering these codes and working around them and I have to say a HUGE thank you for the time and patience taken to help with this, thank you so much
just a few bits more and I am there:
accent colour: when I click on load more posts that colour is a vivid blue, when I try to change it on the fonts and colour section in customise, it changes the whole look, Is there a code that I could use to control this?
Instagram: I tried to shift things round but I am only able to set this to 3 columns hence it appears to stay the same size even with the second adjustment. Preferably I would like the images smaller and fine to be displayed over two columns. Also I would like it to be centrally aligned.
Some advise on pages: I am eventually going to create a page in the 3rd blog section and would like this to be something more content as opposed to just a bug standard about me page, I want to create travel itineraries in the form of blog-posts, curate an address book of the sort. Is there any advise tips that you have that can help me with this?
once again, I cannot thank you enough for all your help it has been immeasurable. thank you so much
-
Hi, on the hover color on the Older Posts button, add the following and you can adjust the colors. I just grabbed the pink color you have been using.
#primary #infinite-handle span:hover { background-color: #f9cfcc; } #primary #infinite-handle span:hover button { color: #000; }On the Instagram widget, it will only allow 3 columns because you have the number of images set to 6, and it has to be able to have the same number of images on each row. You can change it to 8 images with 4 columns and the images would be smaller, or 10 images with 5 columns and the images would then be smaller still.
We can set the Instagram Widget to a narrower width. Find this CSS rule in your custom CSS
#footer-widgetarea-one { width:100%; margin-left:auto; margin-right:auto; float:none; }and change it to this and see what you think.
#footer-widgetarea-one { max-width: 850px; width:100%; margin-left:auto; margin-right:auto; float:none; }You can adjust the 850px max-width value as desired. There will be a bit of a difference in the space on the left and right of the widget, but there isn’t a lot we can do about that.
As an alternative to the above, we can also replace that CSS rule with the following. Give both a try and see what you think.
#footer-widgetarea-one { width: 100%; margin-left: auto; margin-right: auto; float: none; } @media screen and (min-width: 850px) { #footer-widgetarea-one { width:70%; } } -
hi @sacredpath I tried both way but the widget section for instagram on the setting only allows me to set to 3 columns regardless of the number of images it would seem. If there is away to by pass this I would appreciate your help. I think I would like the following:
– make the images smaller
– no gaps between images
– if possible, make the instagram span the entire footer widthAccent colour:
– the colours for “LOAD MORE POST” the boarder is blue I would like to amend this to another colour please.
– also where it says SEE ALL POST and the accent for the menus like LIFE ETC & SEE ALL POST in the pink section is blue as well I would like to amend this to a different colour… I hope I am making sense. I think this is tethered to the accent colours in the fonts and colours but once I change it on there, it overrides all the css codes you have given me.once again thanks for your help
-
Hmmm, interesting. This will take it to 4 columns by making the images smaller.
@media screen and (min-width: 481px) { .wpcom-instagram-columns-3 img { width: 25%; margin: 0; } }If you wish to go to 5 across, change the 25% to 20%. If you wish 6 across, make the width 16.5%.
I would suggest against full width. I think it looks better with the left and right extremes of the images aligned with the content in the section above.
If you did want to give that a try, use the following instead of the above.
@media screen and (min-width: 481px) { .wpcom-instagram-columns-3 img { width: 16.65%; margin: 0; } #colophon { padding-left: 0; padding-right: 0; } .jetpack-social-navigation, #site-info { padding-left: 5.3125%; padding-right: 5.3125%; } }On the border for the older posts button on hover, find these two rules in your custom CSS and add a border-color declaration as below. The following also takes care the see all posts button.
#primary #infinite-handle span:hover, #front-section-three a.all-posts-link:hover { background-color:#dee1da; border-color: goldenrod; } #primary #infinite-handle span:hover button, #front-section-three a.all-posts-link:hover { color:#000; } -
you are absolutely right, it looks better with the boarders and much better together. this is what I needed.
one more thing: how do I get the menu to stay black when it is clicked on to inform people they are on a particular category menu please? for instance; TRAVEL should be black when anyone clicks on travel on the menu.
you have been more than helpful and patient and kind and for that I cannot thank you enough for helping me get my blog to where I need it to be aesthetically. thank you so much once again the help has been TRULY appreciated @sacredpath
-
how do I get the menu to stay black when it is clicked on to inform people they are on a particular category menu please?
Due to the way this theme is designed, there isn’t a way to let you do this automatically for new items, but this will take care of it for the menu you currently have:
/* Set Color of Menu Item for Current Page */ .home #menu-item-464 a, .archive.category-life-etc #menu-item-13668 a, .archive.category-style #menu-item-12866 a, .archive.category-beauty #menu-item-15561 a, .archive.category-the-beat #menu-item-13666 a, .archive.tag-travel #menu-item-13135 a, .archive.category-xo #menu-item-9567 a, .archive.category-me #menu-item-5721 a { color: black; } -
Thanks for that @dcoleonline I will give these a go.
I have just updated my site to include a header but the menu is not above the header, is there a way that I could change this so the header is before the menu and also to manage any excess white space between them?
thanks so much
-
is there a way that I could change this so the header is before the menu
Yes, but it won’t work in IE 9 and older. It is a lot of code, but it accounts for multiple browser types. It looks like the header is only used on the front page, so the code is limited to the front page.
Within the code below, you’ll find a margin-bottom: 0px piece which you can use to change the space between the header and the menu below it.
@media screen and (min-width: 1060px) { .home { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .home .header-image { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin-bottom: 0px; } .home #masthead { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .home #overlay-wrap { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .home .featured-content { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .home #front-section-one { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .home #blog-wrap { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .home #front-section-three { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .home #front-section-fourcolumn { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .home #colophon { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } }I also noticed a solid black line on your site (before adding the above CSS), and if you’d like to remove that, try this CSS:
#site-branding {border: none;}
- The topic ‘Nikau take 2’ is closed to new replies.
WordPress.com Forums 