Need help? Check out our Support site, then


Adelle sidebar widget titles

  1. I'm changing the look of my blog completely and going to change to the adelle theme w/upgrade in a few days from the forever theme. I'm creating custom sidebar widget titles ("Top posts, archives, Follow Me, etc") to match a custom header.

    What should the dimensions be for the widget sidebar titles? I'm also creating small icons for social media, what should the dimensions be for that? For the custom header, I know the width is 1020, any idea what the height should be?

    Thanks!

    The blog I need help with is myasmusingsblog.wordpress.com.

  2. thesacredpath
    Staff

    Hi, Adelle is a responsive width theme and the sidebar width is a percentage value, which means the width of the sidebar changes as the browser window is narrowed. The full-width area you have to work with for a title graphic would be about 260px. With the following solution, the image would resize as the browser window was narrowed, or if viewed on narrower devices.

    Create your images, upload them to the media library, get the URLs of those images and then replace URL OF IMAGE between the double quote marks with that URL. You will have to create a rule similar to the below for each widget you put into the sidebar. The widget class ID can be found by doing a "view source" from your browser window and looking in the div with the #secondary ID. You would add your code at Appearance > Custom Design > CSS tab. Delete the informational text.

    Example code:

    #archives-3 .widget-title {
        background: url("URL OF IMAGE") no-repeat scroll center top / contain transparent;
        height: 50px;
    }
  3. Ok, that helps a little...so I will use the graphic title width as 260 and should the height of the graphic be 50px?

    My current social media icon dimensions are 72x72. I want the icons to be smaller so I can fit all of them in one row on the sidebar. Do I just guess what size I should use for this? Or is there a specific size I can use so they all fit?

    For the custom header, what would be an appropriate height with the 1020 width? Again, do I just guess something like 200 and hope it looks alright? I'm very new to this...sorry for the million questions!

  4. You can make the height for the graphic whatever you need. Just adjust the height in the CSS to match your graphic height.

    On the header image, Adelle has a flexible header image height, so you can make it whatever height you need. The suggested height (shown at Appearance > Header) is 250px. If you use a height other than that, when you upload the image, just click the "use as is" button to skip cropping and it will adjust for your header height.

  5. Thank you so much! This is extremely helpful!!

  6. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic