Spun theme – 4 questions

  • lckyby · Member ·

    Total newcomer to CSS and I only want to sort a few things out.

    1. I have headings set to Futura PT and body text set to FF Basic Gothic. Is there a way to make body text Futura PT?

    2. How can I widen my actual posts (as opposed to the front page)?

    3. How to change the ‘HOME’ and ‘ABOUT’ headers at the top right of my homepage to lower case Futura PT?

    4. How can I make the font size of the titles within the circles smaller?

    Thanks

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    Hi there,

    1. I have headings set to Futura PT and body text set to FF Basic Gothic. Is there a way to make body text Futura PT?

    Give the following CSS a try to change the content font to Futura. You can adjust the font size as desired. I included the 120% so that the new font was about the same size as the original. The font stack (list) I used was copied from the headings. 

    .wf-active .entry-content, .wf-active .entry-summary {
    font-family: futura-pt-1,futura-pt-2,Baskerville,"Playfair Display","Times New Roman",serif;
    font-size: 120%;
}

    2. How can I widen my actual posts (as opposed to the front page)?

    You can specifically target the single posts and pages by using body classes to limit the change to those pages only. There is 50px of padding on each side of the content, so the second rule below has to be 100px less than the width setting in the first rule unless you wish to increase the overall page width for single posts. See what you think with the following which increases the single post and static page content width by 100px. without increasing the overall width of the page itself. 

    .single .content-area, .page .content-area, .search-no-results .content-area, .error404 .content-area {
    width: 900px;
}
.single .hentry, .error404 .hentry, .page .hentry, .search-no-results .no-results {
    width: 800px;
}

    Along with the above, set the “Content Width” (below the CSS input box) to the same width as the second rule (in this case, 800px).

    There are limits on the above width change unless the overall page width is increased.

    3. How to change the ‘HOME’ and ‘ABOUT’ headers at the top right of my homepage to lower case Futura PT?

    Give the following a try. Again you can adjust the font size as desired. 

    .main-navigation a {
    font-family: futura-pt-1,futura-pt-2,Baskerville,"Playfair Display","Times New Roman",serif;
    font-size: 120%;
}

    4. How can I make the font size of the titles within the circles smaller?

    The font size was originally set to 30px with the Futura font. You can adjust the size as desired. 

    .wf-active .hentry .thumbnail-title {
    font-size: 25px;
}
  • lckyby · Member ·

    Thanks a lot! I thought this topic had been deleted as spam so only realised you replied because after looking at my referrers.

    One final thing, when I hover over one of the headers and site title, all of them get highlighted rather than just the one.

    How do I make the hover over only highlight the actual header I am hovering over?

  • alinutzac · Member ·

    Hi there,

    Could someone help me understand what code should I use in CSS to increase the space between the site title, menu and posts on the main page? Also, is there a way to make the titles on the circles appear faster when hovering the mouse over them?
    Is there a list of fonts that can be used for the headings and body text, other than the ones available in the Fots menu?

    The blog I need help with is http://jurnaldehoinar.com/

    Many thanks in advance for your help!

    Alina C

  • thesacredpath · Member ·

    Hi there, you can add the following CSS and then adjust the bottom margin values as you desire. 

    .site-title {
    margin-bottom: 20px;
}
.main-navigation {
    margin-bottom: 20px;
}
  • The topic ‘Spun theme – 4 questions’ is closed to new replies.