WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
Hello,
I'm pretty new to CSS formatting and I can't figure out how to change the Call to Action button the home page from Blue to Silver. I've found some tutorials elsewhere on the internet, but they all seem to apply to the .org version of Responsive rather than the .com version and I cannot make them work.
Any suggestions? Thanks in advance!
The blog I need help with is howthewestreallylostgod.wordpress.com.
Here are the two sections that have to do with the read more button on the main page. This was pulled from the original CSS. The button is done as a linear gradient, so to keep it looking sort of "3D", you will need to choose two colors to replace the existing with in the various "background-image" declarations, and also put a single color into the fall-back "background-color" declaration.
tfpeditor
a.blue,
#featured .read-more a {
background-color: #1874cd; /* Dodger Blue */
background-image: -webkit-gradient(linear, left top, left bottom, from(#4f9eea), to(#1874cd));
background-image: -webkit-linear-gradient(top, #4f9eea, #1874cd);
background-image: -moz-linear-gradient(top, #4f9eea, #1874cd);
background-image: -ms-linear-gradient(top, #4f9eea, #1874cd);
background-image: -o-linear-gradient(top, #4f9eea, #1874cd);
background-image: linear-gradient(top, #4f9eea, #1874cd);
border: 1px solid #115290;
color: #fff;
text-shadow: 0 -1px 0 #115290;
}
a.blue:hover,
#featured .read-more a:hover {
background-color: #7db7f0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#7db7f0), to(#1874cd));
background-image: -webkit-linear-gradient(top, #7db7f0, #1874cd);
background-image: -moz-linear-gradient(top, #7db7f0, #1874cd);
background-image: -ms-linear-gradient(top, #7db7f0, #1874cd);
background-image: -o-linear-gradient(top, #7db7f0, #1874cd);
background-image: linear-gradient(top, #7db7f0, #1874cd);
border: 1px solid #115290;
color: #fff;
text-shadow: 0 -1px 0 #115290;
}Thanks--again I'm quite the novice at this. I found some red colors that I like. Do I just make the changes like so and tack it onto the end of whatever is in my stylesheet editor? When I do that and preview it, nothing happens.
<br />
a.red,<br />
#featured .read-more a {<br />
background-color: #B00000;<br />
background-image: -webkit-gradient(linear, left top, left bottom, from(#C80000), to(#B00000));<br />
background-image: -webkit-linear-gradient(top, #C80000, #B00000);<br />
background-image: -moz-linear-gradient(top, #C80000, #B00000);<br />
background-image: -ms-linear-gradient(top, #C80000, #B00000);<br />
background-image: -o-linear-gradient(top, #C80000, #B00000);<br />
background-image: linear-gradient(top, #C80000, #B00000);<br />
border: 1px solid #800000;<br />
color: #fff;<br />
text-shadow: 0 -1px 0 #800000;<br />
}<br />
a.red:hover,<br />
#featured .read-more a:hover {<br />
background-color: #F00000;<br />
background-image: -webkit-gradient(linear, left top, left bottom, from(#F00000), to(#B00000));<br />
background-image: -webkit-linear-gradient(top, #F00000, #B00000);<br />
background-image: -moz-linear-gradient(top, #F00000, #B00000);<br />
background-image: -ms-linear-gradient(top, #F00000, #B00000);<br />
background-image: -o-linear-gradient(top, #F00000, #B00000);<br />
background-image: linear-gradient(top, #F00000, #B00000);<br />
border: 1px solid #800000;<br />
color: #fff;<br />
text-shadow: 0 -1px 0 #800000;
Yeah, that looks good. You can paste that in and then use the preview to see how things look and adjust them if necessary.
When I paste it in and preview it, it does not seem to work. Am I missing something?
Is the code still in the CSS edit window and did you save it? If so, I can take a look at things for you.
Even though it seems a little counterintuitive, you do need to keep "a.blue" as a selector. In your example, you changed it to "a.red". You should keep the other color code changes, but switch back to "a.blue" in your selectors.
Whoops! I didn't see that. Thanks for the catch @designsimply.
Hi - I chose Call to action in the Theme Options (Responsive on .com) but se nothing at all. I thought it might live in a widget but can't see one. Is there more to showing it than the Theme Options checkbox? Thanks
Yes, that button will only appear if you are using a static front page with the "Home Template." See http://theme.wordpress.com/themes/responsive/ for more details.
Thanks ds I'll have a go with that...
Hi ds, done that, seen blue box call to action - thank you - but the page layout is a big surprise using 'Home' template. No sidebar and (just by default, so you know what I'm seeing) centred, large, copy.
Is there something you can say about
- Home template to explain what the idea is behind that layout,
- or how it is intended that the Call to action be used,
- and also pls roughly why the Call to action is available only for that page layout/type/template,
- and/or whether the sidebar can be added to that Home style to make Home template look like a normal page?
Just fyi I'd like to see Call to action in the sidebar (eg as or in a Widget).
Sorry if I'm missing the point...
Would you mind giving this page a read and then letting me know if you still have questions? http://theme.wordpress.com/themes/responsive/
In the Responsive theme, the Call to Action you're referring to is indeed only a part of the home page template, so it sounds like you're trying to do something different from what the default theme options are designed to do. That's no problem, but it wasn't clear from your original question. :)
To make a button similar to the Call to Action button on the Responsive home page template, I would recommend viewing the page source and copying the HTML used for that button into a text widget. The same styling rules that are in place should (mostly) work for the HTML you add compared to the one in the home page template.
I will walk through an example. First, I right-clicked on the "Read more >" button on the Responsive theme's demo page at http://responsivedemo.wordpress.com/ and then I selected the "Inspect Element" option which will pull up the browser inspector. I looked in the HTML that appeared and right-clicked the one with a "call-to-action" class and copied it. Here is the HTML:
<div class="call-to-action"><a href="http://responsivedemo.wordpress.com/about/" class="blue button">Read more ›</a></div>
Note that you can adjust the href value and the link text as needed.
Then I added a text widget and placed that HTML inside it.
http://en.support.wordpress.com/widgets/text-widget/
The padding for links has a more specific rule for the widget area that removes all padding, so to make the new button we added bigger, we need to add that padding back for widgets. Adding the following CSS should do the trick:
#widgets .call-to-action a.button {
padding: 15px 35px;
}If you're interested in learning more about CSS, please check out this tutorial:
http://www.htmldog.com/guides/cssbeginner/
In the future, would you mind please making a separate help request for things that are separate from the original thread (I know you may not have known it was separate at the beginning this time though). It helps to keep threads from getting too long and makes them easier to search back and find good, past examples.
This topic has been closed to new replies.
