Help with Zuki Theme CSS

cinebeats · Member · Mar 18, 2021 at 9:12 pm
Copy link

Add topic to favorites
I have a few questions about customizing the Zuki theme using CSS & I hope someone might be able to help me. I’ve been struggling with a few changes I want to make to @ astromagicklounge.com. I hope this is the right forum to post in. If not, please let me know & I’ll repost on the official Zuki board.

1. Is there any way to center the top menu bar directly above the logo?

2. Is it possible to get the black line (it was originally gray) under the logo to appear on every page & post?

3. Is there a way to change the color of the footer widgets across the entire site?

Many thanks in advance!

The blog I need help with is: (visible only to logged in users)
therefoiam · Member · Mar 19, 2021 at 11:56 am
Copy link
Hi there,

Happy to help, let me know if t works or doesn’t so that we try other fixes.

1. Is there any way to center the top menu bar directly above the logo?
```
@media screen and (min-width: 1260px)
#header-top-nav {
    padding: 0;
    text-align: left;
}
```
2. Is it possible to get the black line (it was originally gray) under the logo to appear on every page & post?

No. It’s there because of the featured slider so since that only appears on the home page. it cannot be moved to the other pages unless you change the theme source code.

3. Is there a way to change the color of the footer widgets across the entire site?

.jetpack_widget_social_icons svg{
color: green; /* you can choose your own color */
}

I have also tagged this for staff maybe the black bar can be copied to the other pages, with their assistance.
staff-mckluskey · Staff · Mar 19, 2021 at 12:04 pm
Copy link
Hi there!

There’s no need for you to post to the forums in general. With your plan, you can access Live Chat directly via https://wordpress.com/help/contact. That way, you can get help faster.

As for your questions:

Is there any way to center the top menu bar directly above the logo?

This piece of code should help:
```
/*Center top navigation*/
#header-top-nav {
    text-align: center;
    width: 100%;
    float: right;
}
```
Is it possible to get the black line (it was originally gray) under the logo to appear on every page & post?

It’s not possible to add elements with CSS only so, I’m afraid we can’t help with that.

Is there a way to change the color of the footer widgets across the entire site?

Could you specify what exactly you would like to change? The background color? The social icons?
Once we know more details, we’ll be able to advise better.
Remember that you can reach out via chat directly.
cinebeats · Member · Mar 20, 2021 at 12:38 am
Copy link
Unfortunately, the changes suggested didn’t work but I will reach out to live chat if I need more help. Thank you!
supernovia · Staff · Mar 20, 2021 at 5:24 am
Copy link
I just took a look: since the line isn’t an element but a border on your slider, one thing you could do is remove the big black border from the slider like so, and put it below your header instead:
```
.flexslider .rp-big-one-content {
    border-top: none;
}

#masthead {
    border-bottom: 5px solid #000;
}
```
For the icons at the top, they’re floating right. You’ll need to clear that and set width for the navigation:
```
@media screen and (min-width: 1260px) {
nav#header-top-nav {
    float: none;
    width: auto;
    text-align: center;
 }
}
```
Moving stuff around on the page can get a bit delicate though depending on the screen size and what not, which is why I specified a screen size above. These questions are a bit borderline tricky, so you’ll want to know the scope of what we can support:
https://wordpress.com/support/custom-design/css-support/

If you need more CSS help and want to know how to tinker on your own, we’ve got a great guide here… this is the exact method I used to figure out the code above.:
https://wordpress.com/support/custom-design/how-to-find-your-themes-css/

Or, if you need to hire a developer, we currently recommend this resource.

Hoping this helps a bit!

No items found.