Rough Pixels

For CSS and your block; you can add a class to the block via the Advanced setting in the block editor. Selecting the block in question, on the right side open the Advanced settings, and enter in a class name (whatever you decide to name it). Then, you can create the styling for that class. When creating a reusable block, I’ve never tried this, but if you add a class to it and then save it as reusable, it might hold that class…? Otherwise, each time you use it, you might have to re-add the class to it each time.

Hopefully, that made sense?

For sidebars having different widgets on different posts/pages, the best way is to use a plugin that lets you publish widgets to select posts/pages. I wrote an article about this before–turned out to be a popular one. This might help…

https://www.roughpixels.com/blog/quick-tips/how-to-show-or-hide-widgets-on-specific-pages-with-wordpress/

For Rough Pixels, this site uses the Widget Options plugin.

Is it possible to get a link to where your site is? I might be able to give you a solution for positioning your title and description.

Thanks for the link…. the space, you mean above or below the site title (the web address line)?

For the tagline, here is some CSS code you can copy and paste into the Customizer’s Additional CSS tab:

.site-description {
    display: none;
}
.home .site-description {
    display: block;
}

Hope that helps…

Best Regards,
Andre

Greetings!

I’m not sure if you’ve seen the tutorials, or if you still need help, but here is a link to the complete set of Storytime Tutorials:

https://www.roughpixels.com/documentation/storytime-tutorials/

For submenus…WordPress has a tutorial for creating menus, but try this one from our “Common Setup” tutorials:

https://www.roughpixels.com/documentation/common-setup/creating-menus/

Best Regards,
Andre

For the first one, copy and paste this into the Customizer’s Additional CSS tab:

#site-branding:after {
border: none;
}

.entry-title:after {
display: none;
}

For the second question:

.main-navigation-menu > li:after {
display: none;
}

For your third question, this is what the current theme’s styling is:

.main-navigation-menu {
    display: none;
    font-family: Domine, "Times New Roman", serif;
    font-size: 0.938rem;
    font-weight: 400;
    margin: 0;
    padding: 20px 0;
    position: relative;
    width: 100%;
    letter-spacing: 1px;
    list-style: none;
    text-transform: uppercase;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
}

From that CSS code, you can see the font family used, size, etc. To override that, simply copy the code and paste it into the Additional CSS tab of the customizer and change the parts you want to change from there.

Hope that helps?

Best Regards,
Andre

hello… That older post with the link, unfortunately, doesn’t let me update it; however, the link to that particular tutorial for the header is:

https://www.roughpixels.com/documentation/prologe-tutorials/front-page-header-image/

Then the CTA:

https://www.roughpixels.com/documentation/prologe-tutorials/front-page-call-to-action/

Let me know if this helps, but if not, if you can give me a link to your site, I can take a look and see what I can do to help you get this setup.

Best Regards,
Andre

There is an overlay which is used to darken a photo whenever text is sitting on top of the image–this helps make text standout.

It’s done with this CSS:

.has-header-image .site-header:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--rp-header-bg-colour);
    opacity: var(--rp-header-overlay-opacity);
    z-index: 2;
}

You can always add custom CSS to override the opacity (transparency) with:

.has-header-image .site-header:before {
opacity: 0;
}

The 0 makes the transparent layer completely transparent, whereas making it a value of 1 makes it black (the least transparent value). You can also change it to anything between 0 and 1.

For example: 0.3 (which would be 30% transparency). 0.75 would make it 75% transparency.