Need help? Check out our Support site, then


Spun : Text size and color changes

  1. Hi,
    How can I :
    1. change the size of the post/page titles?
    2. change the size and text type of the of the widget headings?
    3. change the hover color of the main menu?
    4. make the spacing of the category text inside the circle? You will be able to see this after clicking on one of the categories listed in the widget area, under 'Take a Look'.

    Thanks!

    The blog I need help with is kristenthefriendlypetsitter.wordpress.com.

  2. How can I :
    1. change the size of the post/page titles?
    You want to add a style and change the font-size element for size and font-family for style of font or font-style to change it to bold or italic for example:

    .wf-active .entry-title, .wf-active .entry-title a {
    font-family: raleway-1,raleway-2,Baskerville,"Playfair Display","Times New Roman",serif;
    font-style: normal;
    font-size: 37px;
    }

    2. change the size and text type of the of the widget headings?
    similar with a slightly different selector

    .widget-area .wf-active h1 {
    font-size: 20px;
    font-family: raleway-1,raleway-2,Baskerville,"Playfair Display","Times New Roman",serif;
    }

    3. change the hover color of the main menu?
    that would use the class of main-navigation and the hover state:
    .main-navigation a:hover {
    color: red;
    }

    4. make the spacing of the category text inside the circle? You will be able to see this after clicking on one of the categories listed in the widget area, under 'Take a Look'.

    You will want to change the style of that page header and add a line-height for example:

    .wf-active .page-header h1 span {
    font-size: 28px;
    line-height: 28px;
    }

    I hope this helps. Let me know if I can help with anything else.

  3. Thank you so much for your amazing help! Much appreciated :)

    There are a few more thing I want help with:
    1. How can I center the position of the category title inside the circle? Following from your last answer.
    2. When a category is selected (from the 'Take a Look Menu' below) the circles appear flat. How can I get them to enlarge when hovered over. Similar to what they do on the first page. Hope that makes sense.

    Thanks!

  4. 1. How can I center the position of the category title inside the circle? Following from your last answer.

    Find the rule in your custom CSS for this:

    .wf-active .page-header h1 span

    and add something like this to it:

    margin-top: -.7em;

    Adjust the number as needed. I noticed the Vet Visits category page already looked centered because of the way the text happened to get situated inside the circle, so make sure to check the spacing on all of the category pages.

    2. When a category is selected (from the 'Take a Look Menu' below) the circles appear flat. How can I get them to enlarge when hovered over. Similar to what they do on the first page. Hope that makes sense.

    I think this might be what you're looking for:

    .archive .hentry a:hover img {
    	-webkit-transform: scale(1.4);
    	-moz-transform: scale(1.4);
    	-ms-transform: scale(1.4);
    	-o-transform: scale(1.4);
    	transform: scale(1.4);
    }

    Test it out!

  5. Thank You! That's worked really well.

    Much appreciated! :)

    I've got one more question:
    How can I align my widgets nicely in 3 columns /rows (depending on the device used to view the site)? At the moment the widgets seem to be overlapping on tablet and mobile versions.
    Thanks!

  6. Hi, when I look at your site, I'm seeing some widget stuff going outside the bounds of the content container. It starts to happen around 1200px browser window width. At around 800px browser window width, the email address starts to be cut off on the right.

    Another issu is that the "address" field in the contact widget is actually designed for a physical address, not a email address, so that email address line of text cannot be broken or taken to two lines. Also, since the contact widget typically links to a Google Map, if you click on your email address, it takes you to a Google Map and does not initiate an email.

    One solution is to make the sidebars at the bottom go to a single column at an 800px and below width. You can add the following to the end of your custom CSS and see how that works.

    @media screen and (max-width: 555px) {
        .widget-column {
            width: 100% !important;
        }
        .widget-area {
            display: inline;
        }
    }

    I might suggest creating your own contact widget using a Text Widget. You could then use a shorter "Email Me" text line which wouldn't overflow the right side and then link it to your email address so that it would initiate an email for your visitors. This would be the basic code for an email link.

    <a href="EMAIL_ADDRESS">Email Me</a>

  7. Thanks for the helpful tips. That's worked really well!

    One last question -

    I want to add a few more things to the footer. How can I do this?

  8. The footer sidebars on Spun will take multiple widgets, so you can add additional widgets to the three footer widget areas just like you added the ones you have there now.

  9. So how can I add a copyright symbol to the footer - 'Blog At WordPress.com ...' footer?

  10. Add the following, which adds a line of text of your choice above the existing footer credits. If you want it to be below them, change "before" to "after". Also, I adjusted the top and bottom padding a little with the second rule. Top was 100px and bottom was 50px.

    .site-info:before {
        content: "This is my Copyright.;
        display: block;
    }
    .site-footer {
        padding-top: 100px;
        padding-bottom: 50px;
    }

    If you want to change the spacing between the lines, add the following and adjust as desired.

    .site-info {
        line-height: 40px;
    }

    If you wish to use the actual copyright symbol (©) then add the following code where you want it within the text string (without the space between & and the c).

    & copy;

  11. Thanks a million!

    I used 0a9 for the copyright symbol in my CSS code.
    So the code used was :

    .site-info:before {
        content:"0a9 ...";
        display: block;
    }
  12. Looks great and you are welcome.

  13. I have one more question:
    How can I create a link text in my footer? I want to link a word to another URL.
    Thanks!

  14. Hi, there isn't a way to create a link in the footer with CSS. A text widget could be used and moved down into the footer area (with the linked text in it) but this is very problematic with responsive width themes since position: absolute has to be used and it requires a good number of media queries to keep it aligned properly in the footer area.

    I can give it a try for you if you wish to add the text and linked word to a text widget. You will have to include all the wording, not just the one word.

Topic Closed

This topic has been closed to new replies.

About this Topic