A Few Questions
-
1) How do I decrease the size of the logo, and center it with CSS? When I put my logo in, it is way too big, and it is not centered.
2) How do I change the color of the footer with CSS?
3) How do I get rid of the “Category: ” and only have the actual name of the category showing. For example, on the “Markets” category, the page says “Category: Markets” but I would only like it to say “Markets.”
4) I want to add my social media icons to the footer. I want to center them below the text. How would I do this?
I apologize if this is too many questions to answer. I would really like to use this theme but need to customize it!
Thank you!The blog I need help with is: (visible only to logged in users)
-
Hi Alex,
Thanks for using the Vivaro theme! Most of these can be accomplished through Custom CSS.
1. Try this code:
body .site-title { font-size: 48px; padding-right: 0 !important; margin-right: 0 !important; border: none; } body .site-branding-text, body .site-title, body .site-description { display: block; text-align: center; }Feel free to adjust the font size from 48px by changing the number. The lower the number, the smaller the font size.
2. It appears you’ve already figured this one out? For reference, use the following Custom CSS:
body .site-footer { background: #000; color: #fff; }The above code will revert the theme to the original colors, although adjusting the values to any valid CSS color value will override the colors to whichever colors of your choosing.
“Background” controls the background color and “color” controls the text color. Use any CSS color value. There is a good guide on valid CSS color values seen here: https://www.quackit.com/css/css_color_codes.cfm
3. Unfortunately this is not possible in the current state of the theme. I’d have to update the HTML markup which would require approval from WordPress.com staff. I am willing to do it because it would make the theme more flexible and it’s a minor change that will likely be approved, just want to note it’s not entirely in my control. Please standby to see if we can do this.
4. Would you mind adding the Social Icons Widget to a footer widget area? Once it’s added, we can use Custom CSS to adjust the positioning.
I apologize if this is too many questions to answer. I would really like to use this theme but need to customize it!
No problem! Happy to help.
Regards,
Leland -
Hello! I really appreciate the help!
I’ve now added a social icons widget to the footer, which I hope can be centered!
Also, let me know if you are able to update the HTML markup to get rid of the “Category:” text from categories!
Thanks!
-
One more question — is there any way to hide the site title and logo from all pages other than the home page? For example, I would only want it to appear on the homepage, not on any other page. Is there a way to do this? Thanks!
-
To center the social icons:
.jetpack_widget_social_icons { text-align: center; }One more question — is there any way to hide the site title and logo from all pages other than the home page? For example, I would only want it to appear on the homepage, not on any other page. Is there a way to do this? Thanks!Yes, that’s possible. Can you clarify that you want to hide just the site title and logo image from every page? There’s also the site description at the top: “Building Financial Literacy. Creating Future Leaders.”
Should that be hidden everywhere besides the homepage as well?
-
Yes, both the logo and site description should be hidden everywhere besides the homepage!
Thank you!
-
Yes, both the logo and site description should be hidden everywhere besides the homepage!
Try this:
body:not(.home) .site-branding { display: none; } -
Also, would you mind removing the Custom CSS you used to center the logo image? It’s not really centered and is pushed way off the screen to the right on narrower screens. I can help properly center that as well but want to get rid of this first:
body .custom-logo { width: 36%; max-width: 40%; margin-left: 125%; } -
Once the code I referenced above is removed, please add the following to center the logo:
body .custom-logo-link { display: block; max-width: 183px; margin: 0 auto; } body .custom-logo { max-width: 100%; } -
-
Happy to help, Alex!
Also, I haven’t forgotten about the request to hide the “Category: ” text on blog posts. I’m still working on that and will keep you updated on the progress.
-
Awesome, really appreciate it!
One more thing (do not worry at all if you can’t fix it), but when you click on an author it says “Author: AUTHOR NAME” which is the same problem as the “Category: ”
I really appreciate your help with the site!
-
No problem! Always happy to help.
For the “Author: “ thing, similar deal as “Category: “ so stay tuned for that.
Let me know if you have any questions in the meantime.
-Leland
-
Just wanted to provide an update on the “Author: ” and “Category: ” issues.
Unfortunately, we’re going to have to keep these as-is. After investigating more in-depth, I realized altering the markup surrounding both of these text strings could potentially screw up translations of Vivaro in other languages. I realize this doesn’t affect your particular site because it’s in English, and I have to keep the entire user base in mind when deploying changes that would affect all sites using Vivaro.
Of course, if you have any other questions about Vivaro, feel free to ask and I’ll see what I can do to help.
Regards,
Leland -
- The topic ‘A Few Questions’ is closed to new replies.
Premium Theme Support 