Hi, I have an Info/About Me button at the top of my website. I want to make the Info button, scroll to the bottom of the page where there is an Info/About Me section.
I'm unsure of how to call out just the "Info" text. If anyone knows how to do this, then I'd really appreciate it thank you!
My images and formatting in laytheme is not showing up when i go to my actual website, and I don't know why.
it shows up like this below
but i want it to show up like it does in laytheme,
my website is susanna.studio, if anyone knows why this is happening please help!
My wordpress website is susannasuh.info
I recently reactivated my website after the domain name has expired, it worked fine before but now my website does not show any contents and is just a black/white screen of death on google chrome and safari. It sometimes shows up on firefox.
I don't think it is an update issue because I can view my website just fine in firefox in my own browser, but visitors only see a black/white screen.
Please help! I'm so worried job recruiters are only seeing a black screen :'( please help if you can
Thanks Marius! Would be really great if thats possible I appreciate it!
Oh I think there's been a misunderstanding, I wasn't asking about CSS, I was asking if you could add an option to have HTML to this menu as well.
Lay options has both custom CSS & HTML
But the WP Admin customize menu only has custom CSS. Would it be possible to add HTML to the WP Admin customize menu below?
Thank you!
Yes! It was super helpful, I've customizing most of my website referencing that link and the forums even though I'm completely new to css and js.
I found the code below on a previous forum post about Hovering and Images, and I've been trying to modify it below for my website. I think the big problem I keep running into when modifying this code is that when I try to modify the hoverFolio-links and replace it with my project titles/links in my menu I probably just don't have the code grammar right so it breaks :'(
I've been trying to code it so my project titles in the menu are in their own a classes so they can be called out but I'm not too sure what I'm doing wrong...
Custom HTML at top:
<script>
// Hover Folio
function hover_folio() {
var wrapper = $('.hoverFolio');
if (!wrapper[0] || wrapper[0].hoverFolio) {
return;
}
wrapper[0].hoverFolio = true;
var images = wrapper.find(".hoverFolio-image");
var links = wrapper.find(".hoverFolio-link");
var currentImage;
links.each(function (index) {
$(this).on("mouseenter", function () {
if (currentImage) {
currentImage.hide();
}
currentImage = images.eq(index);
if (currentImage) {
currentImage.show();
}
});
});
links.on("mouseleave", function () {
if (currentImage) {
currentImage.hide();
}
});
}
$(document).ready(function() {
hover_folio();
// Every time a new page is shown, try to initialize the hoverFolio effect
window.laytheme.on('newpageshown', hover_folio)
});
}(jQuery))
</script>
Custom CSS:
.hoverFolio {
/*basic styling for your text object*/
margin: auto !important;
}
.hoverFolio-links {
/*that’s the wrapper for the links which also defines the image height in relation to your text block*/
position: relative;
z-index: 1;
padding: 5vw 0;
}
.hoverFolio .hoverFolio-images img.hoverFolio-image {
/*that’s your image positioning*/
position: absolute;
object-fit: contain;
width: auto;
height: 100%;
top: 0;
left: 50%;
bottom: 0;
transform: translateX(-50%);
display: none;
}
Hover golio (gridder Content):
Paste into code-view of the gridder Element
<p class="hoverFolio-links">
<a class="hoverFolio-link" href="https://linktosomewhere.com">Lorem</a>,
<a class="hoverFolio-link" href="https://linktosomewhere.com">Ipsum</a>,
<a class="hoverFolio-link" href="https://linktosomewhere.com">Dolor</a>,
<a class="hoverFolio-link" href="https://linktosomewhere.com">Sit</a>,
<a class="hoverFolio-link" href="https://linktosomewhere.com">Amet</a>,
</p>
<div class="hoverFolio-images">
<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
</div>
}
@mariusjopen I just updated! but I don't think I see it in the "You are customizing" menu, in the image below. Could you please clarify where it is!
image url)
Hello!
I am trying to code it so when you hover over a Project Title in my top menu, an correlating image appears in the middle of the homepage. So when you hover over NanoTech 2018, the NanoTech 2018 image appears. And when you hover over The Planetary Society, the Planetary Society image appears etc etc.
I want this to only happen in the homepage as well.
Below is a reference code I was trying to use
https://stackoverflow.com/questions/42686679/display-image-when-hover-over-text
My url is https://www.susannasuh.info/ and I'm using Google Chrome as my browser.
The image I wanted to appear for NanoTech is:
https://www.susannasuh.info/wp-content/uploads/2019/12/CD4-Logo.gif
Thank you for any help you can give, very much appreciate it!!!
Hi, I was wondering if it would be possible to add a HTML Customizer option to Customize, where you are able to customize your Favicon, Menu Styles, Site Title, etc. There's already an option to customize CSS in customize.
The reason I ask is because when I customize HTML in the Custom CSS & HTML page under Lay Options, I often go back to the previous page while trying to search and highlight previous code without saving. So I've lost lots of coding and spent time recoding code I lost. It'd be really great to just have an option to customize HTML in Customize as well and would make things a lot smoother! Thanks so much for creating laytheme, it's been really great to use this to design.