Making the right images smaller with spaces inbetween

  • Author
    Posts
  • #102722

    nithoan
    Member
    Original poster

    Hi! I just purchased the Monet theme and would love to make the images that shows up on the right smaller with spaces inbetween them. Is it possible? ty!

    https://controllercompanies.com/

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

    #102819

    binarymoon
    Theme Author

    Hi there – thanks for the message. do you still want help with this? The site listed above is not running Monet.

    If you want help then I think this is possible using the custom css which requires WordPress premium. If you have that then I can give you the css required.

    #102827

    nithoan
    Member
    Original poster

    Oh hi! I sent the wrong blog as Im currently managing a few blogs.

    This is the blog I’m referring to :
    https://controllercompanies.com/

    #102831

    binarymoon
    Theme Author

    No problem :)

    The css to make the images smaller is:

    .main .post-archive article {
    padding: 10px;
    }

    You can change the 10 to whatever number you prefer.

    You may want to change some of the colours and whatnot, this can be done with css as well so just let me know what colour etc and I can give you the code for that also.

    #102832

    nithoan
    Member
    Original poster

    Awesome! For colours, does gradient work?

    #102834

    binarymoon
    Theme Author

    Gradients may be possible but they’re quite complex so it depends what you want to do. Solid colours are definitely easiest :)

    #103020

    nithoan
    Member
    Original poster

    I see, ty a lot, btw, could I add images for each menu options?

    #103027

    binarymoon
    Theme Author

    Do you mean images beside the menu items? That’s possible with custom css. The code is specific to each menu item though – so if you upload the images to your site, and then paste the links on here then I can give you the css needed.

    #103034

    nithoan
    Member
    Original poster

    I mean with my current website:

    https://controllercompanies.com/

    At the left of the website is a list of Menu that links to different posts and catagories, is there a way for each link to display a small thumbnail , especially for the product reviews?

    #103038

    binarymoon
    Theme Author

    Hi – thanks – I fully understand now.

    The only way to do this is with custom css. There’s no way to automate this or control this through WordPress so it would be a manual process each time you want to change it.

    To do it you would need to upload an image through the media editor, and then insert it using some custom css. However if you change the menu then it’s likely the css will break and so you would need to update it again.

    It may work out to be a lot of effort however if you upload a couple of images and give me the links to them I’d be happy to give you some css to show how it would work.

    #103041

    nithoan
    Member
    Original poster

    I see, well, let me try with one example:

    For the Tascam 2X Review, this is the image link
    https://controllercompaniesdotcom.files.wordpress.com/2016/11/tm2x-cover.png

    could ya make it into a thumbnail in the menu link for it?

    #103045

    binarymoon
    Theme Author

    Took me a while to find that menu item – is quite deep down in there :)

    The css needed is this:

    .menu-item-2161 > a:before {
        display: inline-block;
        content: '';
        background: url(https://controllercompaniesdotcom.files.wordpress.com/2016/11/tm2x-cover.png?resize=50,50);
        width: 3rem;
        height: 3rem;
        background-size: cover;
        vertical-align: bottom;
        margin-right: 0.3em;
    }

    This will need to be done custom for each link you add to the site. You will need to know/ workout the menu id for each link, and if you change the menu then you may need to update the menu ids.

    #103046

    nithoan
    Member
    Original poster

    Wicked! That’s just what I want! Cheers!

    Just one caveat left, the thumbnail seems to be quite blurry, is there a way to put it in a more high-res quality?

    #103047

    binarymoon
    Theme Author

    You can change all the numbers to taste.

    For example to make the icon bigger change 3rem to 4rem (or 4.5rem or whatever). The actual thumbnail is a background image, the size is set by the icon container (the 3rem size), however to change the resolution you can change the url path.

    https://controllercompaniesdotcom.files.wordpress.com/2016/11/tm2x-cover.png?resize=50,50

    The 50,50 is the width,height – so a higher resolution image might be:

    https://controllercompaniesdotcom.files.wordpress.com/2016/11/tm2x-cover.png?resize=100,100

The topic ‘Making the right images smaller with spaces inbetween’ is closed to new replies.