A few more questions

[Kristina Fisher]

Hi Bill,

I just have a couple more questions for you:

1) How can I reduce the white space on the home page between the header and the widgets so that it matches the amount of white space between the header and widgets on the default pages (I am not planning to include a slideshow)?

2) I want most of the links on the homepage to be red (#cc0000) UNLESS they are inside buttons, when I want them to be yellow (#ffe633). I am trying to figure out some custom CSS that would allow me to override the Customizer’s Home Page Widget Styles but only for buttons. Something like:

#homepage a.button
{
background-color: #0099cc;
text-color: #ffe633
}

#homepage a.button:hover
{
background-color: #003366;
text-color: #ffffff
}

3) Still trying to figure out how to homepage widgets from overlapping one another on the right-hand side; do I need to specify height or spacing somewhere for them?

thanks!
Kristina

[Kristina Fisher]

Sorry, one more!

I want to change the look of the titles that appear on each page (e.g., on the About page it automatically displays “About Us” as black text with a 1px black line beneath: http://newsite2016.thinknewmexico.org/WordPress/about-us/). I want to make them look like the standard widget headers, blue boxes with white text.

I found .page-title in the stylesheet and am wondering if I cam alter it there? Something like:

.page-title {
color: #ffffff;
background-color: #0099cc;
overflow: hidden;
padding-bottom: 5px;
border-bottom: 1px solid #212221;
}

thank you!

[Bill Robbins]

Good Morning Kristina,

Let’s see if we can track down answers for you. For any CSS snippets, just place it in the Custom CSS spot in the customizer.

1. Remove space where slider was.

Here’s the CSS to do that:

.home #navigation {
	margin-bottom: 0;
}

2. WordPress adds unique classes to the body element on every page. Those can be used to style that particular page differently from the others on the site. So for buttons, you could use something like this:

.home a.button {
	background-color: #0099cc;
	color: #ffe633
}

.home a.button:hover {
	background-color: #003366;
	color: #ffffff
}

If you also want to affect the buttons inside widgets, you would alter that just a bit like this:

.home a.button,
.home .widget a.button {
	background-color: #0099cc !important;
	color: #ffe633 !important;
}

.home a.button:hover,
.home .widget a.button:hover {
	background-color: #003366 !important;
	color: #ffffff !important
}

3. The homepage uses a script called masonry to allow widgets to not form large vertical gaps if the widgets they sit next to are not the same height. It’s the same idea behind Pinterest’s layout.

What it does not handle well is items that change size after the page has loaded. The Twitter and Facebook widgets are getting taller after the page is loaded and the layout is set. That’s causing them to overlap.

We can get around that by adding a height or minimum height to the widgets. You could use some CSS like this:

#home-widgets .widget-easy-twitter-feed-widget-kamn {
	height: 340px;
}

#home-widgets #text-10 {
	height: 560px;
}

The top one is for the Twitter widget. The bottom one is for the text widget that has the Facebook page embed inside it. If you place it inside a different text widget, you’ll need to change the #text-10 to match the new widget. Every instance of a widget has a unique ID.

4. Page Titles like Widget Titles

You could add this to the Custom CSS:

.page-title {
	color: #ffffff;
	background-color: #0099cc;
	overflow: hidden;
	padding: 10px 20px;
	border-bottom: none;
}

With CSS the styles that are loaded last are the ones that are displayed. So by copying the style from the stylesheet you can add it to the Custom CSS and make changes there. To delete something that’s already there like bottom border, you’ll need to remove it via CSS. With the case of a border it’s border-bottom: none;

I hope that helps out. If you have other questions let me know. It’s generally a bit easier to make a separate topic for each question. That way questions are less likely to be missed, especially if they require follow up questions. With multiple ones in one thread it can get a bit unfocused.

Have a great day,
Bill

[Kristina Fisher]

Thank you so much, Bill! I really appreciate your time and help with customizing the theme, and I’ll ask any future questions in their own topic threads. 🙂

Just one follow-up on your answer above: how can I find the unique ID of a text widget? It would be great to be able to apply custom styles to a specific text widget.

thanks,
Kristina

[Bill Robbins]

Always happy to help out. Great question too. You’ll need to view the source code of the page with the widget in it. Look through the code until you find the spot with the widget and you’ll see a line that’s something like this:

<aside id="text-8" class="widget widget_text clearfix">

It could be a div instead of an aside, but the id=”text-8″ will let you know what the ID of that widget is.

Thanks,
Bill

[Author]

Posts