Header, spacing, adding music
-
Hello,
Would really appreciate help with the following:1) I would like my menu to remain put when navigating through pages.
2) I would like to reduce the space between my between the menu under the header picture and the following pages ‘welcome’ ‘about’ and ‘contact’. They are too far down.
3) Am I able to reduce the spacing and the entire section itself (footer)?
4) I am trying to embed music when you entire the site and was provided with, but its not working:
[audio m4a="https://styellesbycamiaj.files.wordpress.com/2016/08/11-controlla.m4a" autoplay="on"][/audio]
it will autoplay the song. You may also want to have the song loop after it ends, which would be:
[audio m4a="https://styellesbycamiaj.files.wordpress.com/2016/08/11-controlla.m4a" autoplay="on" loop="on"][/audio]
Thanks!
The blog I need help with is: (visible only to logged in users)
-
Hi, lets work through these in order, just copy the code to the CSS section of the customiser below the code you’ve already included.
I would like my menu to remain put when navigating through pages.
If you mean you don’t want it to stick to the top of the page when scrolled down you can do that with this code:
.sticking { position: unset; }I would like to reduce the space between my between the menu under the header picture…
You can reduce the margin on the main content section like so:
#content { margin-top:1.5em; }Am I able to reduce the spacing and the entire section itself (footer)?
I’m don’t understand what you want, could you explain in a bit more detail which spacing you’re trying to reduce.
I am trying to embed music…
You need a paid plan in order to upload music and add it with but assuming that’s not an issue you should try the |loop=yes shortcode format shown on that page.
That’s how you can play music but whether you should or not is a different question. I strongly advise everyone against auto-playing audio on their sites.
Lots of people browse the internet while listening to something they’ve chosen, when your page loads conflicting music they can get annoyed and they are likely to navigate away from your site rather than taking the time to search for a pause button. This is even more frustrating if they click on to another page just to have the same music load up automatically again. Feel free to do what you want but it’s possible (even probable) that you’ll drive more visitors away by auto-playing music than you will retain.
-
Thank you very much for taking the time to help me! I’ll forget the music, you make a great point.
-This code didnt work unfortunately. Any other suggestions to reduce the space under the menu header:
#content {
margin-top:1.5em;
}-Trying to lower the header, I don’t like that it appears so large.
-I have some pictures on my ‘welcome’ page and wondered if I could get them to rotate like a gallery in the same format, which they appear. I do not like the slideshow option WordPress has with the black background.
-
-
OK, that’s a great start, I’m glad it worked.
Trying to lower the header, I don’t like that it appears so large.
You can reduce the header image height on desktop like this:
@media only screen and (min-width: 50em) { .site-branding { padding: 1em 1.5em 0; } }It looks like your header isn’t quite tall enough on some tablet sizes and orientations so if you can it would be good to re-upload or crop the picture so it’s a bit taller. It’s most noticeable on a 10″ tablet (or resize your screen to be 800px wide).
If you change your gallery settings on the welcome page to a list of individual images instead of tiled then I’ll have a look to see if we can use CSS to do this. If not you can set up a standard slideshow and I can figure out the CSS to remove the black background and borders.
-
Thanks! Header worked… I will try and crop my imagine in the header so its not only my eyes that appear. But now it is consistent with I navigate through diff pages.
I have changed the images on the ‘welcome’ page to individual so you can see which CSS codes I can use.
Thanks SO much!
-
So it looks like the body is still moving up and down from the ‘welcome’ to the other pages. I have left it in its current state so you can see what I mean.
Basically, the header image is the same size throughout the pages, however, on the welcome page, the body is lowered and you can see the pink background. How can I get the body moved up on the ‘welcome’ page so it is consistent?
Many thanks!
-
I thought you were trying to reduce the size of the header, not make it take up more space?
-
I may not being explaining myself correctly, I apologize.
I picked the featured header photo. I noticed that when I navigate from the ‘welcome’ page to the rest of the pages the body/content moves.
Currently, I have left the ‘welcome’ page as is so you can see that the pink background appears. I am just trying to get consistency.
Were you able to figure out the CSS codes to to have the pictures rotate in the titled format I previously had?
-
On the main page, the extra pink is due to the collapsed Hero section for the post slider. We can use the following custom CSS to make the home page the same space as on the other pages.
.hero-section { display: none; }On your welcome page, you have inserted your title as an “h2” element within the page content itself, which has different spacing than the regular titles, such as on your category pages. The following comes really close to getting the home page spacing, and the pages, such as contact to be substantially the same.
.home .home-content h2 { margin-top: 0; } .home .home-content { margin-top: 8px; } body.page:not(.home) .entry-title { margin-top: 10px; }Were you able to figure out the CSS codes to to have the pictures rotate in the titled format I previously had?
Can you explain a bit further what you are wanting? In General, CSS cannot be used to rotate images. Are you by chance talking about a featured post slider?
-
I hadn’t forgotten about you it just took a while to sort out the CSS animation to set up your images. You’ll need to edit the front page content using the HTML editor ever so slightly too.
You also need to use images that are all the same size, the final image you have won’t work because it’s a different orientation. The following code assumes you’re using the other 5 images, if you use a different number the animation will appear off and you’ll need to adjust the CSS accordingly.
Edit your HTML so that the 5 images are contained in two div elements, the first should have an ID attribute like so. I’ve gotten rid of the img tag attributes so that it’s easier to read, you should leave them in or it will break everything!
<div id="fpslider"> <div> <img src="https://styellesbycamiaj.files.wordpress.com/2016/08/im_1867.jpg?w=1520" alt="IM_1867" ...> <img...> <img...> <img...> <img...> </div> </div>Then here’s the CSS code to include:
div#fpslider { overflow:hidden } div#fpslider img { width:16.666667%; float:left } div#fpslider div { position:relative; width:600%; margin:0; left:0; animation:35s scrollimages infinite } @keyframes scrollimages { 0% {left:0} 15% {left:0} 20% {left:-100%} 35% {left:-100%} 40% {left:-200%} 55% {left:-200%} 60% {left:-300%} 75% {left:-300%} 80% {left:-400%} 95% {left:-400%} }Let me know if you run into any trouble.
-
@thesacredpath thank you SO much. The pink still appears but I think that is b/c it is the colour option I picked in my theme. The codes you provided did manage to keep the body in place so its consistent.
@hallluke MUCH thanks! The slide show looks great. Should I need to change images, I assume i just copy and paste the image titles into the HTML page and ensure they are the same size?
I noticed when I reduce the picture size (currently 600) in the slideshow that the images stop half way when sliding. Also, wondering how I can get the pictures to go in a loop rather than flash back to the beginning when it gets to the final image.
Thank you both once again, it’s such an amazing feeling seeing this come to life and learning the back ends of putting it together.
-
+
Currently I have 6 photos in the slideshow. When I add more, the last photo drops to a second line. Can this be fixed so the pictures always appear one by one?
Also. I noticed that there is a long pause when the slideshow is done. This ties with my question above about
“Also, wondering how I can get the pictures to go in a loop rather than flash back to the beginning when it gets to the final image.”
-
I don’t think it’s possible to get the slideshow to perform a true loop. If you don’t like it zooming back through all the images you could set it to, once it reaches the end, step backwards through the images, one by one, at the same speed until it reaches the beginning and then loop.
You currently reduced the frame size so it’s showing 2 images at a time, did you mean to? If you change the number of images you need to change both width % values in the code to account for this. One should be 100/n and one should be n*100. So the individual image width for 6 images is 100/6 which is 16.666667% and the container size is 100*6 which is 600% (I think I messed this up in my first example).
You also need to change and increase or reduce the number of keyframes in the code to match.
The current set up is for 5 images so the keyframes are split into 5 equal gaps (20% each) and then this is then split again 3:1 so 15% viewing the image and 5% scrolling to the next image. For 6 images you’d need to split 100 into 6 equal gaps (16.666667%) and then split this into quarters (alternate jumps of 12.5% and 4.166667%) so it would look like so:
@keyframes scrollimages { 00.000000% {left:0} 12.500000% {left:0} 16.666667% {left:-100%} 29.166667% {left:-100%} 33.333333% {left:-200%} 45.833333% {left:-200%} 50.000000% {left:-300%} 62.500000% {left:-300%} 66.666667% {left:-400%} 79.166667% {left:-400%} 83.333333% {left:-500%} 95.833333% {left:-500%} }You don’t need to split each step by the ratio of 3:1 you could have the transitions faster and the images still for longer, it’s completely up to you – but you have to do the maths!
If you add more images in you probably also want to set the overall time to be slightly longer, just change where it says 35s in the original code to adjust the time it takes for one whole cycle of the animation.
-
How do I do this?
I don’t think it’s possible to get the slideshow to perform a true loop. If you don’t like it zooming back through all the images you could set it to, once it reaches the end, step backwards through the images, one by one, at the same speed until it reaches the beginning and then loop.
I was reducing the slideshow pictures using (below) but I am confused about changing the 100/6 16.666667% or changing the code when adding additional pictures. When I play around with the numbers, the pictures still do not show one at a time.
div#fpslider div {
position: relative;
width: 600%;
margin: 0;
left: 0;
animation: 45s scrollimages infinite;I did try the CSS code you provided but the pictures are still a little too large. Thanks!
-
It seems like the new code has fixed it so that all 6 images are showing in the progression instead of missing off the last one. The new code I gave you isn’t meant to change the size of the images, it just changes how the animation works if you were to have a different number of images. Since you’ve kept it at 6 images any changes to the numbers will break the layout.
Instead if you want to shrink the whole slider section then you set a width and centre the containing div element, just replace the existing rule with the following:
div#fpslider { overflow: hidden; width: 70%; margin: 0 auto; } -
Awesome! It worked and looks great!
Can you just confirm one more time what I do to when I want to add additional images and keep the slideshow at one image per slide?
I was using:
`<div id=”fpslider”>
<div>
<img src=”https://styellesbycamiaj.files.wordpress.com/2016/08/im_1867.jpg?w=1520″ alt=”IM_1867″ …>
<img…>
<img…>
<img…>
<img…>
</div>
</div>` -
+
Also, may I trouble you for the CSS code to get the pictures to scroll backwardS once it completes the initial slideshow rather than looping back to the beginning and starting up again?
-
If you want to bump it up to 7 images in the HTML you would simply add another img tag – exactly as you would expect, no tricks to this bit.
In the CSS however you’d have to change the widths: 600% to 700% and 16.666667% to 14.285714% (we’re changing from one sixth as a percentage to one seventh as a percentage).
Now for the bit that causes the headache, you need to set some new @keyframes.
In the example with 5 images these were split into 5 equal groups of 20% (so that it sums up to 100%), and each 20% was split into 15% (where the image is still) and 5% (where the image transitions), you’ll notice that 15 is 3 times as large as 5, I’ll use the same ratio in the examples below for 6 and 7 images. Then alternately add 15% and 5% up until you’re about to get to 100% and the value for left drops by 100% every other time.
For 6 images the split is 6 equal groups of 16.666667%. Each of those is split into 12.5% and 4.166667% (keeping one 3 times the size of the other – there’s no specific reason to use this ratio, it’s just a nice balance). Now you add these two values alternately and set the left value as before, you should have two extra lines taking you down to -500%, exactly as in the example I posted further up in this thread.
If you want to do 7 images the split is 100 divided by 7 which comes out to 14.285714%. If you want to keep the image still for three times as long as it’s moving we split it into 10.714286% and 3.571428%. Keep on adding these alternately and assign the left value dropping by 100% every other time and you’ll end up with the code you need.
- The topic ‘Header, spacing, adding music’ is closed to new replies.
WordPress.com Forums 