Bottom Align Images

Hi @kwsapphire,
Hope you are doing well. Maybe this CSS code helps you. Go to Dashboard> Appearance > CUstomize > Additional CSS > THen Put this code.
.textwidget.custom-html-widget {
width: 864px;
}
Thank you.

• This reply was modified 3 years, 8 months ago by Nadia Akther.

Hello @nadiaakther, and thank you for the suggestion. Unfortunately it seems to have no effect on the page at all. :\

I tried the updated code you provided as well, but it’s not doing anything. There may be a conflict, since I have already specified the width of the header widget. I don’t think adjusting the width down further will accomplish what I need it to. I’m looking for something that functions like the VALIGN attribute from html for the social media images.

• This reply was modified 3 years, 8 months ago by kwsapphire.

I’m wondering if there’s a down side to just adding my current code to an html table and using VALIGN to get the desired effect. I love tables, dunno why they get so much hate. I know tables are supposed to be for displaying data, not organizing design elements… but there are several things that are apparently only possible if you use tables for your design elements. ??

I’m trying to avoid creating a second set of images because then that would be more work every time I tweak the navigation widgets. The header and footer would have to use different code for all the social media links, meaning the kinds of adjustments I’ve been doing over the last two days get even more painful. I just wanna avoid having to manage two sets of images and two sets of code if I can. I just don’t understand why there isn’t a simple way to tell the page to align the images on the bottom of the line they’re in.

• This reply was modified 3 years, 8 months ago by kwsapphire.

Hi, I’m the author of Twenty8teen. It seems you have gone to extremes to overcome the unresponsive way you are attempting to build your header.

There may be a conflict, since I have already specified the width of the header widget. I don’t think adjusting the width down further will accomplish what I need it to.

You are correct that adding another explicit width is not going to help. I suggest you remove the first width you added, and use the styling that the theme provides to make it responsive.

Another user asked me how to do a similar thing of putting images in menus. Are aware that menus allow HTML? You can create a normal WP menu and put the image HTML in for “title”. That allows you to use menu widgets or assign that menu to the theme’s menu location, which in the case of Twenty8teen means you can put the menu wherever you want since it’s a widget. And there are two menu locations in the theme. You can also copy one to your child theme and make a new one if you want. By doing this, you let the theme’s styles handle the responsiveness, so you don’t need another theme for mobile.

I’m wondering if there’s a down side to just adding my current code to an html table and using VALIGN to get the desired effect. I love tables, dunno why they get so much hate.

Yes, there is a down side to using tables. They are very difficult to style in combination with other HTML and they are not responsive (no good way to show a wide table on a phone). Tables mostly ignore width CSS, but that is what is used for everything else.

I want to BOTTOM-align the Social Media icons in the header, so they rest on the sparkly line.

Bottom alignment has no meaning in this context, but it suggests a way to do it. You have to have a container for the elements that are to be at the bottom of it. The way that Twenty8teen arranges widgets is by using display: inline-block. They are styled with vertical-align: top, but that can be changed for individual widgets with custom CSS. Instead of using one Custom HTML widget, use logo widget, site title widget, image widgets, menu widgets. Each one can be styled independently (you can choose alignment and built-in styles). If you add your own class names to the theme’s Advanced > User Classes option, the class will be in the style selection for each widget (and in the editor under Formats).

When I looked at your page, I noticed that there isn’t any content on the home page. Most people will bounce and not look any further. Also, you have a theme and two plugins that are loading the same font from Google, but the requests are different, so it will load 3 times, slowing your site down.

Hello Joy! I’m so happy you’ve stumbled over my request for help! I thought about starting a topic in the twenty8teen-specific forum, but I was afraid I might pepper you with too many questions if I did!!

1. I specified the width of the header because it was wider than the footer. So my navigation and social media icons extended past the left and right ends of the divider bar in the header, but didn’t do so in the footer. So I was just trying to get the header and footer to look the same. Is there something else I can do to accomplish this?

2. I had NO IDEA that menus allow HTML! OKAY! I just looked it up, that’s great! The plugin sounds easier, but it’s untested with current WP (like many plugins I want to use..) and I don’t want to rely on plugins not breaking if I don’t have to. The CSS code doesn’t seem too difficult actually, I think I can do this. YAY! THANK YOU!

3. Is it possible to force multiple widgets onto the same line? This is why I’ve jammed everything into a single widget for each the header and footer.. every time I added another widget, it was placed on the next line down. I looked all over the place for code that would force them onto the same line. Keep in mind I know HTML very well, but have to steal most of my CSS. So I’ve tried a bunch of floats and other snippets of code, but none worked. It may be that I just never found the right …. I don’t even know what it’s called. “site part” to call out, maybe.

4. When you say there’s no content on my front page.. does that mean it’s blank for you? There should be a “Hello and welcome!” paragraph, with links to swap to a mobile theme (which I will happily remove if I can otherwise get the site working properly on mobile), a glowing moon logo, and a random quote. Please tell me this shows up for you? I’m not sure what other content to put on the front page, since I’ve no way of knowing if someone’s coming to my site to learn about me, or my ferrets, or see my MTG decks, or what. So I tried to make it a friendly landing page, and then make the links easy to follow.

5. Other random question: is there a difference between using the “Additional CSS” field in the customization menu, versus putting my custom CSS in the style.css file and uploading it via FTP? The customization menu is easy to get to, but I’ve got so much custom text in there it’s starting to fill up and get harder to scroll through. I think I’d like to move it to notepad where I can see and edit it more easily, if it makes no difference…

Thank you again for your help, I VERY MUCH appreciate it!! ??

• This reply was modified 3 years, 8 months ago by kwsapphire.

I’m trying to replace the menu text with icons as you indicated, but running into some trouble.
– How do I remove the text links so only my icons show?
– How do I make the icons ACTUAL LINKS instead of just a background image?
– How do I remove the dark gray background/box effect behind the menu?
– How do I get the menu to be taller so the whole icon shows? & RELATED:
– How can I resize my icons on the fly? (They’re all 75px tall, but I’ve been shrinking them to 50px with HTML, can I do the same here?)

I manage to add height and width tags to my icon class definitions, which forces the bar to be tall enough to show the whole icon, but I’m not seeing how to resize the icon. I hope I don’t have to physically resize them all and upload them again.

Still can’t get rid of the link text and box background.

Here’s the code I found.. because it uses a background attribute, it looks like I can’t resize the image this way, nor can I make it a link. So I’m not sure how to make this work as my actual menu.

.kellyicon {
background-image: url(‘https://coloden.com/wp-content/uploads/2021/03/navi-kelly.png’);
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
height: 75px;
width: 75px;
}

Thanks again for your help!

• This reply was modified 3 years, 8 months ago by kwsapphire.
• This reply was modified 3 years, 8 months ago by kwsapphire.
• This reply was modified 3 years, 8 months ago by kwsapphire.

1. I specified the width of the header because it was wider than the footer.

Specifying explicit widths is what makes a layout unresponsive, causing scrollbars on smaller windows. Don’t do this and you won’t need a different theme for mobile.

Is there something else I can do to accomplish this?

As I said before, you should use the supplied widgets such as logo, image, menu, etc.
If there are smaller pieces, they conform to the window size much easier.

3. Is it possible to force multiple widgets onto the same line?

Yes, but in Twenty8teen it’s different for the header and content than sidebar and footer. The widget class is only added to sidebar and footer widgets, and that is styled as display: inline-block, so those will share the space easily. For header, you could add CSS like
#masthead .widget_template_part {display: inline-block} but that will only affect the widgets from the theme. That’s why I added controls to each widget so you can choose the alignment. If you put left alignment on several in a row, it’s similar to inline-block. Be sure to put clear on what follows.

4. When you say there’s no content on my front page.. does that mean it’s blank for you?

Not blank, but nothing worth having on a home page. You have the same links at least three times (two of which are in an illegible font), but nothing about who you are or why the site is named the way it is or anything interesting. It’s as if there is no content.

5. Other random question: is there a difference between using the “Additional CSS” field in the customization menu, versus putting my custom CSS in the style.css file and uploading it via FTP?

Yes. The Additional CSS is the last CSS to be output, and because of that and the Customizer interface, it is easier to use and easier to see your changes immediately in the preview. The same rules put into your child style.css might not work as you expect because of the order the CSS is loaded.
You should put the basic changes into style.css, but things you might want to change on the fly keep in Additional CSS.

Thanks again for your help! I am changing my approach for a few things so I can hopefully take advantage of what you’ve shared.
– I redid all my navigation and social icons so they’re sized the way I want them shown on the site, and won’t have to use special code to resize them.
– I removed the text from the icons, and will maintain the text from the menu itself

I’d still like to be able to remove the dark gray/black box/background/border from the menu, so only my icons and the link text are showing. Is there a way to do this?

I don’t want any text showing on the social media block, just the icons as links. Not sure how to accomplish this given that the CSS uses the icons as a background image instead of a clickable image that could be made into a link. is there a way to do this? Or does it have to be a background image only?

I’m also having all kinds of alignment issues trying to get this to work, but I’m hoping I can get it figured out if I bang my head against it enough.

• This reply was modified 3 years, 8 months ago by kwsapphire.

Here’s as far as I’ve been able to get. I would really appreciate it if anyone is able to guide me over the finish line. ^_^

Screen shot:
https://coloden.com/storage/SiteProgress.png

The theme does style menus with a gradient, so if you don’t want that, you’ll have to override it.
The text on the social links is put there by you. You could instead put the image in the menu instead of in CSS that you have separate. Be sure to put alt text, for accessibility (and those of us that have no idea what those icons are).
You can use a separator part to help with alignment, even if it’s just for applying clear.

The theme does style menus with a gradient, so if you don’t want that, you’ll have to override it.

Please can you tell me how I do this? I am sorry for being so ignorant. Do I need to recreate part of the theme’s style sheet in my child style sheet, and then delete some part of it, or something? Or is there custom css code I can add to do this?

The text on the social links is put there by you. You could instead put the image in the menu instead of in CSS that you have separate. Be sure to put alt text, for accessibility (and those of us that have no idea what those icons are).

Oh ho! I didn’t realize I could use full-on HTML tags as the navigation label. I was so over-thinking it! *facepalm*

Still to Fix:
– Remove gradient background from menu
– Vertically center menu widget relative to logo widget
– Reduce padding/margin/extra space around navigation labels

And thank you again!

• This reply was modified 3 years, 8 months ago by kwsapphire.
• This reply was modified 3 years, 8 months ago by kwsapphire.

HUZZA! I figured out how to hide the gradient background, and remove the shadow box on link hover, and remove the padding on menu items.

I am so close! I want to figure out how to tell the header widgets to use the whole width of the page (up to the max I have specified). Right now, if I right-align the social media menu, it doesn’t actually move the whole menu to the right side of the page.. it just right-aligns the icons in a double-row, without moving the widget at all. I want to physically move the widget to the right side of the page.

I’ll keep banging my head against it until I figure it out.

Thanks for all of your help!

• This reply was modified 3 years, 8 months ago by kwsapphire.
• This reply was modified 3 years, 8 months ago by kwsapphire.
• This reply was modified 3 years, 8 months ago by kwsapphire.
• This reply was modified 3 years, 8 months ago by kwsapphire.
• This reply was modified 3 years, 8 months ago by kwsapphire.
• This reply was modified 3 years, 8 months ago by kwsapphire.

Each widget has controls for styles, like full width, that you can choose.
The right and left alignments use float, which is affected by the order. Usually you would put the thing being floated first, or its top will be at the bottom of the unfloated thing.

The hover effect gives some feedback that is helpful, and it seems like it would look good for your design. Remember that mobile devices are used by fat fingers, so removing the padding on the menu might not be a good thing. Also, people with impaired motor skills need bigger targets.

• This reply was modified 3 years, 8 months ago by Joy. Reason: left out a word

I feel like I must be missing something obvious, but using the “full width” attribute doesn’t fix anything.

If I do this:
Navigation Menu = Full Width, Align Left
Logo = Full width, Align Center
Social Menu = Full Width, Align Right

It still has all 3 widgets right next to each other on the left side of the page, no space between. The social widget doesn’t move itself over to the right side of the header.

What I’ve done to get the look I want, at the moment, is to put the spacer widget between the menus and the logo. It works well enough for desktop. It doesn’t look GREAT on mobile, (the spacers make the alignment look weird) but I don’t see a way around it at the moment. And it’s far better than what I had been doing, so it’s progress, at least! ^_^

I took your other advice as well. While I don’t want to move any of my actual content to the front page, I did add thumbmail images that provide a little more info about each topic, to hopefully direct visitors to the right page. But ultimately if people see the home page and then bounce, it means they weren’t actually interested in any of my content anyway. *shrug*

Thanks again for all of your help, Joy! You are amazing!!

Your site looks so much better than before!

I’m fixing a couple things that you brought to my attention. The theme already has CSS for the width-* classes to adjust to the window size in the content area, but not other areas. Do you think it is needed, like in the header? You used full width when you wanted thirds, but should the thirds expand to full on smaller windows? I think so, but it’s trickier because each widget can be set individually, whereas the content area is more uniform. But it seems tied into using left and right alignment, because those have a max-width so that words can wrap around. I’d like the header to be easier to use, but there are trade-offs.

I already fixed the duplicate IDs on menus, which cause the mobile menu to misbehave.

Unrelated to my fixes, I was wondering if you could leave a review of the theme, please? I haven’t gotten much feedback.