CSS Zuki Theme Lines, Form, Buttons

wpcomsites · Member · Feb 11, 2021 at 4:30 pm
Copy link

Add topic to favorites
Hello!

I’m building a site using Zuki theme and need your help with some CSS I could not find on the forums.

Please refer to this screen shot for better understanding of the points below…

https://innerpraxisorg.wordpress.com/shots/

1) Refers to the “top site lines” (horizontal and vertical) and to the “search icon” color on the top right corner of the site https://innerpraxisorg.wordpress.com/

2) It’s in reference to the “Form Block” for the site… https://innerpraxisorg.wordpress.com/landing/

3) About the “Button Block” for the site … https://innerpraxisorg.wordpress.com/perfil/

Many thanks for your help!!!
RR

The blog I need help with is: (visible only to logged in users)
supernovia · Staff · Feb 11, 2021 at 8:24 pm
Copy link
Hey there RR, I’m not seeing exactly what you’ve shared here so I’m guessing a few things have changed since you posted this.

Have you tried using inspect element? That should help you generate the correct CSS for all of these changes and give you a lot more freedom going forward, too. We have a video and tutorial here.
https://wordpress.com/support/custom-design/how-to-find-your-themes-css/

Normally we’d just use Inspect Element to figure this out and give a snippet but with a list like this, I think you’ll find this more useful. Would you be willing to give it a shot? Then if you’re still stuck on any of these, let us know which items you weren’t able to get.
supernovia · Staff · Feb 11, 2021 at 8:31 pm
Copy link
I will say too, I did notice one item you didn’t mention but will likely want to change, and this one is a bit trickier because it uses “:after” — so that might look like this. Do let us know which items you’re still struggling with if you need help.
```
#mobile-menu-toggle:after {
    color: #d5b9df;
}
```
wpcomsites · Member · Feb 11, 2021 at 11:40 pm
Copy link
Hello @supernovia

Thanks so much. I managed to learn something about Inspect Element and managed to fix 9 issues out of 10!

One thing I could not find in the inspect element is the icon of the search toggle (top right corner of the site)… I need to change the ICON COLOR… (not the background of the icon)

Thanks for your help
RR
staff-totoro · Staff · Feb 12, 2021 at 1:06 am
Copy link
You can target that with the following CSS:
```
.search-box a#search-toggle:after{
    color: #fff;
    font-weight: bold;
}
```
Hope that helps. Please let us know if you have any more questions.
wpcomsites · Member · Feb 12, 2021 at 2:36 pm
Copy link
Thank you so much staff-totoro… perfect…

Just one more quick question… about the “Media & Text Block”…
Link: https://innerpraxisorg.wordpress.com/ralf-russi/

I managed to make the rounded corners with the following css code, but it only affects the corners on your right. I need to know what I miss so that the four cornes of the block get rounded… Im using this code:

.wp-block-media-text {
border-radius: 10px;
}

Many thanks!
RR
aleone89 · Staff · Feb 12, 2021 at 2:57 pm
Copy link
Hello there,

I can see that CSS is doing the trick there.

From what I can see the four corners are rounded: https://d.pr/i/Me1iJZ

Is there another part of the page, where the CSS is not taking affect?

Many thanks in advance.
wpcomsites · Member · Feb 12, 2021 at 3:58 pm
Copy link
Thank you @aleone89

Oh oh… great to know, but for some reason I cannot see that. And I am checking on Chrome and Firefox… I took two screen shoots here so you can see…

https://innerpraxisorg.wordpress.com/shots/

What can it be?
Thank you!!!
RR
wpcomsites · Member · Feb 12, 2021 at 4:04 pm
Copy link
Hello @aleone89 …. I think I found out…

The image inside the Media & Text Block needs to be treated separately and applying the same border-radius condition as the entire block…

.wp-block-media-text {
border-radius: 10px;
}

.wp-block-media-text.is-image-fill .wp-block-media-text__media {
border-radius: 10px;
}

Thanks so much
Will mark this as resolved!
RR

No items found.