kwsapphire

Thank you for the custom CSS for the font size, it worked like a charm! I put it in my additional CSS section, so it won’t get over-written with updates. I will just wait for your update rather than fiddle with the space between the title and the quote. Thanks again for your help!

Thank you, I will poke around and look for that. The parent theme I’m using is Twenty Eighteen. The styles settings do appear for all widgets, I guess they just don’t always do anything.

To expand on what @havlist said, if you want to port your Quotes Collection over to Quotes Llama:
1. Go to Quotes Collection – Export, and export your quotes as a file.
2. Open in a text editor.
3. Change all instances of “author” to “first_name” and “tags” to “category”
4. Save changes to the file
5. Plugins, Quotes Llama, click the Manage link, go to the Manage tab
6. Use the Import/Restore area to import the file you saved

Thank you Srini! This is a great plugin, and I am glad to hear its removal is only temporary.

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!!

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.

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.

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

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.

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.

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 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.

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 was on version 2.3.68, as I had not renewed my paid status in some time.

I have renewed and updated to version 2.5.59, and the issues now appear to be resolved.

Thank you for your help!

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

Got it. Thank you so much for your help, I really appreciate it! ^_^