Custom CSS

Hello Sophie,

I’m a very happy user by the way, your plugin was one of the only ones who could cope with custom post types & taxonomies, so thanks! You’ve done a great job.

I’m very happy for this. Thanks for your words!

Coming to your question, let’s say that every theme has its own properties, so to give a help I should take a look at your theme’s code. If your site is accessible, tell me the URL.

Anyway, you could try these steps by yourself:

1. Activate the option “Display this section before the title of the post” in “Displaying posts” > “The featured image of the post”. This will move the image before the title of the post.

2. In “Styles” > “Custom styles” paste the following lines:

.pis-title {
	margin-top: -130px;
	margin-left: 10px;
	margin-bottom: 100px !important;
}

.pis-title-link {
	color: #fff;
	font-size: 1.5em;
}

These lines are absolutely generic and should be checked against your current theme. Try playing with the values.

If you won’t resolve, I’ll need to take a look at your website.

Let me know, please.

Hello Sophie,
sorry for the late reply, but this requested me a lot of tests.

Follow these steps:

1.Remove the -5 pixel value in the “Title bottom margin” field located inside the “Styles” panel.

2. In the widget admin, go to the “Custom Styles” panel and remove the styles you currently have there.

3. Paste these lines instead:

.pis-li {
    list-style: none;
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 300px;
    height: 192px;
}
.pis-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
}
.pis-thumbnail::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-color: rgba(0, 0, 0, 0.5);
}
.pis-thumbnail-img.aligncenter {
    margin: 0;
}
.pis-title {
    font-family: Karla;
    text-transform: uppercase !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 120%;
    position: absolute;
    top: 40%;
    margin: 0 10px;
}

@media screen and (max-width: 1199px) {
    .pis-li {
        height: 147px;
    }
    .pis-title {
        top: 40%;
    }
}

@media screen and (max-width: 320px) {
    .pis-li {
        height: 145px;
    }
}

@media screen and (max-width: 299px) {
    .pis-title {
        top: 10px;
    }
}

.pis-title-link {
    color: #fff;
}

4. Save the widget and test the results.

Probably this is not the best solution to accomplish the wanted result, but it’s better than nothing.

Let me know, please.

Hello @sophierose,
during these days I tried visiting your site, but it returns a 404 error, i.e. forbidden access. Please, let me know when it will be online again.

Hi @sophierose,
sorry for the delay – I’m working hard in these days, but I do not forget my lovely users.

something strange just happened, I edited the code you gave me, prefixing every style with the id selector for that widget ” #pis_posts_in_sidebar-6″ and then the display changed to show

I think that you’re currently using a page builder of something similar. This builder removes some standard HTML elements, such as <section id=...>. For this reason, you cannot use #pis_posts_in_sidebar-6 because this ID is not present in the code.

In the next version, the plugin will have the ID even in a lower element, so that page builders won’t delete this important element.

it sorted out the issue of the thumbnails not aligning, but I wanted the thumbnails circular and smaller, so I added in the height, width and border radius that I sent in my first message and it’s cropping off all the tops of my images off

In the page https://pmu.bigonmedia.co.uk/guides-advice/ I tried this code:

.pis-li {
    overflow:hidden;
}

.pis-thumbnail {
    overflow: hidden;
    float: left;
    margin-bottom: 0;
}

.pis-thumbnail-img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

.pis-title {
    height: 100px;
    margin-top: 10px;
    margin-bottom: 7px !important;
    line-height: 1.6em;
    display: flex;
    align-items: center;
}

Change the value of 100px either in .pis-thumbnail-img and in .pis-title, if needed.

Let me know.