• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Left-Align titles in Home Featured section & change more buttons to links

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Left-Align titles in Home Featured section & change more buttons to links

This topic is: resolved

Tagged: alignment, more, titles

  • This topic has 4 replies, 2 voices, and was last updated 9 years, 10 months ago by erinofwoof.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 21, 2013 at 10:35 am #29972
    erinofwoof
    Member

    Hello! I have two questions, and I apologize if they're just a result of my inexperience coding.

    The first is, I'd like to change the Home Featured section so that the titles of these three widgets are left-aligned, rather than centered.

    The second is that I'd like to remove the "more" buttons to just links that say "Read more".

    Are these possible?

    My site is at http://www.woofsandiego.com, and I am using the Streamline theme.

    Thank you!

    March 21, 2013 at 1:00 pm #30110
    modernmint
    Member

    To left-align the Home Featured titles:

    In your child theme's style.css, find:

    #home-featured h2, #home-featured h2 a, #home-featured h4 {
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
    }

    Change text-align:center; to text-align: left; OR remove the line in bold all together.

    If you would like to remove the button "Read More"  button background and just leave the link:

    1) In child theme's style.css, find:

    input[type="button"],
    input[type="submit"],
    a.more-link
    {
    -moz-border-radius: 3px;
    -moz-box-shadow: 0 1px 1px #ccc;
    -webkit-border-radius: 3px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    border-radius: 3px;
    box-shadow: 0 1px 1px #ccc;
    background: url(images/button.png) 0 0;
    border: none;
    border-bottom: 1px solid #b15120;
    color: #fff !important;
    font-size: 13px;
    font-weight: normal;
    padding: 8px 12px 6px;
    text-decoration: none;
    text-shadow: 1px 1px #a1491d;
    }

    Remove the bold text (a.more-link).

    2) In style.css, find:

    .streamline-blue input[type="button"],
    .streamline-blue input[type="submit"],
    .streamline-blue a.more-link {
    background: url(images/blue/button.png) 0 0;
    border-bottom: 1px solid #294555;
    text-shadow: 1px 1px #294555;
    }

    Remove the bolded text including the beginning comma.

    I hope this helps!

    March 21, 2013 at 5:42 pm #30326
    erinofwoof
    Member

    That's excellent - thanks so much!

    I noticed that, after these changes, on-hover, the More link was turning blue (a blue box was covering it). I was able to remove a piece of the code in the .streamline-blue input [type="button"] section you mentioned in #2 that seemed to impact that, but now it's orange on-hover. I'd like it to have just a simple effect - like turning white or just changing the transparency. Just enough to know it's clickable. Any suggestions?

    Thanks again very much!

    March 22, 2013 at 5:43 pm #30585
    modernmint
    Member

    In style.css, find:

    input:hover[type="button"],
    input:hover[type="submit"],
    a.more-link:hover {
    background: url(images/button.png) 0 -40px;
    cursor: pointer;
    }

    Remove the bold text, including the beginning comma. This leaves just an underline when the user hovers over the link.

    March 23, 2013 at 10:03 am #30706
    erinofwoof
    Member

    That's perfect! Much appreciated! Thanks so much. =)

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble