Diff site-branding; Remove featured image overlap; Change pages background color

Hi there! I’ve got some things for you to try to get us started with your list. ??

1. You could use CSS to adjust the size of the logo and site title/description on certain pages. For example, to target all pages using the default template, you could use this CSS:

.page-template-default .site-logo {
	width: 100px;
}

.page-template-default .site-title {
	font-size: 20px;
}

.page-template-default .site-description {
	font-size: 10px;
}

If you also want the same sizing to happen on single post pages or your archives, use the same CSS, but instead of .page-template-default try .single-post or .archives for the same result on those pages too.

To play with alignment there, try adding a line like float: left; to see if it looks they way you’re thinking.

2. Do you mean you want to shift the page title down so the it displays completely below the image so they don’t touch at all? But otherwise stay the same?

3. For resizing the images within the front page widgets areas, go into Customize > Widgets, then First/Second/Third Front Page Widget area. You can add width="50%" (and also height) or a specific pixel size into your <img src=" HTML. Details on that here: https://www.w3schools.com/html/html_images.asp.

As they are right now, the images are the full width of the widget area (so they line up nicely with the edges of the text) and are responsive, so you’ll want to keep an eye on how you change them to make sure they still respond well to screen size changes.

4. For the background color on the content area (likely on some/most pages), you can use this CSS:

.site-content {
	background-color: green;
}

Did that hit the right area? Or do you mean somewhere else?

5. In your CSS editor, add the following CSS to change the background color of the footer widget area:

.footer-widget-area {
	background-color: red;
}

(And if you want to adjust the very bottom of the site, use .site-footer.)

Let me know how it goes!

Thanks, Sarah!

1.
That code was very useful, thanks! ?? Now there’s too much empty space, though; Do you know how I could split the description into two lines, potentially with different size or font:

Market garden. Orchard. Nursery
Great Barrier Island

I don’t really want to use the work-around of using Title for the first line and Description for the second line (because that has undesired side-effects).

2.

Do you mean you want to shift the page title down so the it displays completely below the image so they don’t touch at all? But otherwise stay the same?”

Yes ??

3.
Yeah, that was exactly my question: How to do this so that it works for different screens. As far as I can tell, the link you shared doesn’t help with that (style, height, width)… or the 50% width suggestion, right? Is there any css instruction specific to widgets or the widget areas, which refers to padding or margin?

I could make the whole widget area narrower, I suppose. I don’t mind the text being narrower –I just want to reduce the image display so they are not so much in your face ??

4.
Thanks! That helped partially. Check this page as an example of what background is still unchanged (white) and I want to change as well: https://www.okiwipassion.co.nz/gallery/

5. Great, thanks! ??

PS for #1 Forgot to say, I would like the site Description aligned with the logo (in every page except the homepàge). As you can see, I’m not displaying the site Title (and I’ve made it 2px in case that helps remove space, but I don’t think it does ?? ). Thanks!

#4 In case anyone’s interested in using this code, I got further with:

/*
Change every page's background color (default was white)
*/
.site-content {
	background-color: #ffffee;
}
.page-template-default {
	background-color: #ffffee;
}
.single-post {
	background-color: #ffffee;
}
.archives {
	background-color: #ffffee;
}
.category {
	background-color: #ffffee;
}
.page {
	background-color: #ffffee;
}
.full-width-page {
	background-color: #ffffee;
}
.grid-page {
	background-color: #ffffee;
}
.content-wrapper {
	background-color: #ffffee;
}
.content-wrapper.without-featured-image {
	background-color: #ffffee;
}

Now I’m trying to change the Search box background color as .input[type="search"] {background-color: #ffffee;} didn’t work.

Hi there – I’m taking over for Sarah this week.

Let me tackle your outstanding items in batches.

Now I’m trying to change the Search box background color as .input[type=”search”] {background-color: #ffffee;} didn’t work.

If you’re referring to the search box in the footer widget, it has a class which is more “specific” in CSS terms than the class you’re targeting. I used my browser inspector to find it. This should do the trick:

.widget_search .search-field {
   background-color: #ffffee;
}

Here’s a good post to help you understand more about CSS specificity and how it works.

I also wanted to give you a couple of tips:

– CSS elements can be chained with commas, to avoid repetition. So instead of what you posted above, you could just do:

.site-content, .page-template-default, .single-post  {
  background-color: #ffffee;
}

… and so on, adding each new element after a comma instead of repeating the entire code block.

– That said, if you’re trying to change the background colour on all pages, you don’t need to target each element. Instead, target a “less specific” element, which in your case would be the body tag:

body {
  background-color: #ffffee;
}

– All that said, you currently have a background colour set to #e5f4de in the Customizer. The easiest way to change the background colour site-wide is by changing it once there. No CSS will be needed.

That code was very useful, thanks! ?? Now there’s too much empty space, though; Do you know how I could split the description into two lines, potentially with different size or font:

Market garden. Orchard. Nursery
Great Barrier Island

I don’t really want to use the work-around of using Title for the first line and Description for the second line (because that has undesired side-effects).

You can modify the width of the tagline with something like:

.site-description {
  width: 300px;
}

It’s not possible to change the font or size from line to line since there’s only one HTML tag to target.

You may need to also adjust positioning once the width is changed. Width and layout changes like this have a cascading effect – you change one thing and four more need adjusting.

Try experimenting to get the effect you want. If you need further help with it, please start a separate thread for help, as this one is already super long. Thanks.

Yeah, that was exactly my question: How to do this so that it works for different screens.

If you decide to restrict your changes to certain screen sizes, you can learn more about using media queries that target certain screen sizes here:

https://en.support.wordpress.com/custom-design/custom-css-media-queries/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Media queries are a simple concept but powerful in practice, and can take some experimentation and testing to get right.

Hi Kathryn,

Thanks for your help and the css tip about repetition in particular!

1.
Thanks, I tried your suggestion and it worked wonders to split the site description into two lines! However it has now moved to the left under the logo.

How can I center the site-description (center of the page) while aligning it vertically with the logo?

Float and align didn’t work :/ (and I’ve made the site-title font-size: 2px to make sure it doesn’t take much room)
See e.g. https://www.okiwipassion.co.nz/about/

2.
Could you address #2, please, Kathryn? It hasn’t been answered yet ??

Rephrasing the question, as she wanted it clarified: How can I make the post / page content start below the featured image?

3.
I’m afraid we’re not understanding each other about my needs re screens (I’m thinking of the other thread we have open too). I do NOT want to restrict to certain screens, rather the opposite. I want the website to work on ALL screens. Which is why I’m not happy with using a specific size in absolute numbers (e.g. 125px) nor a % of the image size (because my guess is that this is the same as saying a specific size in absolute numbers).

Is there a way to do this generally for all devices? Maybe using a % of area width instead of a % of image width (I don’t want to use absolute numbers for the image size)?

4.
Thanks for the search widget background color code!

All that said, you currently have a background colour set to #e5f4de in the Customizer. The easiest way to change the background colour site-wide is by changing it once there. No CSS will be needed.

Nope, I’m afraid that the background color in customizer only changes the two side lines where there’s no content.

Thanks for the “body” css tip, though, that certainly simplifies life! ??

Thanks in advance to look into the above!

How can I center the site-description (center of the page) while aligning it vertically with the logo?

As I mentioned above, please start a separate thread if you need further help tweaking the tagline positioning. Sticking with one or two issues per thread is appreciated: it helps you get assistance quicker from more volunteers — who are much likelier to step in to help with one or two things, rather than a long list — it helps keep search results cleaner and more useful, and it also helps keep threads from becoming too long and unwieldy. Thanks!

2. Remove overlap of featured image by page content (I kinda like it but the business owner wants it gone because “it looks cut off”)
e.g. https://www.okiwipassion.co.nz/veggie_boxes/

(aka)

How can I make the post / page content start below the featured image?

Please try the CSS here:

https://www.ads-software.com/support/topic/post-featured-image-overlaps-title?replies=21#post-8317055

3.
I’m afraid we’re not understanding each other about my needs re screens (I’m thinking of the other thread we have open too). I do NOT want to restrict to certain screens, rather the opposite. I want the website to work on ALL screens. Which is why I’m not happy with using a specific size in absolute numbers (e.g. 125px) nor a % of the image size (because my guess is that this is the same as saying a specific size in absolute numbers).

Is there a way to do this generally for all devices? Maybe using a % of area width instead of a % of image width (I don’t want to use absolute numbers for the image size)?

You’re right – I don’t quite understand what you’re aiming for. ??

Sela is designed to adapt automatically to screens of all sizes. On smaller screens, that may mean that some elements are stacked instead of being displayed side-by-side. This is done to maintain readability and eliminate the need to scroll horizontally or pinch or zoom in order to read your content.

Your original question was:

3. Reduce the size of the images in the front page widgets, making sure they resize for different screens, mobile, etc. (www.okiwipassion.co.nz)

Sela should already be doing this automatically.

If you could upload a screenshot of what you’re seeing that you want to change, that might be helpful.

Here’s a guide on how to make a screenshot:
https://en.support.wordpress.com/make-a-screenshot/

You can upload the screenshot – in a graphic format like JPG, PNG, or PDF – in your Media Library, and provide a link so I can see it, or upload it with a service like Cloudup, Imgur or Snaggy.

Let me know on what kind of device/browser you took the screenshot.