Title: Custom CSS
Last modified: June 15, 2017

---

# Custom CSS

 *  Resolved [sophierose](https://wordpress.org/support/users/sophierose/)
 * (@sophierose)
 * [8 years, 12 months ago](https://wordpress.org/support/topic/custom-css-180/)
 * Hello,
 * I’m trying to style this plugin, 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.
 * Here is my aim – [https://www.awesomescreenshot.com/image/2585434/b0cf133709cdd0f9f7630f2883f630b1](https://www.awesomescreenshot.com/image/2585434/b0cf133709cdd0f9f7630f2883f630b1)
   
   so I would need an overlay – font change, and move the title on top of the image.
 * I know how to do the font change, I’m just not sure how to do the overlay and
   teh best way to move the title on top of the image?
 * Thanks for the help, much appreciated!
 * Sophie
    [https://pmu.bigonmedia.co.uk/guides-advice/pmu-training/](https://pmu.bigonmedia.co.uk/guides-advice/pmu-training/)

Viewing 11 replies - 1 through 11 (of 11 total)

 *  Plugin Author [Aldo Latino](https://wordpress.org/support/users/aldolat/)
 * (@aldolat)
 * [8 years, 12 months ago](https://wordpress.org/support/topic/custom-css-180/#post-9230717)
 * 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.
 *  Thread Starter [sophierose](https://wordpress.org/support/users/sophierose/)
 * (@sophierose)
 * [8 years, 12 months ago](https://wordpress.org/support/topic/custom-css-180/#post-9230953)
 * Hi Aldo,
 * Many thanks for your quick reply –
 * That worked! But is it possible to add a dark overlay over the top so I can see
   the font?
    You can inspect here [https://pmu.bigonmedia.co.uk/guides-advice/pmu-training/](https://pmu.bigonmedia.co.uk/guides-advice/pmu-training/)
 * Many thanks,
 * Sophie
    -  This reply was modified 8 years, 12 months ago by [sophierose](https://wordpress.org/support/users/sophierose/).
 *  Plugin Author [Aldo Latino](https://wordpress.org/support/users/aldolat/)
 * (@aldolat)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/custom-css-180/#post-9236743)
 * 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.
 *  Plugin Author [Aldo Latino](https://wordpress.org/support/users/aldolat/)
 * (@aldolat)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/custom-css-180/#post-9525639)
 * Marking this thread as resolved. Please, feel free to reopen it.
 *  Thread Starter [sophierose](https://wordpress.org/support/users/sophierose/)
 * (@sophierose)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/custom-css-180/#post-9553852)
 * Hi [@aldolat](https://wordpress.org/support/users/aldolat/)
 * Thanks so much for this is worked perfectly, I’ve been super busy and this got
   completely lost in my inbox.
 * I’ve picked the project back up and now am also trying to sort out this on –
 * [https://www.awesomescreenshot.com/image/2863448/b5a8d2e37e31eddcd82ea0b08b7e9a72](https://www.awesomescreenshot.com/image/2863448/b5a8d2e37e31eddcd82ea0b08b7e9a72)
 * I’m trying to do a left aligned thumbnail, and vertically middle aligned title,
   but I think something’s going wrong with the padding, casuing there not to be
   enough room for the image thumbnail. And the title to be aligned to the top vertically.
 * I’m sure you’ll know instantly. I’ve had a good play around with the margins 
   with no luck.
 * I’m currently using:
    .pis-thumbnail-img { padding: 3px; border-radius: 50%; 
   width: 60px; height: 60px; }
 * You can see it here – [https://pmu.bigonmedia.co.uk/guides-advice/](https://pmu.bigonmedia.co.uk/guides-advice/)
 * Thanks so much,
 * Sophie
 *  Plugin Author [Aldo Latino](https://wordpress.org/support/users/aldolat/)
 * (@aldolat)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/custom-css-180/#post-9556461)
 * Hello [@sophierose](https://wordpress.org/support/users/sophierose/),
    this CSS
   should do the work:
 *     ```
       .pis-li {
           overflow:hidden;
       }
   
       .pis-thumbnail {
           overflow: hidden;
           float: left;
           margin-bottom: 0;
       }
   
       .pis-title {
           height: 54px;
           margin-top: 10px;
           margin-bottom: 7px !important;
           line-height: 1.6em;
           display: flex;
           align-items: center;
       }
       ```
   
 * Let me know.
 *  Thread Starter [sophierose](https://wordpress.org/support/users/sophierose/)
 * (@sophierose)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/custom-css-180/#post-9557462)
 * Hi,
 * Thanks so much for this, 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. See: [https://www.awesomescreenshot.com/image/2866866/8e4cf8dad9954913686fbb5f3ddfc24d](https://www.awesomescreenshot.com/image/2866866/8e4cf8dad9954913686fbb5f3ddfc24d)
 * Also my bottom image is always getting cut off, I tried changing the image as
   I thought it may have been the orientation, but it did it to any thumbnail at
   the bottom.
 * Thanks in advance,
 * Sophie
 *  Thread Starter [sophierose](https://wordpress.org/support/users/sophierose/)
 * (@sophierose)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/custom-css-180/#post-9557478)
 * Hey [@aldolat](https://wordpress.org/support/users/aldolat/),
 * 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 the display changed to show –
    [https://www.awesomescreenshot.com/image/2866884/aff1a1d40b9c34fd2a4a25b69cca93bb](https://www.awesomescreenshot.com/image/2866884/aff1a1d40b9c34fd2a4a25b69cca93bb)
 * So it’s now ignoring the border radius and size, and also the alignments gone
   out.
 * Here is the css I have in currently –
 * #pis_posts_in_sidebar-6 .pis-li {
    overflow:hidden; }
 * #pis_posts_in_sidebar-6 .pis-thumbnail {
    overflow: hidden; float: left; margin-
   bottom: 0; border-radius: 50%; width: 60px; height: 60px; }
 * #pis_posts_in_sidebar-6 .pis-title {
    height: 54px; margin-top: 10px; margin-
   bottom: 7px !important; line-height: 1.6em; display: flex; align-items: center;}
 * Huge thanks!
 *  Plugin Author [Aldo Latino](https://wordpress.org/support/users/aldolat/)
 * (@aldolat)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/custom-css-180/#post-9566600)
 * Hello [@sophierose](https://wordpress.org/support/users/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.
 *  Thread Starter [sophierose](https://wordpress.org/support/users/sophierose/)
 * (@sophierose)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/custom-css-180/#post-9575272)
 * Hi [@aldolat](https://wordpress.org/support/users/aldolat/),
 * Whoops, don’t know what happened there, but it is now fixed!
 * Sorry for the delay.
 * Sophie
 *  Plugin Author [Aldo Latino](https://wordpress.org/support/users/aldolat/)
 * (@aldolat)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/custom-css-180/#post-9581806)
 * Hi [@sophierose](https://wordpress.org/support/users/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/](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.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Custom CSS’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/posts-in-sidebar_aed6f1.svg)
 * [Posts in Sidebar](https://wordpress.org/plugins/posts-in-sidebar/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/posts-in-sidebar/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/posts-in-sidebar/)
 * [Active Topics](https://wordpress.org/support/plugin/posts-in-sidebar/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/posts-in-sidebar/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/posts-in-sidebar/reviews/)

 * 11 replies
 * 2 participants
 * Last reply from: [Aldo Latino](https://wordpress.org/support/users/aldolat/)
 * Last activity: [8 years, 8 months ago](https://wordpress.org/support/topic/custom-css-180/#post-9581806)
 * Status: resolved