Need help? Check out our Support site, then


CSS: Change Subscribe button - Fusion Theme

  1. Hi,

    I have the Fusion Theme (www.purecomplex.com) and I can't find the css language that will allow me to change the look of the subscribe form. Can someone please help point out where the language is and how to change it?

    I also want to know if I can change how the "Excerpt" post appears? Right now I have it on Full Post, because on "Excerpt" post, it doesn't show an image.. just writing. Is there a way I can change that? Please help and thank you in advance for anyone willing to help.

    The blog I need help with is purecomplex.com.

  2. I have the Fusion Theme (www.purecomplex.com) and I can't find the css language that will allow me to change the look of the subscribe form.

    The Fusion Theme doesn't have any specific CSS rules setup for the subscribe form, and that means it will just inherit rules used for the sidebar in most cases. When that happens, you'll want to look at the HTML to see what selectors to use in your CSS.

    Here is an example of the HTML for the visible elements of the follow widget while logged out:

    <div class="widget widget_blog_subscription" id="blog_subscription-6"><h2 class="title"><label for="subscribe-field">Receive Updates via Email..</label></h2>
    			<form id="subscribe-blog" accept-charset="utf-8" method="post" action="https://subscribe.wordpress.com">
    				<p><input type="text" id="subscribe-field" value="" style="width: 95%; padding: 1px 2px" name="email"></p>
    				<p>
    					<input type="submit" value="Subscribe Today..">
    				</p>
    			</form>
    </div>

    To style the subscription field and the submit button separately, you would add CSS using selectors like this:

    .widget_blog_subscription #subscribe-field {
    /* CSS goes here */
    }
    
    .widget_blog_subscription input[type="submit"] {
    /* CSS goes here */
    }

    Here is a more specific CSS example which changes a few things about the input fields:

    .widget_blog_subscription #subscribe-field {
    height: 25px;
    border: 1px solid black;
    color: #444;
    }
    
    .widget_blog_subscription input[type="submit"] {
    background: darkorange;
    color: black;
    display:block;
    width:100%;
    padding:5px;
    border:1px solid sienna;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
    }

    Of course, this is just one way of styling the form elements, and you can add/remove/adjust the rules to your liking.

  3. I also want to know if I can change how the "Excerpt" post appears? Right now I have it on Full Post, because on "Excerpt" post, it doesn't show an image.. just writing. Is there a way I can change that?

    There is not a way to add images to automatic excerpts, but you can setup your own excerpts manually and include images. To do it, open a post for editing, click the Screen Options tab at the top right of the page, make sure the "Excerpt" option is checked, find the excerpt on the page, add in a manual excerpt including HTML code for the image you'd like to add, and save changes.

    Here is an example of a manual excerpt with an image:

    <img src="YOUR_IMAGE_URL" class="alignleft"/> This is a test post with a manual excerpt that also includes an image.

    Replace YOUR_IMAGE_URL with an image URL you choose. The best practice is to upload an image to your media library and then copy the image URL from there.

  4. Thank you so much designsimply. This helped a great deal :)

  5. Awesome! :)

Topic Closed

This topic has been closed to new replies.

About this Topic