FrameMarket: Reducing font sizes

Hello WPMU Dev Support,

I am using the FrameMarket/GridMarket themes on domain http://www.flout.co

Various patches of code have been provided to me to reduce the font sizes, I now need to reduce the font sizes for:

1) The menu
2) The Product Lists that are in the footer/bottom of the page on Flout.co
3) How do I reduce the font size for the whole website, I think this is the Typography setting that would be in the .css file, I would like to get full control of the font sizes and set them as I need.

Kind regards,
Yusef

  • ThePath
    • The Bug Hunter

    Hello Yusef thanks for being a member and for using the forum,

    OK Ive had a quick look in the gridmarket CSS file and:

    In file: framemarket/themes/gridmarket/css/grid.css on line 195:

    body{font-size:12px;font-family:Helvetica,Arial,sans-serif;line-height:22px;margin:0px;}

    If you change the font-size property there then it will change all the text that is not individually styled later like:

    on line 211:

    .mp_product_price{color:#666666;font-size:14px;line-height:40px;}

    and line 243:

    .mp_cart_contents th,.mp_cart_shipping th{padding:5px;font-weight:bold;border:1px solid #ffffff;font-size:14px;}

    and line 255:

    table.mp_cart_login th{font-size:14px;font-weight:bold;padding:10px;}

    This should change your menu font size I reckon on line 266:

    .nav a,.nav a:visited,.nav a:link{font-style:normal;text-decoration:none;display:block;padding:15px 10px;font-size:18px;margin:0;}

    The sidebar is on line 303:

    #sidebar li{font-size:14px;line-height:30px;list-style:none;}

    There are some others, bascially if you open up the CSS file and do a search for: font-size

    Then you will find all the font sizes. I didnt notice any for the footer so this may default back to a previous CSS file. Hang on I shall check with Firebug, I recommend you install Firebug on Firefox too and you can trace these CSS settings with ease. I think the footer text size is controlled by the body CSS settings.

    Hope that helps, if so dont forget to mark this as resolved, if not then let me know and I will help more if I can.

    Cheers

  • 3SixtyEvolve
    • New Recruit

    Assalaam Alaykum Yusef

    Hope you are well.

    Our member @ThePath has been very helpful and has provided some good advice there. However, I just want to add that, when making changes to the theme files and you have to update the theme at some point, you will automatically loose all of the styling and changes and you will have to redo the changes.

    For this reason it is always advisable to create a child theme. Here is an excellent tutorial that will guide you through the process; and InshAllah this should avoid you making changes again when upgrading the theme.

    Create Your Very Own FrameMarket Child Theme

    If you need any further assistance, please don't hesitate to be in touch.

    Gina

  • mroracle
    • Site Builder, Child of Zeus

    Hello All,

    Many thanks for the replies, they were not the answers I was expecting.

    As I mentioned, I have had replies back to make code changes for reducing the font on various parts of the GridMarket theme, these have all provided css code that is put into a file called custom.css.

    The custom.css is located in the same directory as grid.css, anything you put in here overrides what is in grid.css which avoids having to edit the grid.css or create another child theme for FrameMarket.

    WIll lok at what has been provided and see if I can work out from it what the code is to go into custom.css so that the font is reduce across the entire grid.css theme.

    If anyone knows this code please post.

    Kind regards,
    Yusef

  • mroracle
    • Site Builder, Child of Zeus

    Hello,

    In my quest to reduce font sizes for the menu I have been trying without success to add code to the custom.css file within GridMarket theme.

    Does anyone know the code to add to the custom.css file that will reduce the font size of the menu?

    Same question again but need to reduce the font size within the Product List in the footer widgets for GridMarket.

    Same question yet again, what is the code to add to the custom.css file that will override the font-size for the whole theme.

    Refer to Flout.co

    Kind regards,
    Yusef

  • ThePath
    • The Bug Hunter

    Yeh good call gina I should have said make any changes in your custom.css file rather than the grid.css

    @Yusef just add the css Ive mentioned above in your custom.css file:

    This should change your menu font size I reckon on line 266:

    .nav a,.nav a:visited,.nav a:link{font-style:normal;text-decoration:none;display:block;padding:15px 10px;font-size:18px;margin:0;}

    If you add:

    .nav a,.nav a:visited,.nav a:link{ font-size:14px}

    to your custom.css that will reduce the font size for the menu. Do this for all the others I mentioned above to change all text sizes.

    Hope that helps

  • mroracle
    • Site Builder, Child of Zeus

    Hello Gina and @ThePath,

    I am very grateful for the effort to help, what I have tried to assess is the help both of you have actually been to resolve this problem.

    The last post from @ThePath refers to Gina about custom.css, this was actually suggested by myself and I think @ThePath has mistaken it for a post by Gina who suggested creating a whole new child theme.

    The custom.css was explained to me by @PCWriter and Arun Basil Lal (Staff).

    The code I worked out for myself from the support I have received from @PCWriter and Arun Basil Lal (Staff), here it is, the following needs be pasted into the custom.css file within GridMarket css folder:

    #navigation
    .nav a,.nav a:visited,.nav a:link{
    font-style:normal;text-decoration:none;display:block;padding:11px 10px;font-size:15px;margin:0;} !important;

    #navigation
    .nav .current a,.nav li:hover > a,.nav li.current_page_item a{padding:11px 10px;} !important;

    What is critical is the #navigation and !important; otherwise it will not override the GridMarket default css settings.

    Again, I thank both of you for your help but had I followed your initial advice then the changes would have been lost once an upgrade for FrameMarket/GridMarket themes were issued or I would have been left creating a whole new child theme to resolve a simple problem.

    The credit here really belongs to @PCWriter and Arun Basil Lal (Staff).

    Kind regards,
    Yusef

  • ThePath
    • The Bug Hunter

    Hi Yusef,

    Yes but Gina did say:

    However, I just want to add that, when making changes to the theme files and you have to update the theme at some point, you will automatically loose all of the styling and changes and you will have to redo the changes.

    And as you rightly say you mentioned custom.css which sparked my memory of seeing it when I glanced through the code.

    Its not the way the custom.css file should work, any child files or custom.css files should be loaded after the main CSS sheet. Its bad practice to have to use !important all the time. The call it cascading for a reason, if the custom.css file is called after the main one then the custom would over write it. I would flag this up to a dev to see if it can be changed.

    Cheers

  • mroracle
    • Site Builder, Child of Zeus

    Hello @ThePath,

    Very grateful for the advice on CSS, will be keeping a local copy of my custom.css based on your advice.

    Will also raise the overwriting of custom.css as an error with WPMU Dev.

    I really need to get on a css course and learn the basics.

    Again, many thanks,
    Yusef

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.