Header-font

Home Forums Automattic Funki Header-font

Tagged: 

Viewing 20 posts - 1 through 20 (of 33 total)
  • Author
    Posts
  • #108338 Resolve

    Steve Holmes
    Member

    Hi there,
    Can you please help me with the CSS code to change our headings
    1. the font style (have tried but to no avail)
    2. the option to have lower case (seems to be only upper case?)

    Thanks
    cyclelike.com

    The blog I need help with is cyclelike.com
    #140007

    Steve Holmes
    Member

    I’ve also another question re images – how do I reduce the gaps between images and images/text?

    For instance on our Home page we have an image of a ‘brown rope’ which sometimes has a narrow gap between it and another image, and sometimes has a large gap between. How can we make this look the same (all small gaps)?

    This is particularly noticeable on mobile devices.

    Thanks again,

    cyclelike.com

    #140009

    Steve Holmes
    Member

    Again another one!

    We have our Facebook Page embedded in our widgets, but we would like it to be embedded onto our Home Page.

    Could you please explain how we can do this.

    Thanks.

    cyclelike.com

    #140031

    Kathryn P.
    Happiness Engineer

    Hi there – I will reply separately to your questions. :-)

    Can you please help me with the CSS code to change our headings

    1. the font style (have tried but to no avail)

    You can change your heading font under Customize > Fonts:

    http://cl.ly/image/1p3D2J2n1u0c

    It looks like you’ve already selected Netto as your heading font, and that’s what I see on your site. Did you still need help with this part?

    2. the option to have lower case (seems to be only upper case?)

    I see that you tried this:

    .entry-content h1, h2, h3, h4, h5, h6 {
    text-transform: none;
    }

    That syntax isn’t correct. Try this instead:

    .entry-title {
    text-transform: none;
    }

    Let me know how this goes.

    p.s. in future, feel free to start separate threads for each issue you need help with. It helps us keep things a little more organized – thanks! :-)

    #140033

    Kathryn P.
    Happiness Engineer

    We have our Facebook Page embedded in our widgets, but we would like it to be embedded onto our Home Page.

    I already see the Facebook Like box in the sidebar on your homepage. Could you let me know specifically where else you wanted to add it on the homepage? I’m not quite sure I understand – did you want to repeat the box a second time?

    http://cl.ly/image/0H2S183W2M2S

    #140037

    Kathryn P.
    Happiness Engineer

    I’ve also another question re images – how do I reduce the gaps between images and images/text?

    You can adjust the spacing around images by adding some CSS to the image’s advanced settings.

    After inserting an image, click the image so you see the blue image-editing icon. Click that icon.

    http://cl.ly/image/2J3U3t2V2p0E

    A modal popup window will open. Click the Advanced Settings tab on that window. Click it.

    http://cl.ly/image/0l1e0u2z1d1N

    In that window you will see a text box next to “Styles.” This is where you’ll add your CSS.

    http://cl.ly/image/1R2M403B1S23

    Margin is what you’ll usually want to add spacing around images.

    You can use the shorthand format, like this:

    margin: 10px 0 10px 0;

    That would add 10 pixels of space above and below the image, and 0 pixels to the left and right. (The numbers are applied clockwise, top, right, left, bottom.)

    You can also use a shortcut to indicate the same thing:

    margin: 10px 0

    If you prefer longhand, you can separate each CSS statement with semicolons, like this:

    margin-top: 10px; margin-right: 0; margin-bottom: 10px; margin-left: 0;

    If you’d like to learn more about using CSS margin code, this is a good resource: http://www.w3schools.com/css/css_margin.asp

    Just let me know if you have any questions on this.

    #140062

    Steve Holmes
    Member

    Hi Kathryn,

    Sorry I wasn’t specific enough in my questions.

    Firstly re Font –

    1. I really meant “Page Titles” – how do I change them from upper case to upper&lower case? (the headings are fine-they work well already)

    2. I can change the font successfully in ‘Headings’ and ‘Body Text’ from say ‘”FF Netto” to say “FF Market” but it doesn’t seem to change the “Page Title” text under our main header picture (ie. Home, About, Blog etc.) – how do I change the font there?

    Thanks,

    Claire

    cyclelike.com

    #140071

    Steve Holmes
    Member

    Secondly re Facebook –

    We want to embed our Facebook page onto our “Home Page” at the top of the page. We do not want to have it as a widget, so will take that out once we have embedded it onto the home page.

    ( a social plugin called a ‘Like Box’??)

    For example here is a website that has their Facebook embedded http://www.gcctc.com.au

    Thanks,

    Claire

    cyclelike.com

    #140072

    Steve Holmes
    Member

    Thirdly re Spacing around/between Images and text –

    I couldn’t get the css code you offered to make any difference, but found that by reducing the shortcode font on each image on the page from ‘Heading’ to ‘Paragraph’ closed up the space between, so am happy with that.

    Thanks,

    Claire

    #140091

    Kathryn P.
    Happiness Engineer

    I couldn’t get the css code you offered to make any difference, but found that by reducing the shortcode font on each image on the page from ‘Heading’ to ‘Paragraph’ closed up the space between, so am happy with that.

    Alright, glad you found a workaround. If you do want me to look at an image where you couldn’t get the CSS margins working, feel free to post a link to the page, let me know which image it is, and I’ll be happy to have a look.

    #140092

    Kathryn P.
    Happiness Engineer

    We want to embed our Facebook page onto our “Home Page” at the top of the page. We do not want to have it as a widget, so will take that out once we have embedded it onto the home page.

    ( a social plugin called a ‘Like Box’??)

    The Facebook Like Box can only be placed within widgets on WordPress.com, not within the post or page editor itself.

    You can embed individual Facebook updates in a post or a page:

    http://en.support.wordpress.com/facebook-integration/facebook-embeds/

    #140093

    Kathryn P.
    Happiness Engineer

    1. I really meant “Page Titles” – how do I change them from upper case to upper&lower case? (the headings are fine-they work well already)

    I’m not 100% clear what you mean. Do you mean the words at the top of each page, in between the menu and the main content, like you see here?

    http://cl.ly/image/3C2G1c3O1J1t

    If that’s what you mean, then the code I gave you earlier should work – did you try it out?

    .entry-title {
    text-transform: none;
    }

    Here’s what it looks like: http://cl.ly/image/3C2G1c3O1J1t

    Is that the effect you’re after? If you’re trying to target a different piece of text on the page, could you show me exactly where? Thanks!

    #140094

    Kathryn P.
    Happiness Engineer

    2. I can change the font successfully in ‘Headings’ and ‘Body Text’ from say ‘”FF Netto” to say “FF Market” but it doesn’t seem to change the “Page Title” text under our main header picture (ie. Home, About, Blog etc.) – how do I change the font there?

    Are you referring to your menu bar?

    http://cl.ly/image/0x152B2L2l1S

    If so, it’s not possible to use Typekit (custom) fonts in the menu. Typekit fonts can be used to change page/post headings and body text only.

    #140150

    Steve Holmes
    Member

    Thanks for your replies.

    The code finally worked for the “Page Titles” – thanks.

    Ok re the Facebook Likebox – we will leave it in the widgets.

    Re the Typekit (custom) fonts in the menu – pity there is no way to change it, I guess it’s a Funki theme thing as I’ve looked at other themes and they have upper & lower case. Maybe the techy team might look at this in the future???

    Cheers,

    Claire

    cyclelike.com

    #140209

    Steve Holmes
    Member

    Hi again,

    Just following on in regarding to the Menu Bar.

    I’ve played around and changed the colour of the Menu titles (eg. “Cycle Clubs”) and the drop-downs (eg. “Australia”) which is fine.

    When I hover over the drop-down a black box highlights the item.

    This highlighted black box extends beyond the text box.

    1. What code do I use to shorten the highlight ?

    2. Can I change this highlight colour to say blue?

    Cheers,

    Claire

    #140235

    Kathryn P.
    Happiness Engineer

    Re the Typekit (custom) fonts in the menu – pity there is no way to change it, I guess it’s a Funki theme thing as I’ve looked at other themes and they have upper & lower case. Maybe the techy team might look at this in the future???

    If your goal is just to have upper/lowercase letters in the menu, then that’s totally possible. (Sorry – I was not clear that this was what you were trying to do; I thought you were asking if you could use a different font for the menu than the one for your headings.)

    Could you please try this:

    .site-nav a {
    text-transform: inherit !important;
    }

    #140237

    Kathryn P.
    Happiness Engineer

    When I hover over the drop-down a black box highlights the item.

    This highlighted black box extends beyond the text box.

    1. What code do I use to shorten the highlight ?

    .site-nav ul ul a,
    .site-nav ul li:hover > ul a {
    width: auto !important;
    }

    2. Can I change this highlight colour to say blue?

    .site-nav ul ul a:hover, .site-nav ul li:hover > ul a:hover {
    background-color: #4DBCE9 !important;
    }

    #140333

    Steve Holmes
    Member

    Thanks Kathryn, that all works really well!

    Cheers,

    Claire

    #140341

    Steve Holmes
    Member

    Me again!

    eeeekkkk! I’ve mucked something up and lost some of our codes.

    Could you please have a look at our css and how I can change/fix the following:

    1. The menu headings have a black box when hovered (Home, About, Blog,Pocket Rocket etc.) – I’d like this to be blue (like “Back Editions” etc.)

    2. The drop down box is quite long – can this be shortened to fit the words only (ie “Back Editions” not “Back Editions “) ?

    3. The drop down box background I had earlier today in the colour #FF6347, now it’s white, how do I get this colour back?

    4. The SEARCH BOX came back! I got rid of it ages ago, please how can I delete that

    Really appreciate your help

    Cheers,

    Claire

    #140353

    Kathryn P.
    Happiness Engineer

    Hi there, you can always see your CSS revisions and revert back to an earlier version. You’ll see a link to them at the top right of your CSS customization screen:

    http://cl.ly/image/09443x0v3V0P

    You’ll then see a box where you can select from any of your CSS revisions:

    http://cl.ly/image/301n1K29242U

    Could you have at some of your older revisions to find your earlier CSS. Anything specific that you’re still having trouble with after looking there, please let me know. Thanks.

Viewing 20 posts - 1 through 20 (of 33 total)

The topic ‘Header-font’ is closed to new replies.