[Michaela]

Hi,
I’d like our recent posts sidebar widget content to look like this one:
https://www.dropbox.com/s/gd6f76j0jegfvf3/new%20sidebar%20design.jpg?dl=0
Meaning, the feature image should be the background, and the title should be shown on top of a gray overlay. How do I achieve this with CSS?
Thanks a lot for your help,
Michaela

[Mahesh]

@micha: This is not possible with Custom CSS. You’ll need to create a Custom Widget area. I recommend you to hire a customizer.

Regards,
Mahesh

[Michaela]

Okay. Then please just let me know how I remove the thin gray border around the images that appear in the sidebar in this widget, and also how to remove the border from all the images that show up under http://www.travelintense.com/publications and http://www.travelintense.com/travel-equipment. Thanks a lot!

[Mahesh]

@micha: Go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box and add the following CSS:

.widget img.rpwe-thumb {
    border: none !important;
}

.post-22.page #gallery-2 img, 
.post-26.page #gallery-2 img,
.post-26.page #gallery-4 img {
    border: none;
}

Regards,
Mahesh

[Michaela]

Thanks Mahesh. Though I have two questions to fully understand the code:
1. How do you know whether you have to use gallery-2 or -4? I realized that for every page where I want to make this change I have to use gallery-2 when there is only one WP gallery included, but why? Why is it no simply “gallery” or “gallery-1” when there is only one gallery?
2. Because I have more pages where I want to show the thumbnails without a border than pages where I want to show them with borders, is there a general code that would first remove the thumbnail border from all pages, and then add it to selected ones (page 26)?
E.g.

.post.page #gallery img {border: none;}
.post-26.page #gallery-2 img, .post-26.page #gallery-4 img {border: 1pt solid #3c3c3c;}

Thanks!

[Mahesh]

@micha:
1. The Id #gallery-(some numbers) is automatically generated by WordPress. The number starts with 1 and increases with each gallery created on that page. If you create another page and create a new gallery there, then it again starts with 1. I traced it out with firebug.

2. By default, there is not border in image in gallery, so you can specify border for image in gallery for certain page only like you’ve mentioned above with Id(#)- Specific or with class(.) General. For example
Say if you have two galleries(#gallery-1 and #gallery-2) in page with post-26:
Then with Id it can be done as follows:

.post-26.page #gallery-1 img, .post-26.page #gallery-2 img {
    border: 2px solid #3c3c3c;
}

or it can be done with class as follows:

.post-26.page .gallery img {
    border: 2px solid #3c3c3c;
}

Note: If you have more galleries (say #gallery-3, #gallery-5, ……. #gallery-n) in the same page, the above code will put border in gallery-1 and gallery-2 only. Whereas the below code (one with class) will put border in entire gallery on that page.

Hope this clarifies you.

Regards,
Mahesh

[Author]

Posts