Skylark Showcase page

  • nmegan · Member ·

    Good morning: I’m just beginning my site using the Skylark theme and i have purchased the custom upgrade. I’m trying to adjust a few additional things on the first page which is set to Showcase template.

    1) The menu heads up at the top: is there a way to enlarge them a bit and change their color from white to something else?

    2) on the sub-menus, there seems to be an awful lot of space between the drop down items. Can that space be reduced?

    3) On the slider, is there a way to remove or hide the left/right arrow icons and just let the photos auto rotate?

    4) Down below the slider, where I have the 4 featured images/posts, I don;t want that category title (Jeweler, Metalsmith, Teacher, Writer) to show because it pushes the posts down too far on a small screen. But It’s the featured category and when I remove it, the posts go away. Is there a way to hide it at least?

    Thank you in advance and sorry if I’m posting in the wrong forum.

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

  • justpi · Member ·

    1a) To change the color, add this and replace 456789 with the hex for the color you prefer: 

    .main-navigation a {
    color: #456789;
}

    1b) To increase the font size, add this (and adjust the percentage): 

    .main-navigation li {
    font-size: 110%;
}

    The menu area covers the right half of the theme only, so the menu items won’t fit in one line once you enlarge them; I guess you don’t want that, so add this as well: 

    .main-navigation {
    width: 100%;
}

    3) 

    #slider-prev, #slider-next {
    background: none;
}

    4) 

    #category-highlight .category-header {
    display: none;
}
  • nmegan · Member ·

    Thank you so much! I will try these tonight and let you know how it develops. Stay tuned…much appreciated!

  • nmegan · Member ·

    justpi: everything worked like a charm, with the tiny exception of when I removed the category header, it kept the hairline horizontal rule there. You can see it behind the four featured category photos. Is this possible to remove?

    And I see that you had no suggestion for my #2 question so I’m assuming that is not possible to change? My thanks again.

  • mrdirby · Member ·

    I’m looking at the Teaching page and there are two horizontal lines. To remove the first one:

    .entry-title {
border-bottom: none;
}

    And the second. Although I think this like will appear at the bottom of the content when you have some. So you may want to keep it. Either way here is how you would remove it.

    .hentry {
border-bottom: none;
}
  • mrdirby · Member ·

    2) on the sub-menus, there seems to be an awful lot of space between the drop down items. Can that space be reduced?

    For this you could reduce the padding around the child unordered list items. The first padding value represents the padding for the top and bottom of each list item. So you can experiment changing 0.8em to 0.6em. 

    .main-navigation ul ul a {
padding: 0.8em 0.6em;
}
  • justpi · Member ·

    @nmegan: You’re welcome!

    a) To remove the hairline, add this: 

    #category-highlight .category-section {
    border: 0 none;
}

    b) As mrdirby showed, #2 is quite possible: I just forgot to address it.

    c) As for #1, I’m seeing you only increased the font size from 100% to 102%. Is this what you prefer, or is it because my original suggestion made the menu left aligned? If you want the menu items to be even larger but right aligned, that’s also possible.

  • nmegan · Member ·

    I’ll try these changes now and report back. Honestly, I am so grateful. I am keeping track of all of this to see if I can actually learn and apply it to other pages as I build this site. I only have a hour or so a day to work on it so it will take me some time. I’m a little leery of the portfolio page….it doesn’t seem intuitive but it’s the section I need the most. I’m sure you’ll hear from me again!

  • nmegan · Member ·

    @justpi: You’re correct, it did left align them and I didn’t want that but once I added the color, just a little bit larger seemed to be fine. Thank you!

  • The topic ‘Skylark Showcase page’ is closed to new replies.