css support in creating a main home page that directs to 3 areas of site

  • Unknown's avatar
    emilychaffee · Member ·

    hello! this is the beginning of my question: https://en.forums.wordpress.com/topic/landing-page-with-option-to-go-to-two-different-sets-of-content-stay-theme?replies=4

    i followed the instructions to create the home page with three images, which will link to 3 different bodies of work. here it is: http://emilychaffee.com/home-main/

    could you help me with the following?

    1a. on this primary home page – have the menu along the top to be turned off, and

    1b. have the words “nature minimalism” under emily chaffee be deleted. (i will want “nature minimalism” under my name in the nature photography section, and two different names under my name for the other two sections.)

    2a. get rid of the white box behind the thumbnails

    2b. have the thumbnails be in a horizontal line, not diagonal.

    2c. get the thumbnails closer to each other, centered on the page, and a bit larger

    2d. put text under each thumbnail that says where clicking the image will take you.

    3. get rid of the title “home-main”

    4a. sculpture home page (http://emilychaffee.com/home-sculpture/) i’d like to have this part of the website have its own menu along the top that will correspond with the pages in the sculpture section

    4b. get rid of home-sculpture at the top

    4c. have a new heading under emily chaffee in the upper left-hand corner (it should say sculpture instead of nature minimalism.)

    can you help me set this up?
    thank you –
    emily

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi emily,

    1a & b. The following will hide the menu and site description on the home-main page only:

    .page-id-1044 .navigation-main, .page-id-1044 .site-description {
    display: none;
}

    2a. This will delete the white background behind the images on home-main:

    .page-id-1044 .hentry {
    background: none;
}

    2b, 2c, 2d. Give the following a try. It works clear down to a browser window/screen width of 700px where the images then collide and start to flow off the right side of the page. If this looks workable for you, I can work on getting the images to resize and work down to phone size screens. Edit your home-main page, switch to the Text tab, delete everything and paste in the following.

    <table style="max-width: 100%;">
  <tr>
    <td style="width: 33%;"><p><a href="http://emilychaffee.com" sl-processed="1"><img width="200" height="200" alt="wp-ocean05-home" src="http://emilychaffee.files.wordpress.com/2014/03/wp-ocean05-home1.jpg?w=200&h=200" class="aligncenter wp-image-1048 size-thumbnail"></a><br />Title Here</p></td>
    <td style="width: 33%;"><p><a href="www.emilychaffee.com/sculpture" sl-processed="1"><img width="200" height="200" alt="wp-sculpture-home" src="http://emilychaffee.files.wordpress.com/2014/03/wp-sculpture-home.jpg?w=200&h=200" class="aligncenter wp-image-1049 size-thumbnail"></a><br />Title Here</p></td>
    <td style="width: 33%;"><p><a href="http://emilychaffee.com/being" sl-processed="1"><img width="200" height="200" alt="wp-being-home" src="http://emilychaffee.files.wordpress.com/2014/03/wp-being-home.jpg?w=200&h=200" class="aligncenter wp-image-1054 size-thumbnail"></a><br />Title Here</p></td>
  </tr>
</table>

    3. Deletes the page title on home-main:

    .page-id-1044 .entry-title {
    display: none;
}

    4a. This gets a little involved. Not rocket science in difficulty, but it takes a good bit of code to do it since you have to add those menu items to the main menu and then use CSS to exclude those from the pages you do not wish them to show up on and then on the sculpture page, hide all the ones you do not want to show up on that page.

    This would be the basic code you would be using (it hides “mountain” from the sculptures page).

    .page-id-1060 #menu-item-94 {
    display: none;
}

    To hide several, you can include more than one selector in each rule. As an example, the following would hide mountain, still and contact from the sculptures page.

    .page-id-1060 #menu-item-94, .page-id-1060 #menu-item-92, .page-id-1060 #menu-item-96 {
    display: none;
}

    To find the page ID classes, you look at the source code for your page (browser view menu > view source) and look in the opening body selector for something like this:

    page-id-1060 (since it is a CSS class, you precede it in the CSS with a period (.)

    You do similar for the menu items by finding the menu HTML in the source code and then the menu id for each item you wish to hide. They will look something like this:

    menu-item-96 (this is a CSS ID, so you precede it in the CSS with a hash mark (#)

    4b. Same procedure as with the home-main page except using its unique page body class:

    .page-id-1060 .entry-title {
    display: none;
}

    4c. This hides the existing site description on the sculpture page and then adds “sculpture” and moves it up to where the existing site description is hidden. (Use this instead of 

    .page-id-1060 .site-description {
    color: rgba(0, 0, 0, 0);
}
.page-id-1060 .site-description:after {
    content: "sculpture";
    color: #404040;
    position: relative;
    top: -20px;
}
  • The topic ‘css support in creating a main home page that directs to 3 areas of site’ is closed to new replies.