Page tabs to anchors

Discussion in 'ColorWay WordPress Theme' started by filigree, Sep 15, 2013.

Thread Status:
Not open for further replies.
  1. filigree

    filigree New Member

    Joined:
    Jun 8, 2013
    Messages:
    18
    Likes Received:
    0
    Location:
    Oregon
    I'd like to know how to make the page tabs at the top link to anchors within another page. In other words, rather than opening up the top of the linked page, I'd like the link to open midway down the linked page. Is there a way to do this?

    Alternatively, is there a way to make the header only show up on the home page? This is why I need to link to midway down each page---my header shows up on every page making it so you can't see the actual content without scrolling down.

    Thanks in advance for your help!



     
  2. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
  3. filigree

    filigree New Member

    Joined:
    Jun 8, 2013
    Messages:
    18
    Likes Received:
    0
    Location:
    Oregon
    I have three questions:


    1) When clicking on the “Why rats?” button (the button to the right of "Home" in the middle of the screen): http://aboutpetrats.com/
    I'd like the "Why rats?" page to open so that the heading "Why rats?" is at the top rather than the "About Pet Rats" banner. Can you please tell me how to create an anchor link so the page opens more towards the middle rather than the top?

    2) How do I make the banner ("About Pet Rats") that appears at the top of every page narrower so it doesn't take up so much space?

    3) Is there a way to make the banner only show up on the home page?

    I hope my questions are clearer this time. I tried to insert screenshots here as you suggested, but to insert a picture I need a url.....not sure how to do this if the screenshot is in the form of a jpg not attached to a url. :)

    Thank you in advance for your help!

    Jasmine
     
  4. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

    1.For your first issue

    Could you please clarify your issue little more.

    2.For your second issue

    Paste this code in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS

    Code:
    .logo img {
    width: 100%;
    height: 200px;
    }
    
    Adjust its value as per your requirements.

    3.For your third issue

    Paste this code in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS

    Code:
    .page.page-id-103 .logo img {
    display: none;
    }
    .page.page-id-2 .logo img {
    display: none;
    }
    
     
  5. filigree

    filigree New Member

    Joined:
    Jun 8, 2013
    Messages:
    18
    Likes Received:
    0
    Location:
    Oregon
    3. Thanks so much for answering my questions. The answer to #3 worked great!
    2. I couldn't get #2 to work. The width adjusted just fine but not the height.
    1. Here's another way to phrase my question #1 again:
    I want to be able to create an "anchor link" so that when someone is on the home page and they click on the "Home" button they are taken to a spot lower down on the same page.​

    Thank you for your help!
     
  6. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

    Paste this code in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS

    Code:
    .logo img {
    width: 100%;
    height: 200px!important;
    }
    To achieve this firstly add id attribute for your desired heading at which you want to jump the link.

    For example:
    Code:
    <h3 id="test">Your Heading</h3>
    After that go to Appearance > Menus
    and create custom menu and add that heading id in URL.

    For example:
    Code:
    #test
    and add it.

    Sending image for reference

    2013-09-19_1410.png


    This will solve your issue.
     
  7. filigree

    filigree New Member

    Joined:
    Jun 8, 2013
    Messages:
    18
    Likes Received:
    0
    Location:
    Oregon
    Thank you for your help. The new code you sent for making the banner narrower works perfectly.

    There is still one unresolved question: I am not understanding how to create the anchor links. Just to reiterate, I want to be able to click on the "Home" tab and be taken to further down on the same page.
    When writing in your response "firstly add id attribute for your desired heading at which you want to jump the link", I'm not sure of the location to which you're referring. Are you saying that I need to enter something similar to "<h3 id="test">Your Heading</h3>" around the heading where I want people to be able to click and be taken lower down on the same page? I'm not sure where this is located. I tried adding it to Custom CSS and red "x"s appeared. I thought that to add anything to Custom CSS it needs to end in a bracket ("{"). Can you please provide a more detailed answer including exactly where the codes need to be added?

    Thank you in advance for clarifying!

    Jasmine


     
  8. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
  9. filigree

    filigree New Member

    Joined:
    Jun 8, 2013
    Messages:
    18
    Likes Received:
    0
    Location:
    Oregon
    Thanks for your help!

    Should I be creating a separate thread for each question?

    I do still have some follow-up questions about the above answers:

    1. For making the banner logo appear ONLY on the home page, you gave me the following code:
    .page.page-id-103 .logo img {
    display: none;
    }
    .page.page-id-2 .logo img {
    display: none;
    }

    This worked great until I added a new page. The new page shows the home page banner logo. I will be adding several additional pages. Can you please tell me what code I need to enter so that, no matter how many additional pages I add, the home page is still the only page with the banner logo?
    2. I appreciate your providing the link to Wendy Cholbi's page on anchor/jump links. However, I still don't know how to add a jump link on the home page. When editing the home page, there is not a way to switch to html view. Where would I enter codes for jump links for the home page? (Or is it even possible to create jump links on the home page?)
    Thanks again and I appreciate your patience with all of my questions. ;)
    Jasmine

     
  10. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    Hello,

    1. For your first issue,
    Paste the following code in your Custom CSS
    (Appearance -> Theme Options -> Styling Options -> Custom CSS)
    Code:
    .logo img {
    display: none;
    }
    body.home .logo img {
    display: run-in;
    }
    
    This will solve your first issue.



    2. For your second issue

    Can you please specify us that where you want to jump the link on home page, so we will create jump link for that area.
    And also send us your dashboard details on our email at [email protected].

    Thread Link: http://www.inkthemes.com/community/threads/page-tabs-to-anchors.7377/
    Your Website URL:
    WordPress Username:
    WordPress Password:

    Send this information on our email at [email protected]
     
  11. filigree

    filigree New Member

    Joined:
    Jun 8, 2013
    Messages:
    18
    Likes Received:
    0
    Location:
    Oregon
    Thanks so much for the code to make the banner/logo show up only on the home page. It works great!

    As for the other question, I'm going to hold off for now. I really wanted to experiment and play around with it so I can't say exactly where I'd want the jump links. Thanks for the offer though.

    Thanks again for the help. Much appreciated!:)
     
Thread Status:
Not open for further replies.

Share This Page