Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 15, 2016 at 6:02 pm #87542
    Michaela
    Participant

    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

    March 16, 2016 at 10:22 am #87587
    Mahesh
    Participant

    @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

    March 16, 2016 at 2:19 pm #87599
    Michaela
    Participant

    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!

    March 16, 2016 at 3:48 pm #87605
    Mahesh
    Participant

    @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

    March 25, 2016 at 2:47 pm #88238
    Michaela
    Participant

    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!

    March 25, 2016 at 4:23 pm #88244
    Mahesh
    Participant

    @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
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Customize sidebar widget recent posts’ is closed to new replies.