Customising my site
-
Hello,
I’d like to customise my site a little. Please can you tell me how to do the following things:
1) Header image- as you can see, the head is chopped off. How do I ensure this is always bigger so that the right crop is always shown?
2) As you can see there is a gap on the homepage next to ‘Jewish Teaching Kits’ where a third menu item called ‘London Walking Tours’ should sit. I don’t understand where this has gone as the template initially had 3 columns here. How do I get it back?
3) I would love a navigation bar across the top of the page on desktop, as opposed to the menu button that opens out. How do I do this?
4) Finally, where will the testominals appear on my site? I have added a couple but I can’t see them on the site anywhere?
Thank you
The blog I need help with is: (visible only to logged in users)
-
Hi there,
1) Header image- as you can see, the head is chopped off. How do I ensure this is always bigger so that the right crop is always shown?
The software crops the featured images in Edin center-weighted, so you can keep that in mind when preparing your images. The height of the image on the main page is controlled by top and bottom padding on the overlaid text. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and see what you think.
.hero.with-featured-image, body[class*="front-page"] .hero { padding-top: 250px; }2) As you can see there is a gap on the homepage next to ‘Jewish Teaching Kits’ where a third menu item called ‘London Walking Tours’ should sit. I don’t understand where this has gone as the template initially had 3 columns here. How do I get it back?
3) I would love a navigation bar across the top of the page on desktop, as opposed to the menu button that opens out. How do I do this?
I’m not seeing that gap now, and I see you have chosen the Classic menu at Customize > Theme Options.
4) Finally, where will the testominals appear on my site? I have added a couple but I can’t see them on the site anywhere?
The Testimonials will appear at this URL: https://exjuk.wordpress.com/testimonial/ . You can also choose to have two random testimonials show on your front page by going to Customize > Testimonials. You also have the option of adding some text that will appear above the testimonials on the testimonials page. You can see our Testimonials Support page for more information.
-
That’s great, thank you for your help!
I have a few more questions for you if thats ok- mainly regarding the menu:1) The pages automatically are made upper case when in the menu. Is there a way to keep them lower case?
2) How to I delete ‘home’ from the menu’. As you can click on the logo to get back to the homepage i don’t want it in the menu too.
3) Is it possible to underline the menu items in colour rather than each item being highlighted when hovering and when on a page?
4) I’d like for one of my menu items to be ‘Offerings’ and within that there to be a drop down where the following pages sit ‘school workshops’ ‘walking tours’. Is it possible to do this? And how?
5) Finally, is it possible to link out to a specific point on an existing page, rather than the top of the page? E.g. if i want to direct someone on the ‘walking tours’ page, towards a specific price half way down the ‘book now’ page, is this possible to do?
Thank you!
-
Hooray for the progress so far.
1) The pages automatically are made upper case when in the menu. Is there a way to keep them lower case?
Add this to your custom CSS to set the menu text back to normal (as you type it in).
.primary-navigation .menu-primary a { text-transform: none !important; }2) How to I delete ‘home’ from the menu’. As you can click on the logo to get back to the homepage i don’t want it in the menu too.
You can do that by going to Customize > Menus and then in your primary menu open the “home” menu item and click Remove at lower left and save.
3) Is it possible to underline the menu items in colour rather than each item being highlighted when hovering and when on a page?
Whew! This took far more futzing and code than I expected. Add this to your custom CSS. You can edit the border colors as desire
.large-screen.navigation-classic .primary-navigation .menu-primary > ul > li.current-menu-item > a, .large-screen.navigation-classic .primary-navigation .menu-primary > ul > li.current_page_item > a { background-color: rgba(0, 0, 0, 0); color: initial; border-bottom: 2px solid #000; padding-bottom: 10px; } .large-screen.navigation-classic .primary-navigation .menu-primary > ul > li:hover, .large-screen.navigation-classic .primary-navigation ul ul li { background-color: rgba(0, 0, 0, 0) !important; color: initial; } .large-screen.navigation-classic .primary-navigation .menu-primary > ul > li > a:hover, .large-screen.navigation-classic .primary-navigation .menu-primary > ul > li > a:focus, .large-screen.navigation-classic .primary-navigation .menu-primary > ul > li > a:active { border-bottom: 2px solid #000; padding-bottom: 10px; background-color: rgba(0, 0, 0, 0) !important; color: initial; }4) I’d like for one of my menu items to be ‘Offerings’ and within that there to be a drop down where the following pages sit ‘school workshops’ ‘walking tours’. Is it possible to do this? And how?
Our Custom Menus Support page has information on creating dropdown submenus.
5) Finally, is it possible to link out to a specific point on an existing page, rather than the top of the page? E.g. if i want to direct someone on the ‘walking tours’ page, towards a specific price half way down the ‘book now’ page, is this possible to do?
See our Page Jumps Support page on creating page jumps to places on other pages.
-
Hello, we’re definitely getting somewhere. Thanks so much!
I have a few more questions which i hope you can help me with:1) I have managed to get my header image center aligned but can not work out how to do this for the menu bar? I’d like it to sit centrally.
2) Is it possible to change the featured image of the 3 ‘front page featured’ articles once they have been clicked on so that a different image appears?
3) Is it possible to add a link to the homepage testimonials that leads to the main testimonial page where they can all be seen?
4) I’d like the random testimonials on the homepage to be in white writing, but in black writing on the main testimonial page. How do i do this?
5) On the main image on the homepage, is it possible to decrease the spacing between the first and second line of text “Our Judaism…your classroom”?
I think that’s everything… for now ;-)
Thank you again for all your help. -
Hooray, progress is a good thing. :)
) I have managed to get my header image center aligned but can not work out how to do this for the menu bar? I’d like it to sit centrally.
Add this to center your menu. I’ve limited this to the window/screen widths where the full menu displays so it doesn’t affect the alignment on the touch device menu for phones and tablets.
@media screen and (min-width: 1021px) { .menu-primary { text-align: center; } .menu-primary ul { display: inline-block; } }2) Is it possible to change the featured image of the 3 ‘front page featured’ articles once they have been clicked on so that a different image appears?
Hmmm, this may be possible. If you have an image in mind for one of those, can you let me know which one and then give me a URL to the image in your media library and I’ll see what I can do. Sometimes this gets a bit complex. It will require separate CSS rules for each.
3) Is it possible to add a link to the homepage testimonials that leads to the main testimonial page where they can all be seen?
This can be complex especially with responsive designed themes. My suggestion would be to add a text widget with a link to the footer widget area with the contact info widget. I can then see what I can do to get it up and into the testimonials area. I may have to limit that move to only certain window/screen widths, but I’ll do my best.
4) I’d like the random testimonials on the homepage to be in white writing, but in black writing on the main testimonial page. How do i do this?
There is a specific CSS class for the front page testimonials area, so we can use that to change the text color only on the main page with this.
.front-page-testimonials-area { color: #fff; }5) On the main image on the homepage, is it possible to decrease the spacing between the first and second line of text “Our Judaism…your classroom”?
Certainly. The line height on the h3 heading element was set at 2em. Add the following and adjust as desire. You can also use decimal values, such as 1.5em or even 1.543798em.
.hero.with-featured-image h3 { line-height: 2em; } -
Fab thank you- My responses to your comments above:
2) Here is the featured image I would like to switch to once ‘school workshops’ is clicked on:
https://exjuk.files.wordpress.com/2016/08/year-3-jewish-visitor-17.jpg3) I wasn’t entirely sure where you meant for me to add the text widget so you’ll see I have added two, one as a separate footer ‘Testimonials footer one’ and one which is part of footer two along with the contact details ‘Testimonials part of contact’. Both of these lead to the testimonials main page. Let me know what code I need to bring one up into the testimonial section and i’ll just delete the other one.
5) This has worked although when the screen is slightly smaller and the words go across 3 lines, there is still a greater gap between parts of the sentence.
Thank you
-
-
Hi @explorejudaism, I hope you don’t mind me jumping in to help.
Have you thought about something like this? I would set the proper featured image in each article (that way the real image shows on social media, etc), then control the images displayed on the front page like this:
.home .featured-page:nth-child(1) .post-thumbnail img { opacity: 0; } .home .featured-page:nth-child(1) a.post-thumbnail { background-image: url('https://exjuk.files.wordpress.com/2016/08/yourimage.jpg'); }You would do the same with the other two, only use :nth-child(2) and :nth-child(3). And obviously you would need to change the background image URL to match the actual URL for each image.
-
That’s perfect thank you!
The only problem now is that the thumbnails on the homepage are not automatically square at a smaller screensize (when they are stacked). How do I fix this? I’ve put a yellow box in the homepage as an example to work with.Thank you
-
Hmm, try adding this:
@media screen and (max-width: 767px) { .home .featured-page a.post-thumbnail { max-width: 330px; margin: 0 auto; } } -
Thank you very much for your help.
I have another query on it-
As you can see when i do the above, the image is very zoomed in on the front page above ‘school workshops’. How do I zoom out? I would like it to appear how it does when above London Walking Tours on the far right. (It appears at the correct size when uploaded as ‘featured image’.)
Thank you -
Can you upload another image that is cut to the correct size?
You could also use background-size: cover like so:
.home .featured-page:nth-child(1) a.post-thumbnail { background-image: url('https://i.vimeocdn.com/portrait/622608_640x640'); background-size: cover; } -
-
No problem. I’ll close this one out, but if you need more help, go ahead and start a new thread. Cheers :)
- The topic ‘Customising my site’ is closed to new replies.
WordPress.com Forums 
