css: creating a main home page that directs to 3 areas of site (part 3)

emilychaffee · Member · Jun 2, 2014 at 6:38 am
Copy link

Add topic to favorites
hello –

i’ve been slow to reply so the topic keeps getting closed.
part 1
part 2

thank you @thesacredpath for your responses! here are my follow up questions:

1. i like the new size of the boxes and the text on the home-main page. i think what would look best is to have a white box behind them that is the same dimensions as the slider in the nature minimalism page. how do i do this?

2. the subheading under emily chaffee – how do i get it back? so for example on the home-main page i will have a subheading that says something – perhaps “photography & sculpture” or something like that. and on the sculpture page i will have a subheading that is different, etc.

3. i used your code to delete some of the headings from the sculpture page, but didn’t understand what you were saying about page id classes or finding the menu html in the source code. also i am using safari and don’t see an option for view > menu > view source. can you explain this in a different way? (i didn’t get to adding new menu items yet, want to understand this part first.)

thank you!
emily

The blog I need help with is: (visible only to logged in users)
emilychaffee · Member · Jun 4, 2014 at 3:24 am
Copy link
also – once i get this all set up i want to change the page that is currently http://emilychaffee.com/home-main/ to http://www.emilychaffee.com and the one that is currently http://emilychaffee.com to http://emilychaffee.com/natureminimalism/ will it mess up anything that i am setting up now if i change these url’s later? (thinking i’ll do it later so that current traffic to the site goes to a page that is set up.)

thanks!
emily
designsimply · Member · Jun 26, 2014 at 7:16 pm
Copy link
1. i like the new size of the boxes and the text on the home-main page. i think what would look best is to have a white box behind them that is the same dimensions as the slider in the nature minimalism page. how do i do this?

First, it helps to have direct links. I checked out your site and I think the nature minimalism page you’re referring to is now the home page:
http://emilychaffee.com/

And this is the home main page:
http://emilychaffee.com/home-main/

The dimensions of the featured content slider on the home page at http://emilychaffee.com/ are currently 1200 x 525 pixels.

To make the white box on the http://emilychaffee.com/home-main/ page the same height, you could add this to your Appearance > Customize > CSS editor:
```
.page-id-1044 .hentry {
	min-height: 525px;
```
If you wanted to move the contents of the box down a little, you could add padding at the top and reduce the min-height by the same amount like this:
```
.page-id-1044 .hentry {
	min-height: 425px;
	padding-top: 100px;
}
```
designsimply · Member · Jun 26, 2014 at 7:24 pm
Copy link
2. the subheading under emily chaffee – how do i get it back? so for example on the home-main page i will have a subheading that says something – perhaps “photography & sculpture” or something like that. and on the sculpture page i will have a subheading that is different, etc.

You can add text to existing elements using the “content” property in CSS. And you can target specific pages by looking at the page source and finding the unique class name for that page.

For http://emilychaffee.com/home-main/ the unique class name for that page is “page-id-1044” so you could add something like this to your Appearance > Customize > CSS editor to try to approximate the site title that says “n a t u r e m i n i m a l i s m” and is’ currently showing on the home page.
```
.page-id-1044 .site-title:after {
	content: "placeholder text";
	display: block;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 3px;
	margin: 0;
	padding: 0;
}
```
designsimply · Member · Jun 26, 2014 at 7:38 pm
Copy link
3. i used your code to delete some of the headings from the sculpture page, but didn’t understand what you were saying about page id classes or finding the menu html in the source code. also i am using safari and don’t see an option for view > menu > view source. can you explain this in a different way?

Here is a general help page about how to view HTML and CSS using browser tools: http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

Here’s a link to the sculpture page for reference:
http://emilychaffee.com/sculpture/

Here’s an example of how to find the unique class for the sculpture page:
https://cloudup.com/cO1rpGeg5-Q

For the sculpture page, the unique class name is “page-id-1060” so you would refer to it in CSS with a “.” in front, i.e. .page-id-1060

And here’s an example of how to find the menu HTML in the source code:
https://cloudup.com/cIkFyYQew_w

For the “marsh” menu item, the id value is “menu-item-98” so you would refer to it in CSS with a “#” in front, i.e. #menu-item-98

This is also a good, related tutorial about classes vs IDs:
http://www.htmldog.com/guides/css/intermediate/classid/

No items found.