-
Posts
-
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
The blog I need help with is cyclelike.com
cyclelike.com
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
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
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! :-)
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?
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 0If 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.
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
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
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
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.
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/
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!
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.
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
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
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;
}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;
}
Thanks Kathryn, that all works really well!
Cheers,
Claire
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
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.
The topic ‘Header-font’ is closed to new replies.
Theme Support 