Widget sizes & background colour

Home Forums Automattic Funki Widget sizes & background colour

Tagged: ,

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #107632 Resolve

    Steve Holmes
    Member

    Hi, how do I change the size of the images that I have on the widgets so that there is minimal white spaces between each – do I change the size of the widget? Also how do I change the background colour of the widgets, can I make it look like a coloured box around each one? And lastly, we have quite a large gap between our header and the start of the first widget – can this be reduced so the widget is closer up to the header?
    Our site is cyclelike.com.
    Thanks

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

    Michelle

    Hi there!

    how do I change the size of the images that I have on the widgets so that there is minimal white spaces between each

    Are you referring to the “G8 Pics” widget? Right now, I see only one image. If you want to reduce the spacing below the images in this widget, you can try the following CSS:

    .widget_image .wp-caption {
    margin-bottom: 6px;
    }

    Adjust the bottom margin to suit your liking.

    Also how do I change the background colour of the widgets, can I make it look like a coloured box around each one?

    Sure, give this a try!

    .widget {
    background: #eee;
    padding: 10px;
    }

    This gives each widget a light gray background color, with 10 pixels of padding around it, to prevent the text from bumping against the edge of the widget. Of course, change the color and padding to match what you like best. You might also need to change the text color and links, depending on the background color you choose.

    we have quite a large gap between our header and the start of the first widget – can this be reduced so the widget is closer up to the header?

    No problem! Try this:

    #main .widget-area {
    margin-top: 0;
    }

    I hope this helps! Let me know if you have any other questions.

    #137483

    Steve Holmes
    Member

    Thanks Michiecat – it looks much better now, you’ve been really helpful.

    #137488

    Steve Holmes
    Member

    Just wondering if you could help me with another question please. When we put images onto our site (any of our pages) we have to go into each image and in the css line we put in “size-large” so that the image doesn’t go over onto the widget area when viewing on an ipad. This is a bit annoying as often there is a lot of images and takes time to change each one. Is there a way we can put in some coding so that ALL images will not go over in the widget area (automatically) when viewing the ipad format?

    Thanks

    #137529

    Michelle

    Hi there,

    I haven’t been able to reproduce the problem on my iPad, but I will do some further testing to be sure. When you first upload an image, you can specify its size as “large” or “full” size before inserting them into your posts or pages, instead of inserting the class name manually for each image.

    Can you tell me exactly how you are adding images? This way, I can follow those steps and see if I can see the problem on my end. Thanks!

    #137556

    Steve Holmes
    Member

    Hi again, we have just put images onto our “Pocket Rocket” page, so if I don’t change any of them you will be able to see them on an ipad. The images that we import from our image library onto this page are fine, but when we copy & paste from images from another site they don’t automatically adjust for the ipad.

    #137592

    Michelle

    I see the problem now. When you add an image to your site through your image library, WordPress automatically assigns the necessary CSS classes that allow the image to adjust for to smaller screen sizes. Images that you copy and paste don’t get these classes applied automatically, as you found.

    We can look into making a change to the Funki theme to allow all images to adjust automatically, but I can’t make any promises. For now, I recommend adding images to your posts via the media library instead of copying and pasting them. If you want to add an external image, upload them to the media library first and then add it to your post from there.

    If we do make a change to the Funki theme, I’ll you know.

    #137599

    Steve Holmes
    Member

    Ok thanks for looking into that.

    I also have another question re the font sizes on Funki. I can’t figure out how to change the font size of “Paragraph” as I would like to have upper and lower case in some of our font but larger. I’ve used “Heading’s 1-6” but that is all upper case. Is there a css code I can use to give us more flexibility.

    Also back to the widget background colour that you helped us with earlier, I’m not sure where I get the codes for the colours from if I would want to change it in the future (#eee) ?

    Sorry but really don’t know css at all, just learning.

    #137676

    Michelle

    I can’t figure out how to change the font size of “Paragraph” as I would like to have upper and lower case in some of our font but larger. I’ve used “Heading’s 1-6” but that is all upper case. Is there a css code I can use to give us more flexibility.

    Give this CSS a try:

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

    This will prevent headings from automatically appearing in all-caps inside your posts and pages. Please note: Adding this rule will also remove the all-caps from your existing h1-h6 headlines, so if you want any of them to remain all-caps, you will need to edit them manually.

    I’m not sure where I get the codes for the colours from if I would want to change it in the future (#eee) ?

    Sorry but really don’t know css at all, just learning.

    No need to apologize; I’m glad you are learning CSS. Feel free to ask as many CSS questions as you like. :) The colors are in hexadecimal form, and you can find a chart of common colors on this page.

    I recommend checking out our CSS Basics document for a good primer.

    I hope this helps. Let me know if you have any other questions or if I can clarify anything. :)

    Cheers,

    Michelle

    #137755

    Steve Holmes
    Member

    Thanks Michelle – you’ve been a great help. The headings are much better. Thanks for the link to the colour charts, I’ll have a play with it and see how I go.

    Another question re the font colours in the widget area, I’d like the option to change what appears to be the default colour of grey and blue – how do I describe this?

    #137821

    Michelle

    Hi there,

    I’m glad I could help. :)

    To change the text color of the widget area, use this CSS:

    .widget {
    color: #666666;
    }

    Replace #666666 (the gray) with the color of your choice.

    To change the blue link colors inside widgets, try this:

    .widget-area a {
    color: #0074A3;
    }

    Again, change the color to the one of your choice. :)

    #138023

    Steve Holmes
    Member

    Hi and thank again.

    Sorry another one!

    Is it possible to change the font, and colour, of the Menu Headings ie. Home, About, Blog, Pocket Rocket etc. as they appear to be quite small. If so, what code do I put in?

    Thanks heaps.

    #138031

    Steve Holmes
    Member

    Also I’ve added another widget – Milestone – (Upcoming Event..) and wondered if I can change the size and background colour just for this one only, not the others. For example it is currently blue, and I would like it yellow. The size of the box “Moreton Bay 100” I would like to be the same width as “Upcoming Event…”

    Could you please let me know what the code is to make these adjustments.

    Cheers.

    #138054

    Michelle

    @lycralad,

    Is it possible to change the font, and colour, of the Menu Headings ie. Home, About, Blog, Pocket Rocket etc. as they appear to be quite small. If so, what code do I put in?

    Yes, you can change the size, and color of the menu items with this CSS:

    .site-nav a {
    color: #000;
    font-size: 14px;
    }

    You can control the font itself in the fonts section on Appearance > Customize > Fonts. If you want a different font for the menu, then add “font-family: Arial, Helvetica, sans-serif;” (or whatever font you want to use) to the rule above (just place it after the font size value).

    If you make the fonts larger, some of the menu items may wrap strangely around the search box. If you notice this happening, drop this code in. It will make the menu area take up only 80% of the space, preventing it from overlapping the search box. This will occur only on screens at least 900px wide.

    @media (min-width: 900px) {
    .site-nav ul {
    float: left;
    width: 80%;
    }
    }

    Also I’ve added another widget – Milestone – (Upcoming Event..) and wondered if I can change the size and background colour just for this one only, not the others. For example it is currently blue, and I would like it yellow. The size of the box “Moreton Bay 100” I would like to be the same width as “Upcoming Event…”

    Could you please let me know what the code is to make these adjustments.

    Here’s the CSS that should fix this for you:

    .milestone-content {
    max-width: 100%;
    }
    .milestone-header,
    .milestone-countdown,
    .milestone-message {
    color: #fff000;
    }

    #138075

    Steve Holmes
    Member

    Thanks Michelle, I’ve added those although I actually wanted the background – which is still currently blue – to be yellow! (Although it does look fine now). Could you give me the code should I decide to change it.

    Also the widgets still appear to be quite spaced apart from one another ie. between “Steve Holmes” “Upcoming Event” “Countdown” etc. How do I shorten up the gap between each?

    Also, I can only get the px to 13px as 14px distorts it all even though i have put in the code that you gave me.

    Any other suggestions?

    Thanks again.

    #138197

    Michelle

    I actually wanted the background – which is still currently blue – to be yellow! (Although it does look fine now). Could you give me the code should I decide to change it.

    Looks like I misread that you wanted the background color to be yellow. It’s an easy change. Just add this CSS below the original code I gave you for the Milestone widget:

    .milestone-countdown {
    background-color: #fff000;
    }

    Also the widgets still appear to be quite spaced apart from one another ie. between “Steve Holmes” “Upcoming Event” “Countdown” etc. How do I shorten up the gap between each?

    You can shorten the space with this CSS:

    .widget {
    margin-top: 20px;
    }

    I’ve changed it to 20px, the default is 40px. Adjust the number to your liking.

    Also, I can only get the px to 13px as 14px distorts it all even though i have put in the code that you gave me.

    I noticed that the media query is formatted incorrectly. Currently, it looks like this:

    @ media (min-width:900px) {
    width: 80%;
    }

    Here is how it looked when I originally provided the code:

    @media (min-width: 900px) {
    .site-nav ul {
    float: left;
    width: 80%;
    }
    }

    Can you change it back to this and see if the menu still looks distorted? If so, then it might be better to remove the search box from the menu area (you can display a search box in the sidebar instead). The search box in the menu works best with a smaller number of menu items.

    I hope this helps!

    #138359

    Steve Holmes
    Member

    Thanks Michelle you’ve once again been a great help.

    Cheers.

    #138414

    Michelle

    You’re welcome. I’m glad to help.

    I will mark this topic as resolved, but feel free to post any other questions you have in a new topic. :)

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Widget sizes & background colour’ is closed to new replies.