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

[erinofwoof]

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!

[modernmint]

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!

[erinofwoof]

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!

[modernmint]

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.

[erinofwoof]

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

[Author]

Posts