Border arround the preview pictures of the latest blog posts
-
Good morning Hallluke,
sure :D – it would be a pleasure for me. In next time it was not my plan to go to London but if anything change it would be really great – may we can stay in touch? If you want, you can give me your mobile number…? And if you want to visit black forest in germany, let me know :)
So.. ok i give you the example, fot what I’m looking for:
In the demo-version https://venturedemo.wordpress.com/, when you scroll down to the “Latest news” you have a hover-effect – the same as they have it on “Our recent work” I also need this hover-effect on my Blog-posts preview…
Thank you :)
-
Can you link me to a page on the demo theme which shows the blog posts page you’re talking about please. Do you mean: venturedemo.wordpress.com/blog?
That might be tricky as there is no text associated with the image, I’ve tried moving the continue reading link (where it exists) but I can’t find a good way of dealing with it that works if your post title is long enough to take up more than one line of text.
Here’s what I have so far but I haven’t tested it very thoroughly:
@media (min-width: 1200px) { body.blog .post { position: relative; } body.blog .post .more-link-container { position: absolute; top: 114px; } body.blog .post .more-link-container a { width: 750px; height: 319px; border: none; border-radius: unset; color: rgba(255,255,255,0); text-align: center; padding-top: 0; font-size: 1.25em; } body.blog .post .more-link-container a:hover { padding-top: 140px; background: rgba(0,0,0,0.7); visibility: visible; color: #fff; } } -
-
Which bit is the “blog posts preview”?
Sorry for being so confused but on the demo site it looks like all the images already have the overlay and/or hover effect – which exact section is missing it?
-
-
-
-
-
Hmmm, it’s there on the demo site so it should be there for you unless you’ve added some CSS to hide it. Without being able to see your site it’s tricky to offer much in the way of help.
Can you copy all the custom CSS you are using right now into a comment here between backticks (or using the code button so it formats like my code examples have done) and then I can apply it to the demo site and see if any of the rules are causing any conflicts.
-
/*
Willkommen bei Custom CSSWie es funktioniert, steht unter http://wp.me/PEmnE-Bt
*/
.primary-hentry-inner .entry-title {
display: none;
}.overlay {
display: none;
}#front-blog-items .slick-slide {
border: 5px solid #fff;
}.front-block a.prev-item:hover, .front-block a.next-item:hover {
color: #ffffff;
background-color: #115e67;
}.slick-prev, .slick-next {
color: #115e67;
border-color: #115e67;
}.slick-prev:hover, .slick-next:hover {
background-color: #ffffff;
color: #115e67;
border-color: #ffffff;
}#fullscreen-header .skip-to-entry::before {
color: #115e67;
} -
The line:
.overlay { display: none; }Turns off the translucent black overlay boxes off for all the sections of that page. It sounds like you want to keep them on the blog posts, do you want them removed only for the main slider and the portfolio section?
-
-
Replace that bit of code with the following to remove the overlays from just the main slider and featured pages:
.featured-content .overlay, .front-block-two .overlay { display: none; } -
-
-
-
Hi, according to the examples on this page of the demo site the following should work for the caption text colour and size:
.wp-caption-text { font-size: 24px; color: #f00; } -
-
Hi Hallluke
How are you? May you can help me?!!
It ist possible to get the arrow down into the slide show also in the whole site?Thank you-1!!
- The topic ‘Border arround the preview pictures of the latest blog posts’ is closed to new replies.
WordPress.com Forums 