several formatting questions

[Katie Miranda]

Hi Bill, it’s Katie again with a new site.

I have several questions about Progress so far:

1) On the Staff page, the bios are pretty short and I’d like them to display in full on the staff page instead of having to click the name to read more. How can I do this ? http://freepalestinemovement.org/2011-delegation/

2) I have tried to set the blog (news) page to a wide page in order for it to fill the entire page and have no sidebar. But it still has an empty column on the side: http://freepalestinemovement.org/blog/ How can I fix this ?

3) I tried to make a video page here: http://freepalestinemovement.org/2013/04/08/israeli-journalist-amira-hass-sparks-furor-at-home-for-defending-palestinian-right-to-resist/ and pasted the embed code in the Video box. But it’s not formatting correctly. I tried both with and without the width and height tags. How can I get this page to look like your demo video page ? I made the format “Video”.

4) How can I reduce the size of the post titles as well as the names of the staff on the staff page ?

thanks a lot !

-Katie.

[Katie Miranda]

Oh and one more question, is there a way to put a shadow around the title bar like the shadows around the main sections and widget areas ?

thanks !

[Bill Robbins]

Katie,

Let’s try to find you some answers.

1. Full staff bios

You can change that. Here’s how:

1. Go to the Appearance section in your WordPress control panel and select Edit.
2. From the list of files on your right, choose page-staff.php
3. Find this spot:

   
   <?php the_excerpt();?>
   

4. Replace it with this:

5. Save your changes.

That should let the full content be displayed on your staff pages.

---

2. Full Width Blog

This is a bit counter-intuitive, but when a page is selected as the “posts” page, WordPress ignored everything selected on that page except for the page title. Any templates, featured images or content will be omitted.

That doesn’t mean you are unable to have a full-width blog page though. Go to the Theme Options page and select the Styling tab. Scroll down to the Custom CSS box and paste this:

.blog .main-content {
	width: 96%;
}

and save your settings. That should make your blog page full-width.

---

3. The javascript that makes the videos responsive was created by its author to work with YouTube, Vimeo and also with Flash videos. Let’s do it this way.

1. Go to the Appearance section in your WordPress control panel and select Edit.
2. From the files on your right, choose custom-js.php and find this spot:

   
   // Fit videos
   	jQuery(document).ready(function(){
   	    jQuery(".video").fitVids();
   	  });
   

3. Delete it.
4. Next go to back to the Styling tab in the theme options page and find the Custom CSS box. Paste this there:

   
   .video {
   	position: relative;
   	padding-bottom: 56.25%;
   	height: 0;
   	overflow: hidden;
   }
   
   .video iframe,  
   .video object,  
   .video embed {
   	position: absolute;
   	top: 0;
   	left: 0;
   	width: 100%;
   	height: 100%;
   }
   

5. Save your settings and see if that doesn’t make the video fill the space for you.

---

4. Page and Staff Titles.

You can change those. Go back to the Custom CSS box and paste this:

.staff-list h2.title  {
	font-size: 24px;
}

That will affect the titles of the staff members on your staff page. Also paste this for your page titles:

h1 {
	font-size: 30px;
}

Adjust the sizes to fit your needs and save your changes.

---

5. Title Shadow

You can add in a shadow to the page title too. Paste this in your Custom CSS box:

#logo img {
	-moz-box-shadow: 0 1px 5px #000000;
	-webkit-box-shadow: 0 1px 5px #000000;
	box-shadow: 0 1px 5px #000000;
}

save your changes and that should do it.

Let me know if you have any trouble or questions,
Bill

[Katie Miranda]

Awesome, thanks !
Two more questions, how do I change the titles on the blog archive page to be the same size as the titles on the actual post pages ? http://freepalestinemovement.org/blog/

And, How can I get a title that says “Featured video” above the video on the home page ? http://freepalestinemovement.org/

thank you !!!!!!!!

[Katie Miranda]

Oh, one last question: How can I get the navigation text to be centered vertically between the logo at the top and the main section below ? http://www.freepalestinemovement.org

thanks !

[Bill Robbins]

To make the blog archive and individual posts have the same font-size, you can use this CSS snippet:

h1.title,
h2.title {
	font-size: 30px;
}

---

For the “Featured Video” text do you mean above the video vertically so that it is written like below the navigation items and before the start of the video, or do you mean overlaying the video like a caption? Let me know and we’ll go from there.

---

To center the menu items, use this CSS snippet:

header.primary nav {
	float: none;
}

header.primary nav ul {
	text-align: center;
}
header.primary nav li {
	float: none;
	display: inline-block;
}

Save your changes and that should center them for you.

Let me know about the featured video text and we’ll go from there.

[Katie Miranda]

Hey Bill, thanks. FOr the centering, that’s cool it’s centered horizontally now too, but I wanted it to be centered vertically between the logo and the main section too.

And for the video I did mean above it so it looks like the Recent Posts and Missions sections.

thanks !

[Bill Robbins]

You can use this snippet to add a bit of padding above the menu items. That will center them a bit in the header:

.primary nav ul.menu > li {
	padding-top: 15px;
}

---

For the widget, let’s update it to a newer version. Go to the Appearance section and select Edit. From the files on your right, choose widget-video.php. Replace everything in the file with this:

Then save your changes. I believe that will add in a widget title like the others have.

Let em know if you have any questions or trouble,
Bill

[Katie Miranda]

Hi, I tried both but neither worked. :{

[Bill Robbins]

In the code snippet, it converted the > to a > change it to a greater than sign in your snippet.

Did you add a widget title to the updated widget?

[Katie Miranda]

Weird, I changed it to a > then saved and reloaded and then checked back and it changed back to an > I tried it a few times and it keeps happening. Any suggestions ?

And the video, yeah I forgot I had to add a featured video title. It works now. :}

[Katie Miranda]

hey that second > was supposed to be an & g t ;

I guess this form converts & g t ; to a >

[Bill Robbins]

Double my bad there. It’s actually the Custom CSS box that’s doing that. It’s actually a security feature. I don’t often give > in my CSS for folks and I forgot that box will convert it to an “entity.”

Instead of adding the code to that box, go to the Appearance section in your WordPress control panel and select Edit. Choose the style.css file and add the code to the very bottom of the file and save your changes.

See if that won’t work.

[Author]

Posts