Side panel image: more than 1 on rotation?

  • Resolved styzer

    (@styzer)


    11 months, 2 weeks ago

    Perfect theme for an author! A few things I’d like to customize:

    • I’d like to be able to add more than 1 image in the side panel (5?) and have them rotate (with the option of having “next/previous” subtle arrows?)
    • If this requires a gallery plugin, how would I embed it there, since it’s not a widget?
    • The vertical padding in mobile view (between header and hamburger menu, menu to content, etc) is a bit too much – how could I edit that without damaging the theme?
    • Finally, if I apply an update for the theme, will it break my site, resetting all the modifications I made?

    Thank you in advance!

    Andre

    • This topic was modified 11 months, 2 weeks ago by styzer.

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 25 total)
  • Theme Author Rough Pixels

    (@roughpixels)

    Greetings! First, I can definitely see this theme being ideal for authors.

    Regarding your customized ideas:

    (1) For the first one, it sounds like you want to have a carousel-type image setup or an image rotator. I’m thinking the only way to do this is to create a child theme, and then in that particular area, use the slider or gallery code. This would end up being global on all pages, though.

    (2) For the padding issue, there are a few elements (containers) that can be adjusted. They have paddings and margins. For example, you could copy and paste this CSS code to change the default styling:

    @media (max-width: 991px) {
.topnav-header {
    padding: 0 2rem;
    margin-bottom: 0;
}
#topnav {
    padding: 0 25px 0;
}
}

    Try that modified styles and see if that helps more. This code basically will use the padding and margins, shown, when viewing in mobile devices with a resolution under 991px width.

    Regarding updates, you should be fine whenever this theme gets an update. All your settings are kept. This also applies if you later decide to upgrade to the premium version too.

    The only time something would change is if you modify the theme files directly, or, if we were to make a change with an update–although, we try out very best not to do that. I have a couple of recommendations relating to this:

    1. Write down all the changes to the settings and keep it safe.
    2. Make website backups before you perform any kind of change, even WordPress and plugin updates. This is the preferred method.

    A note about the first item about the side column and having rotating images: This is something I can give some thought to. It’s an interesting concept and you’re the first to ask about this capability. One thing to note is that the premium one does have the option to specify a custom image for each page, post, and/or category.

    Best Regards,
    Andre

    Thread Starter styzer

    (@styzer)

    Thank you for the helpful reply! Sorry it’s been quite mad around here so I apologize for the delay.

    1- One more thing I need to be able to do is to make the sidecolumn responsive. The sidecolumn is set at 40%, I have an image filing that space. But on mobile, it’s spilling off screen.

    I tried various solutions but it’s not responding to any of the changes. Here is what I have finally and it’s not working.

    /MOBILE/

    @media (max-width: 991px) {
    .sidecolumn img {
    {
    height: auto;
    width:50% !important;
    }
    }
    .topnav-header {
    padding: 0 2rem;
    margin-bottom: 0;
    } topnav {

    padding: 0 25px 0;

    }
    }

    2- And I’m sharing a PDF on one of the pages. I’d like that page to NOT have a sidecolumn. How would I remove the sidecolumn ONLY for that page?

    Thanks again!

    • This reply was modified 10 months, 1 week ago by styzer.
    Theme Author Rough Pixels

    (@roughpixels)

    Well this was unfortunate; I just typed out a really long reply with example code the something happened to the forum here and lost it all, so I will try to replicated it–perhaps a shorter version.

    For the background image in your side column getting cut off, this is going to be a bit challenging because of your image using 4 images and text on it. But the only solution I can think of is that the background image will have to be contained instead of cover. Basically, this means that regardless of window size, the whole image will maintain its full view and aspect ratio.

    In your Customizer’s Additional CSS tab, add this:

    
@media (min-width: 1860px) {

.sidecolumn {
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

}

    For your hiding of the side column for a particular page, it won’t be perfect, but you can try this CSS code as well:

    .page-id-199 .sidecolumn {
	display: none;
}

@media (min-width: 992px) {
.page-id-199 .site-content, .page-id-199 .site-footer {
    margin-left: 0;
    /* overflow: hidden; */
    word-wrap: break-word;
}
}

    You will need to find your page/post’s ID number, either by looking at the page source code on the <body> tag or going to your pages or posts in the admin, hover over the title and look at the bottom of your browser window for the ID#. Append that to the class “page-id-” (if it’s a page) or for posts, the class would be “postid-“

    Best Regards,
    Andre

    Thread Starter styzer

    (@styzer)

    Brilliant, almost there!

    Here is what worked for mobile: max-width instead of min-width. And it’s not fitting well width wise. However there was a big padding at the bottom. So I tinkered around and this seems to work best. It shows well on my Galaxy S21.

    /MOBILE/

    @media (max-width: 860px) {

    .sidecolumn {
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: scroll;
    max-height: auto;
    }

    .sidecolumn-inner {
    display: flex;
min-height: 64vh !important;

}

    }

    Now the top menu seems a bit off center, and when I scroll down, the menu covers the text, as if it was half the width of the page, off-centered. Is there a way to make the menu occupy the total width of the page?

    Theme Author Rough Pixels

    (@roughpixels)

    Nice job figuring out what works for you with your modifications, including using vh.

    For the Menu. I noticed your menu has:

    #menu-main-menu {
    justify-content: left !important;
}

    I would recommend removing that and then your menu will stay centered.

    I’m not quite sure what you are referring to with the top menu being half width of the page and off-centered; this is why I suggest removing that code you did above with the justify-content: left;

    Thread Starter styzer

    (@styzer)

    Yes, good catch for the homepage, but the page without a sidecolumn, the top menu is off.

    https://understandingthefourfacesofthelivingcreatures.com/1/index.php/read-the-book/

    By using menu-main-menu I was able to at least pull it toward the center, but that’s a hack I wish wasn’t necessary. The menu is sticky, but it doesn’t cover the full width of the page. So when I scroll, I see the left image is clear while the others get covered by the menu.

    Theme Author Rough Pixels

    (@roughpixels)

    Ah, Try this

    @media (min-width: 992px){
.page-id-36 .sticky-nav .topnav {
   left: 0;
}
}
    Thread Starter styzer

    (@styzer)

    Almost! It is working for the pages without a sidecolumn. But then the page with one, the nav covers the top of the sidsecolumn image. I tried to adapt the code with a page-id but no luck.

    Theme Author Rough Pixels

    (@roughpixels)

    On my end, I see the navigation menu on the content side and centered. Here is a screenshot: https://www.screencast.com/t/Od0unwqZkvj

    If yours is over on the side column, it might need your browser or site cache to be cleared, perhaps?

    Thread Starter styzer

    (@styzer)

    Yes, same here. Except the page that I removed the sidecolumn, on that page it is not centered. Look at the screenshot below?

    https://gyazo.com/61b6edc2efd3bc6b0649f32bb70399aa

    Theme Author Rough Pixels

    (@roughpixels)

    I think I gave you incorrect code just earlier….should be this:

    @media (min-width: 992px){
.page-id-36.sticky-nav .topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
}
}

    Try that one.

    Side Note: If you don’t want the menu fixed in a position where content scrolls behind it, change this part to this code:

    position: relative;
    Thread Starter styzer

    (@styzer)

    OK, little by little! ??

    Now the menu is centered, but the page has shifted toward the right, as if there was a side column again.

    https://gyazo.com/c22f4505033acc86cefaf8dedeb672c0

    I bet you there’s only one simple little tweak left. ??

    Theme Author Rough Pixels

    (@roughpixels)

    @media (min-width: 992px){
.page-id-36 .site-content, .page-id-36 .site-footer {
    margin-left: 0;
}
}

    That should do it.

    Thread Starter styzer

    (@styzer)

    Yes!!! I can’t thank you enough for your patience and the solutions. ??

    Theme Author Rough Pixels

    (@roughpixels)

    Now that makes me happy to know things worked out for you ??

Viewing 15 replies - 1 through 15 (of 25 total)
  • The topic ‘Side panel image: more than 1 on rotation?’ is closed to new replies.

Tags