[Tonya]

Hi Dave,

Give this a try:

function ntg_infinite_scroll_init() 
{
    //* Bail out if it's 'competitions category
    if (is_category('competitions') return;

   // Leave the rest of this function the same as it is

You can place the category slug or it's ID number in the is_category() function.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

You're very welcome 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Not a problem.

Add float: left; to the .icon-cat-arrow styling.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Right the old code rendered improperly as you see after icon-cat-arrow" there's an extra <="". So put in the new code.

The problem is you need to add the following to your style.css file:

.icon-cat-arrow{
	background: url('images/icontest2.jpg') no-repeat 0 0 transparent;
        width: 0px; /* put in the icon's actual width */
        height: 0px; /* put in the icon's actual height */
        display: block;
        margin-right: 10px; /* adjust to your needs */
}

Please make sure that you put in the actual width and height of the icon image.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

You are very welcome. Enjoy your day 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

With the old code, is it rendering the same as what you provided above, i.e.

<h1 class="entry-title" itemprop="headline"><span class="icon-cat-arrow"></span>Testing the icon Category Images</h1>

If yes, then something is odd. Please post your style.css for the .icon-cat-arrow for me and I can see what's happening.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

No problem. I answered you on the link you provided.

If you happy with the answer to this thread, please mark it as Resolved. Thanks. 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

You can isolate the bbPress forum pages by adding styling that has body.bbpress before the specific class styling you are targeting. To change the widths for example, do the following:

1. Add this after line 1428

body.bbpress .sidebar {
width: 260px; /* shrank it by 100px */
}

2. Add this after line 1137

body.bbpress .content {
	width: 800px;
}

You can adjust the widths for what you want them to be here.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

You're welcome.

Please forgive me, but I'm a bit confused. Are you wanting to style the forum search and login forms? Or are you wanting to style the WordPress login, i.e. /wp-admin, and the WordPress search widget to match the forum's forms?

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

You want to go into the style.css file and place the above code after line 247. I advise that you use your favorite text editor such as Notepad, Notepad+, or Sublime Text. However, if you don't have access to the files, then you can also go to Appearance > Editor to make the changes. Be very careful when working within the editor.

Cheers

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

At this point, we've given you a few options that you need to play with to achieve the look and feel that you want on your site. You'll want to adjust the following:

1. font-family: Most of the sites I do, I have a different font family for the titles
2. color: Changing the color will make the titles be their own entity
3. font-weight: This changes the weight (or thickness) of the font itself

Cheers

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Perfect. Then you are good to go. Your icon class is .icon-cat-arrow in the style.css file.

Enjoy your day 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Do me a favor. Using either Firebug or Chrome Dev Tools, right click on the page title and then look at the HTML. Make sure that it rendered properly:

<h1 class="entry-title" itemprop="headline"><span class="icon-cat-uncategorized"></span>Hello world!</h1>

Obviously the title will be different and the 'uncategorized' will be whatever the category slug is for that post's category. What I'm looking for is to ensure that after the category slug it ends in "></span>.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

I think I need more coffee (of course I don't drink coffee LOL). I put the '>' in the wrong place (has to be after the " and not before). Sorry about that. I corrected it again:

$icon = sprintf('<span class="icon-cat-%s"></span>', $category->slug);

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

You're welcome 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

You're welcome. Here's a tutorial I wrote up for it too.

I did make one mistake in the code and forgot a closing '>' on line 14 of the first <span>. I updated the Gist and the tutorial for the correction. Please update your code too.

Cheers 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

It's due to the widget title. Add the following 2 lines just after line 661:

#home-featured .call-to-action .widgettitle {
line-height: 65.5px; /* this one vertically centers the title */
float: left;

/* this one floats it & now it's not full-width pushing the form down */

Cheers 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Hi Sue,

Right now the individual elements within the Subscribe form are set to float: right; What you want to do instead is set the entire form to float: right; as such:

On line 171

#home-featured .call-to-action .enews form{
	display: inline;
	float: right; /* I added this */
}

Then remove the float: right; on lines 709 & 719.

To pull the subscribe button closer, get rid of the margin-right on line 717.

Cheers 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Hi,

To add a custom class to the .entry-header <header> element, here is a tutorial I wrote.

Cheers 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Hi,

Within the style.css on line 1146, a large padding is being applied to the content area. To have the forums be full width, make the following change to line 1151:

.full-width-content.parallax-home .content, .full-width-content.bbpress .content {

Cheers 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Author]

Posts